0

I want to make an ajax call, and then display an html 5 video.

The following code doesn't work.

 $.ajax({
            type: "POST",
            url: "Videos.aspx/GetBlocs",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {

                $("#videoPlayer").html(
                   '<video id="Video1" src="" class="video-js vjs-default-skin" ' +
                   ' controls preload="auto" width="640" height="360" ' +
                   ' data-setup=\'{ "techOrder": ["youtube"], "src": "http://www.youtube.com/watch?v=xjS6SftYQaQ" }\'>' +
                   '</video>'
                   );

            }
        });

As you can see, I dont even use the ajax call back value for now.

However, if the video is displayed BEFORE the ajax call, it works.

$("#videoPlayer").html(
                       '<video id="Video1" src="" class="video-js vjs-default-skin" ' +
                       ' controls preload="auto" width="640" height="360" ' +
                       ' data-setup=\'{ "techOrder": ["youtube"], "src": "http://www.youtube.com/watch?v=xjS6SftYQaQ" }\'>' +
                       '</video>'
                       );
            $.ajax({
                type: "POST",
                url: "Videos.aspx/GetBlocs",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {
                    .....

                }
            });

Edit: I am also using video-js and youtube video-js plugins.

4

2 回答 2

1

固定的。找到它，你知道他们称之为……官方文档吗？是的。那个东西。

因此，基本上当您在 ajax 调用后动态插入视频时，您必须删除数据设置并使用 videojs 添加它

$("#videoPlayer").html('<video id="Video1" src="" class="video-js vjs-default-skin"  ' + // preload="auto"
                                   ' controls width="640" height="360"></video>');

            videojs("Video1", { "techOrder": ["youtube"], "src": "http://www.youtube.com/watch?v=" + youtubeVideoID + "&vq=hd720" }, function () {

                var v = this;
                v.on("progress", function () { ... }); 
           });
于 2013-10-10T19:01:27.297 回答
0

您是否尝试过在success()回调中显式运行 videojs？

success: function (data) {

   // Load the HTML here

   // Initialise the video
   videojs("Video1", {}, function(){
       // Player (this) is initialized and ready.
   });
}
于 2013-10-08T21:28:47.597 回答