ajax调用后HTML 5视频不起作用答案

【问题标题】：Html 5 video not working after ajax callajax调用后HTML 5视频不起作用
【发布时间】：2013-10-08 20:35:46
【问题描述】：

我想进行 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 插件。

【问题讨论】：

怎么知道ajax调用是否成功？
成功了。我在那里删除了代码以简化代码 sn-p。实际上，视频播放器有点显示，但一直全黑，从不加载。
在有效的代码中，您是在创建视频元素之前还是之后加载 video.js 脚本？

标签： jquery ajax html html5-video

【解决方案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 () { ... }); 
           });

【讨论】：

【解决方案2】：

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

success: function (data) {

   // Load the HTML here

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

【讨论】：

它在我的黑色矩形中添加了一个等待圆圈和一个播放按钮。当我检查它时，我可以看到它已被呈现为平面 html。它不会被执行并转换为 iframe。