视频Js动态加载源 [英] Video Js loading source dynamically

问题描述

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

Hi I have an application which has a grid and a js video player. Currently I am populating the grid with data from a SQL database, I have a function call when ever a row is clicked which calls a stored procedure and returns a url i then use that url to change the source change the source. The funny thing is with a basic html 5 video player the code i have works fine but doesn't work for 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>");

任何帮助将不胜感激

推荐答案

如果您使用video.js，则需要使用其API来设置源.初始化video.js播放器后，HTML5视频API将无法正常工作，ID为vid的元素不是视频元素.

If you're using video.js you need to use its API to set the source. The HTML5 video API does not work as once the video.js player is initialised the element with the id vid is not a video element.

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

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

Video.js will infer the type of video for a few file extensions, but it's better to include the type:

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

这篇关于视频Js动态加载源的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！