Video.js-加载数据事件从不触发 [英] Video.js - loadeddata event never fires
问题描述
我正在将Video.js集成到项目中，并且遇到一些问题.
I am integrating Video.js into a project and having a few issues.
我在HTML中将其保存为:
I have it in my HTML as:
<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中，我加载了一个源并设法播放它.
And in my javascript I load a source and manage to play it.
var vidPlayer = _V_("vidView");
vidPlayer.src({ type: "video/mp4", src: vidlink });
vidPlayer.play();
只有以编程方式执行此操作才有问题-源和播放的每一秒负载都可以工作.我以为我想在video.js尚未准备好之前就开始播放，因此寻求在适当的时候使用侦听器启动播放.
Only doing this programmatically was having issues - every second load of a source and play would work. I imagined I was trying to play before video.js was ready, so sought to use listeners to launch play at the proper time.
我发现某些事件根本不会触发.我无法从"loadedalldata"事件或"loadeddata"事件中获取任何信息.至少会触发"loadstart"事件，因此我在其中放置了.play()命令.
I have found that certain events never fire at all. I can't get anything from "loadedalldata" event or "loadeddata". The "loadstart" event fires at least, so I put my .play() command in there.
vidPlayer.addEvent("loadstart", function(){ console.log("LOAD START Fired" );
var myPlayer = this;
myPlayer.play();
} );
但是它仍然不可靠.我在控制台上看到正在尝试恢复！"消息.几次.它会播放一些视频，但有时会停滞不前.
But it's still not reliable. I see messages on my console of "Trying to resume!" several times. It plays for a few videos, but gets bogged down sometimes.
我是否在发生"loadeddata"事件时错过了某些东西?
Am I missing something in getting "loadeddata" event to happen?
另外，相关的问题-我注意到文档说删除事件侦听器的语法是:
Also, related Q - I notice that the docs say the syntax for removing an Event listener is:
myPlayer.removeEvent("eventName"，myFunc);
myPlayer.removeEvent("eventName", myFunc);
Is that right? It seems like the "myFunc" part is redundant, and I'm wondering if that is a copy/paste error in the documentation or if that's correct syntax.
提前谢谢.
推荐答案
我怀疑您遇到了与我相同的问题.如果您的浏览器使用的是HTML5视频(而不是Flash后备)，则在Video.js绑定事件监听器之前，可能会触发某些事件，例如 loadedmetadata 和 loadeddata .
I suspect you ran into the same issue I did. If your browser is using the HTML5 video (instead of Flash fallback) Some events, like loadedmetadata and loadeddata, may fire before Video.js binds the event listeners.
如果要进行一些预加载，并且在开始加载视频和初始化Video.js之间存在延迟，则尤其如此.似乎有缓存副本时也会发生这种情况，这就是为什么它每秒刷新一次(使缓存无效)的原因.
This is particularly true if you are doing some preloading, and there is a delay between when the video start to load and when you initialising Video.js. It also seems to occur when there is a cached copy, which is why it works on every second refresh (invalidating the cache).
解决方案是将视频初始化内容放在< head> 中，而不是放在文档底部.如果那不是理想的选择(不是我们想要的)，则将事件监听器添加到< head> 中，然后在初始化播放器后进行检查.例如
The solution is to just throw your video initlisation stuff in the <head> instead of at the bottom of the document. If that is not ideal (which it wasn't for us), we added an event listener to the <head> and then checked for it after we initialised the player. For example
在< 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视频，因此可以正常工作.
window.addEventListener is not supported in IE7/8, but thats okay, because they don't support HTML5 video anyway, so it won't ever fire. IE9 supports window.addEventListener and HTML5 video, so it will work as expected.
我们还检查 techName 是否为 html5 ，因为Flash Player是在初始化Video.js对象时创建的，因此该事件以前不应该触发
We also check that the techName is html5, since the Flash player is created when we initialise the Video.js object, so the event shouldn't have fired previously.
这篇关于Video.js-加载数据事件从不触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
