javascript Video.js-loadeddata 事件永远不会触发
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/16195331/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Video.js - loadeddata event never fires
提问by RossGK
I am integrating Video.js into a project and having a few issues.
我正在将 Video.js 集成到一个项目中,但遇到了一些问题。
I have it in my HTML as:
我在我的 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>
And in my javascript I load a source and manage to play it.
在我的 javascript 中,我加载了一个源代码并设法播放它。
var vidPlayer = _V_("vidView");
vidPlayer.src({ type: "video/mp4", src: vidlink });
vidPlayer.play();
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.
仅以编程方式执行此操作会出现问题 - 源和播放的每一秒加载都会起作用。我想象我在 video.js 准备好之前尝试播放,所以试图使用监听器在适当的时间启动播放。
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.
我发现某些事件根本不会触发。我无法从“loadedalldata”事件或“loadeddata”中获得任何信息。“loadstart”事件至少会触发,所以我把我的 .play() 命令放在那里。
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.
但它仍然不可靠。我在控制台上看到“正在尝试恢复!”的消息。几次。它可以播放一些视频,但有时会陷入困境。
Am I missing something in getting "loadeddata" event to happen?
我是否错过了让“loadeddata”事件发生的事情?
Also, related Q - I notice that the docs say the syntax for removing an Event listener is:
另外,相关的 Q - 我注意到文档说删除事件侦听器的语法是:
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 documentationor if that's correct syntax.
是对的吗?似乎“myFunc”部分是多余的,我想知道这是文档中的复制/粘贴错误 还是语法正确。
Thx in advance.
提前谢谢。
回答by Lachlan McD.
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.
我怀疑你遇到了和我一样的问题。如果您的浏览器正在使用 HTML5 视频(而不是 Flash 回退) 某些事件,例如loadedmetadata
和loadeddata
,可能会在 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).
如果您正在执行一些预加载,则尤其如此,并且在视频开始加载和初始化 Video.js 之间存在延迟。它似乎也发生在有缓存副本时,这就是为什么它在每秒刷新一次(使缓存无效)时起作用。
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>
文档底部而不是底部。如果这不理想(这不适合我们),我们向 中添加了一个事件侦听器<head>
,然后在初始化播放器后检查它。例如
In <head>
:
在<head>
:
<script>
var loadedmetadata = false;
if (window.addEventListener) {
window.addEventListener('loadedmetadata', function(ev) {
loadedmetadata = true;
}, true);
}
</script>
And then later in your 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
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.
window.addEventListener
IE7/8 不支持,但没关系,因为它们无论如何都不支持 HTML5 视频,所以它永远不会触发。IE9 支持window.addEventListener
和 HTML5 视频,所以它会按预期工作。
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.
我们还检查了techName
is html5
,因为 Flash 播放器是在我们初始化 Video.js 对象时创建的,所以之前不应触发该事件。
回答by misterben
loadeddata
won't necessarily fire before playback starts. In Flash it never does, with HTML5 the event is relayed from the video element so it depends on the browser behaviour.
loadeddata
在播放开始之前不一定会触发。在 Flash 中它从来没有,在 HTML5 中,事件是从视频元素中继的,因此它取决于浏览器的行为。
loadedalldata
is when the entire video is downloaded, so is unlikely to occur before playback starts.
loadedalldata
是在下载整个视频时,因此不太可能在播放开始之前发生。
You specify which function to remove from the event because you could have bound more than one function to the event, e.g.
您指定要从事件中删除哪个函数,因为您可以将多个函数绑定到事件,例如
vidPlayer.addEvent("play", onPlay1 );
vidPlayer.addEvent("play", onPlay2 );
vidPlayer.removeEvent("play", onPlay1 ); // onPlay2() would still be executed