Video.js - 加载元数据事件永远不会触发答案

【问题标题】：Video.js - loadedmetadata event never firesVideo.js - 加载元数据事件永远不会触发
【发布时间】：2015-04-25 06:09:45
【问题描述】：

我在使用 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。

当我在我的网站上发布它时，它永远不会起作用。我错过了什么？感谢您的阅读！

【问题讨论】：

标签： html5-video addeventlistener video.js

【解决方案1】：

正如 misterben 所说，使用.on 方法。但是放到ready回调里面还是不行：

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

来源：我自己刚刚想通了。我知道 misterben 提到过使用 ready 回调，但您可能不知道您需要使用它。

【讨论】：

我在按钮单击$('.content-preview').append('<script type="text/javascript"> var player = videojs(' +'video'+'); player.ready(function () { this.on('+'loadedmetadata'+', function () { player.currentTime(10); }) });<' + '/script>'); 上使用了以下代码。但它从头开始渲染视频。 loadedmetadata is not defined 这是我在控制台中收到错误

【解决方案2】：

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

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

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

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

【讨论】：