Question

我想进行ajax调用，然后显示html 5视频。

以下代码不起作用。

 $.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>'
                   );

            }
        });

如您所见，我现在甚至不使用ajax回调值。

但是，如果在ajax调用之前显示视频，则可以正常显示。

$("#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) {
                    .....

                }
            });

编辑：我也在使用video-js和youtube video-js插件。

Answer 1

固定。发现它，你知道他们称之为...... the official doc？是的。那件事。

所以基本上当你在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 () { ... }); 
           });

Answer 2

您是否尝试在success()回调中明确运行videojs？

success: function (data) {

   // Load the HTML here

   // Initialise the video
   videojs("Video1", {}, function(){
       // Player (this) is initialized and ready.
   });
}

ajax调用后，Html 5视频无法正常工作

2 个答案: