ajax - 带有 Video.js 和 AJAX 的 HTML5 视频

Question

我有一个 <div>包含 <video>元素，和一个 <ul> .单击 <ul> 中的一个元素导致 AJAX 调用更新 <div> 的内容.在我的第一次尝试中，第一个视频会正确加载，但随后单击不同的链接只会加载海报，而不会加载控件。经过一些谷歌搜索后，我找到了解决方案，它给我留下了以下 AJAX 调用:

$.ajax({
    // each video has its own unique ID
    url: "/Video?id=' + id,
    success: function (data) {
        $('#containing_div').html(data);
        // necessary to re-load video player controls
        _V_('video_' + id, { "controls": true, "autoplay": false, "preload": "auto" });
    }
});

将初始化调用添加到 _V_似乎有点帮助:现在当我切换视频时，“播放”控件按预期出现，我可以播放视频。但是，一旦我这样做，当我切换到另一个视频时，控件现在又消失了。此外，还有奇怪的随机错误:如果我多次更改视频，控件会突然莫名其妙地消失。此外，偶尔，在我切换到新视频后的一秒钟内，视频海报会完全消失。

显然，在页面加载时 Video.js 中发生了一些“魔法”，它不是由 AJAX 调用触发的，但我一直无法弄清楚那是什么。 <video> 没问题标签，因为最初它们都在页面中，并且通过改变它们的不透明度来隐藏/显示它们，并且效果很好(我想移动到 AJAX 的原因是当所有视频都加载时页面大小很大在线)。

Answer 1

事实证明，解决方案是在传出视频上调用 .destroy()(一个未记录的 API 函数):

if( currentVideoId ) {
  _V('video_' + currentVideoId).destroy();
}
$.ajax({
  // each video has its own unique ID
  url: "/Video?id=' + id,
  success: function (data) {
    $('#containing_div').html(data);
    // necessary to re-load video player controls
    _V_('video_' + id, { "controls": true, "autoplay": false, "preload": "auto" });
    currentVideoId = id;
  }
});