加载数据事件永远不会触发
Video.js - loadeddata event never fires
我正在将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回退),一些事件,如loadedmetadata
和loadeddata
,可能会在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
- 用程序搜索JQuery数据表中的文本
- 要求输入在数据列表中
- 正在将数据主题添加到所有项目
- 函数参数中的数据与指定变量之间的任何性能差异
- 在VanillaJS中模拟模型双向数据绑定
- CSS-如何定位内容数据标题
- 使用电话间隙在Android应用程序中显示SQL Lite的数据
- 无法在数据endVal中设置值=“”;{{ucount}}”;使用Angular JS的CountUp
- 序列化数据属性中对象的最可靠方法
- 如何将JSON数据导入我的ejs模板
- 不显示带有本地json文件数据的谷歌地图脚本
- 如何将json数据显示为html
- 画布数据到图像
- 使用jquery将mysql数据获取到新的表行中
- 使用html中的外部javascript进行数据验证
- 有时数据是't显示在浏览器中
- 动态弹出窗口'通过调用一个永远运行并返回's每个周期后的数据
- 加载数据事件永远不会触发
- Excel任务窗格绑定数据更改事件永远不会结束
- 从UpdatePanel /调用c# getter永远不会得到更新的数据