Question

我在使用videojs时遇到问题：将eventlistener附加到“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。

当我在我的网站上发布它时，它永远不会有效。我错过了什么？谢谢你的阅读！

Answer 1

当你使用video.js时，你需要使用它的API，例如

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

更好的是，删除data-setup属性并通过调用if videojs()创建播放器以及在播放器准备就绪后立即执行的回调函数：

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

Answer 2

正如misterben所说，使用.on方法。但是把它放在ready回调中，否则它将不起作用：

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

消息来源：我自己就是这么想的。我知道misterben已经提到过使用ready回调，但你可能不知道你需要来使用它。

Video.js - loadedmetadata事件永远不会触发

2 个答案: