HTML5视频与Video.js和AJAX

问题描述

我有一个＆LT; D​​IV＆GT; 包含＆LT;视频＆GT; 元素和＆LT; UL＆GT; 。点击在℃的元素; UL＆GT; 使一个AJAX调用更新的内容＆LT; D​​IV＆GT; 。在我第一次尝试，第一视频将正确加载，但随后点击不同的链接只会加载的海报，而不是控制。一些谷歌搜索后，我找到了解决的，这让我用下面的AJAX调用：

I have a <div> containing a <video> element, and a <ul>. Clicking on an element in the <ul> causes an AJAX call to update the contents of the <div>. On my first attempt, the first video would load correctly, but then clicking on a different link would only load the poster, but not the controls. After some Googling, I found the solution to that, which leaves me with the following AJAX call:

$.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 _ 似乎无济于事有点：现在，当我切换视频，在玩如预期的控制出现的，我可以播放视频。但是，一旦我做的，当我切换到一个不同的视频，该控件现在又没有了。此外，还有一些奇怪的随机误差：如果我改变视频了几下，突然彻底消失没有明显的原因。此外，偶尔，一秒钟之后我切换到新的视频，视频海报完全消失。

Adding the initialization call to _V_ seemed to help matters somewhat: now when I switch videos, the "play" control appears as expected, and I can play a video. However, once I do, when I switch to a different video, the controls are now gone again. Furthermore, there are weird random errors: if I change videos a few times, suddenly the controls disappear for no apparent reason. Also, occasionally, a second after I switch to a new video, the video poster disappears completely.

显然，一些神奇发生在Video.js上未通过AJAX调用触发页面加载，但我一直没能弄清楚那是什么。有没有错＆LT;视频＆GT; 标签，因为一开始他们都在网上的网页，他们被隐藏/通过改变其不透明度显示，那工作细（我想移动到AJAX的原因是页面大小是巨大的，当所有的视频​​在网上被加载）。

Clearly, some "magic" happens in Video.js on page load that is not being triggered by the AJAX call, but I haven't been able to figure out what that is. There's nothing wrong with the <video> tags because initially they were all in-line in the page, and they were being hidden/shown by changing their opacity, and that worked fine (the reason I want to move to AJAX is the page size is huge when all the videos are loaded in-line).

推荐答案

原来的解决方案是调用.destroy（）（一个未公开的API函数）上输出视频：

It turns out the solution was to call .destroy() (an undocumented API function) on the outgoing video:

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;
  }
});

这篇关于HTML5视频与Video.js和AJAX的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！