视频Js动态加载源代码

时间:2016-02-02 11:05:50

标签: javascript html html5-video video.js

嗨我有一个有网格和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>");

任何帮助将不胜感激

1 个答案:

答案 0 :(得分:5)

如果您使用的是video.js,则需要使用其API来设置来源。 HTML5视频API无法正常运行,因为初始化video.js播放器时,标识为vid的元素不是视频元素。

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

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

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