Video Js 动态加载视频源

Question

你好，我有一个应用程序，其中包含一个表格和一个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>");

需要任何帮助都会很感激

- Mark Moonie Griffiths

Answer 1

如果您正在使用video.js，则需要使用其API来设置源。HTML5视频API无法工作，因为一旦初始化了带有id vid的元素，它就不是一个视频元素。

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

Video.js会根据一些文件扩展名来推断视频类型，但最好还是包含type：

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

- misterben

---

不幸的是，它没有按照我调用更改的方式工作（我已经编辑了问题以包括它）。 - Mark Moonie Griffiths

上述代码将替换您当前在changesource(url)中的代码。您最初如何向DOM添加视频元素并不重要。 - misterben

嗨，我把函数改成了这样：function changesource(url) { var video = videojs("#vid1"); video.src(url); } 但是视频播放器上显示“找不到兼容的视频源”。但是当我直接输入链接时，它可以正常工作。我也检查过它获取的源是正确的。 - Mark Moonie Griffiths

当添加新的源时，我是否需要刷新播放器？ - Mark Moonie Griffiths

在 videojs("vid1"); 中不需要加 #。您无需重新创建播放器即可更改源。videojs('player-id') 会从具有 id 'player' 的视频元素创建一个 video.js 播放器并返回它，或者如果已存在则只返回播放器。 - misterben

我找出了我的问题所在，我没有设置一个起始源，所以它一直报错。一旦我设置了初始源，它就可以正常工作了。谢谢你的帮助。 - Mark Moonie Griffiths

Answer 2

如果你正在使用React函数组件与Video.js，那么你必须使用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>
     </>

}

- Raja Faizan