Video.js - loadeddata事件永远不会触发

时间:2013-04-24 14:58:53

标签: javascript video video.js

我正在将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”事件发生的事情吗?

此外,相关问题 - 我注意到文档说删除事件监听器的语法是:

myPlayer.removeEvent(“eventName”,myFunc);

是吗?似乎“myFunc”部分是多余的,我想知道这是the documentation中的复制/粘贴错误还是正确的语法。

提前谢谢。

2 个答案:

答案 0 :(得分:11)

我怀疑你遇到了同样的问题。如果您的浏览器使用HTML5视频(而不是Flash后备),则某些事件(如loadedmetadataloadeddata)可能会在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
]
IE7 / 8不支持

window.addEventListener,但没关系,因为它们无论如何都不支持HTML5视频,因此它不会激发。 IE9支持window.addEventListener和HTML5视频,因此它可以按预期工作。

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

答案 1 :(得分:1)

播放开始前,

loadeddata不一定会触发。在Flash中它永远不会,使用HTML5,事件从视频元素中继,因此它取决于浏览器行为。

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

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

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