Video.js - loadedmetadata事件从未触发

Question

Video.js - loadedmetadata事件从未触发

3

我在使用videojs时遇到了问题：当将事件监听器附加到“loadedmetadata”事件时，回调函数从未执行。

我找到的最好的解释似乎是有些事件可能会在Video.js绑定事件监听器之前触发：Video.js - loadeddata event never fires。

不幸的是，这篇文章中提出的解决方案似乎对我不起作用。

<!DOCTYPE html>
<html>
<head>
<title>test</title>
<link href="http://vjs.zencdn.net/4.12/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.12/video.js"></script>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script type="text/javascript">
        function init() {
            var video = document.getElementById('myVideo');
            video.addEventListener("loadedmetadata", function () {
                alert("test");
            });
        }
        window.addEventListener("load", init);
    </script>
</head>
<body>
    <video id='myVideo' class="video-js vjs-default-skin" controls data-setup='{}'>
        <source id='mp4' src="http://goo.gl/fAHXgj" type='video/mp4'>
        <source id='webm' src="http://goo.gl/03LOHW" type='video/webm'>
    </video>
</body>
</html>

当我从Visual Studio（2013）启动它时，上面的代码只会在IE（11）中产生一个警报弹窗；它在Firefox和Chrome中不起作用。

当我将它发布到我的网站上时，它从来没有起作用。我错过了什么？谢谢你的阅读！

- Mattia

2个回答

2

由于您正在使用video.js，因此需要使用其API，例如：

videojs('myVideo').on('event',function);

更好的方式是删除data-setup属性，并通过调用videojs()创建播放器，同时使用回调函数在播放器准备就绪时执行：

videojs('myVideo', {}, function(){
  this.on('loadedmetadata', function(){
    alert('lmd');
  });
});

- misterben

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Aaria Carter-Weir · Accepted Answer

如misterben所说，请使用.on方法。但是要将其放在ready回调函数中，否则它将无效:

var player = videojs('myVideo');
player.ready(function(){
    this.on('loadedmetadata', function(){ alert('lmd'); })
});

来源：我自己刚刚弄明白这个。我知道misterben提到了使用准备好回调，但你可能不知道你需要使用它。