Video.js - 加载数据事件永远不会触发答案

【问题标题】：Video.js - loadeddata event never firesVideo.js - 加载数据事件永远不会触发
【发布时间】：2013-04-24 14:58:52
【问题描述】：

我正在将 Video.js 集成到一个项目中，但遇到了一些问题。

我在我的 HTML 中有它：

<video id="vidView" class="video-js vjs-default-skin" width="320" height="320" 
   poster="/siteImages/Dummy.png" preload="auto">
   <source type="video/mp4" src="" \>
</video>

在我的 javascript 中，我加载了一个源并设法播放它。

var vidPlayer = _V_("vidView");
vidPlayer.src({ type: "video/mp4", src: vidlink });

vidPlayer.play();

只有以编程方式执行此操作才会出现问题 - 每隔一秒加载一次源和播放都会起作用。我想我是在 video.js 准备好之前尝试播放，所以试图在适当的时间使用监听器来启动播放。

我发现某些事件根本不会触发。我无法从“loadedalldata”事件或“loadeddata”中得到任何东西。至少会触发“loadstart”事件，所以我将 .play() 命令放在那里。

vidPlayer.addEvent("loadstart", function(){ console.log("LOAD START Fired" );
  var myPlayer = this;
  myPlayer.play(); 
} );

但它仍然不可靠。我在控制台上看到“正在尝试恢复！”的消息。几次。它播放一些视频，但有时会陷入困境。

在发生“loadeddata”事件时我是否遗漏了什么？

另外，相关的 Q - 我注意到文档说删除事件侦听器的语法是：

myPlayer.removeEvent("eventName", myFunc);

对吗？似乎“myFunc”部分是多余的，我想知道这是否是the documentation 中的复制/粘贴错误，或者这是否是正确的语法。

提前致谢。

【问题讨论】：

您的poster URL（' %}）存在语法错误，也可能与此有关。

标签： javascript video video.js

【解决方案1】：

我怀疑你遇到了和我一样的问题。如果您的浏览器使用的是 HTML5 视频（而不是 Flash 后备），则某些事件（例如 loadedmetadata 和 loadeddata）可能会在 Video.js 绑定事件侦听器之前触发。

如果您正在执行一些预加载，则尤其如此，并且在视频开始加载和初始化 Video.js 之间存在延迟。当有缓存副本时似乎也会发生这种情况，这就是为什么它在每次刷新时都起作用（使缓存无效）。

解决方案是将您的视频初始化内容放在<head> 而不是文档底部。如果这不理想（不适合我们），我们向<head> 添加了一个事件监听器，然后在初始化播放器后检查它。例如

在<head>:

<script>
var loadedmetadata = false;
if (window.addEventListener) {
    window.addEventListener('loadedmetadata', function(ev) {
            loadedmetadata = true;
    }, true);
}
</script>

然后在你的脚本中：

if (loadedmetadata === true && videoPlayer.techName === 'html5') {
    // call the callback you would have attached to
    // the event listener.
} else {
    // add event listener here
]

window.addEventListener 在 IE7/8 中不受支持，但没关系，因为它们不支持 HTML5 视频，所以它永远不会触发。 IE9 支持window.addEventListener 和 HTML5 视频，因此可以正常工作。

我们还检查了techName 是否为html5，因为 Flash 播放器是在我们初始化 Video.js 对象时创建的，因此之前不应触发该事件。

【讨论】：

感谢提示：我仍然在摸索。听起来很有帮助。

【解决方案2】：

loadeddata 不一定会在播放开始前触发。在 Flash 中它永远不会这样做，在 HTML5 中，事件是从视频元素中继的，因此它取决于浏览器的行为。

loadedalldata 是下载整个视频的时间，因此不太可能在播放开始之前发生。

您指定要从事件中删除的函数，因为您可以将多个函数绑定到事件，例如

vidPlayer.addEvent("play", onPlay1 );
vidPlayer.addEvent("play", onPlay2 );
vidPlayer.removeEvent("play", onPlay1 ); // onPlay2() would still be executed

【讨论】：

啊——这很有道理。谢谢澄清。