加载数据事件永远不会触发

Video.js - loadeddata event never fires

本文关键字:永远 数据 事件 加载      更新时间:2023-09-26

我正在将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准备好之前尝试播放,所以试图使用侦听器在适当的时间启动播放。

我发现某些事件根本不会触发。我不能从"加载数据"事件或"加载数据"得到任何东西。"loadstart"事件至少会触发,所以我把。play()命令放在那里。

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

但它仍然不可靠。我好几次在控制台上看到"尝试恢复!"的消息。它可以播放几个视频,但有时会陷入困境。

我错过了什么在得到"加载数据"事件发生?

还有,相关的Q -我注意到文档中说删除事件侦听器的语法是:

myPlayer。removeEvent("eventName myFunc);

对吗?似乎"myFunc"部分是多余的,我想知道这是否是文档中的复制/粘贴错误,或者这是正确的语法。

我怀疑你遇到了和我一样的问题。如果你的浏览器使用HTML5视频(而不是Flash回退),一些事件,如loadedmetadataloadeddata,可能会在video .js绑定事件监听器之前触发。

如果你正在做一些预加载,并且在视频开始加载和初始化video .js之间存在延迟,则尤其如此。当存在缓存副本时,似乎也会发生这种情况,这就是为什么它每隔一秒刷新一次(使缓存无效)。

解决方案是把你的视频初始化的东西在<head>而不是在文档的底部。如果这不是理想的(它不适合我们),我们添加一个事件监听器到<head>,然后在我们初始化播放器后检查它。例如

In <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对象时创建的,所以事件之前不应该触发。

loadeddata不一定会在播放开始前触发。在Flash中则不会,而在HTML5中,事件会从视频元素传递过来,所以这取决于浏览器的行为。

loadedalldata是整个视频下载的时候,所以不太可能在播放开始之前发生。

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

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