Video Js动态加载源答案

【问题标题】：Video Js loading source dynamicallyVideo Js动态加载源
【发布时间】：2016-05-11 03:43:56
【问题描述】：

您好，我有一个应用程序，它有一个网格和一个 js 视频播放器。目前我正在使用来自 SQL 数据库的数据填充网格，当单击一行时，我有一个函数调用，它调用存储过程并返回一个 url，然后使用该 url 更改源更改源。有趣的是，使用基本的 html 5 视频播放器，我的代码可以正常工作，但不适用于 Video JS

我的代码 -

function changesource(url) {

    var video = $("#vid1");
    video.src = url;
    document.getElementById('vid1').src = url;


 }
// calls the function for browse 
function getBrowseData() {
$.ajax({
    type: "post",
    data: JSON.stringify({
        archive_header_Key: testdata,
    }),
    url: "/Search.aspx/GetBrowseData",
    dataType: "json",
    contentType: "application/json",
    success: function (object) {
        response(object);
    },
    complete: function (object) {

    },
    error: function (object) {
    }
});
function response(object) {

        var obj = (object.d[0]["browse_file"]);

    var slashReplace = obj.replace(/\\/g, "/");
    var slashFinal = slashReplace.substring(10);
    var browsevalue = GetValue("BrowseServer");
    var slashfinal = "http://" + browsevalue + ":5060" + slashFinal;
    Location = slashfinal;
    $('#p1').text(slashfinal);     


    changesource(slashfinal);
}

}

var Video = ("<video id='vid1' class='video-js vjs-default-skin' controls  preload='none' width='640' height='264' data-setup='{}'><source src=" + Location + "  type='video/mp4'/></video>   <script>var options = { hidden: false }, mplayer = videojs('vid1'); mplayer.rangeslider(options); mplayer.showSlider();</script>");

任何帮助将不胜感激

【问题讨论】：

标签： javascript html html5-video video.js

【解决方案1】：

如果您使用的是 video.js，则需要使用其 API 来设置源。 HTML5 视频 API 不起作用，因为一旦 video.js 播放器被初始化，ID 为 vid 的元素就不是视频元素。

var video = videojs("vid1");
video.src(url);

Video.js 会为一些文件扩展名推断视频的类型，但最好包含 type：

video.src({
  type: 'video/mp4',
  src: 'https://example.com/myvideo.mp4'
});

【讨论】：

不幸的是，这并没有像我所说的那样起作用（我已经编辑了问题以包含它。）
关于代码将替换您当前在changesource(url) 中的代码。您最初将视频元素添加到 DOM 的方式没有任何区别。
嗨所以我将函数更改为函数 changesource(url) { var video = videojs("#vid1");视频.src(url);但是我在视频播放器中得到的只是没有找到该视频的兼容源。但是当我直接将链接放入时它可以工作。我还检查了它是否获得了正确的来源。
添加新源时是否需要刷新播放器？
videojs("vid1"); 中没有#。您无需重新创建播放器即可更改源。 videojs('player-id') 从具有 id 'player' 的视频元素创建一个 video.js 播放器并返回它，或者如果播放器已经存在，则只返回它。

【解决方案2】：

如果您使用带有视频 js 的 react 功能组件，那么您必须使用 useRef Hook 访问视频标签，像这样

{



import {useRef} from 'react';
         const videoRef=useRef();

useEffect(()=>{
videoRef.current.src=DYNAMIC_DATA_URL
})

         return <>
         <video
             id={state.video.id}
             className="video-js vjs-big-play-centered"
             width="800"
             height="482"
             controls
             autoPlay={true}
             preload="auto"
             poster={state.video.thumb}
             data-setup="{}"
             ref={videoRef}
         >

             <source src={a} type="video/mp4"></source>

         </video>
     </>

}

【讨论】：