带有 Video.js 和 AJAX 的 HTML5 视频

Posted 2023-05-08

【中文标题】带有 Video.js 和 AJAX 的 HTML5 视频

【英文标题】：HTML5 Video with Video.js and AJAX

【发布时间】：2012-03-27 09:13:27

【问题描述】：

我有一个 <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 的原因是页面大小当所有视频都在线加载时会很大）。

【参考方案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;
  
);