HTML5 Video with Video.js和AJAX

我有一个<div>包含一个<video>元素和一个<ul>。点击<ul>中的元素将导致AJAX调用更新<div>的内容。在我第一次尝试时，第一个视频会正确加载，但点击不同的链接只会加载海报，而不是控件。一些谷歌搜索后，我找到了解决的是，这让我用下面的AJAX调用：HTML5 Video with Video.js和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的原因是页面大小很大当所有视频都在线加载时）。

来源

2012-03-09 Ethan Brown

原来的解决方案是呼吁传出视频.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; 
    } 
});

来源

2012-03-13 20:03:27

HTML5 Video with Video.js和AJAX

回答

相关问题