javascript - 回调函数不适用于 HTML5 视频播放器

Question

我正在创建 HTML 视频播放器。这样我就使用了“http://www.videojs.com/”插件。在下面的代码中，播放器创建成功。

 <video id="example_video_1" src="" class="video-js vjs-default-skin" controls preload="auto" width="640" height="360" data-setup='{ "techOrder": ["youtube"], "src": "http://www.youtube.com/watch?v=xjS6SftYQaQ" }'>
 </video>

<script type="text/javascript">
    $("#example_video_1").bind("ended", function() {
        alert("I'm done! Here is the Callback");
    });
</script>

我的问题是我怎么知道视频已经完成？为此，我已经编写了代码，但它不起作用。你能帮我吗？

提前致谢

Answer 1

Video.js，将取代您的<video>如果您使用“html5”以外的“tech”元素。 “技术”可以是 Flash 或某些插件，就像您的情况一样，即 YouTube。因此，这里发生的情况是，您将回调附加到视频元素，然后，当 Video.js 替换该元素时，它无法知道您已附加回调，因此您的回调会丢失。

相反，您需要将回调附加到 Video.js 对象。但您需要小心，因为直到 Video.js 有机会扫描您的视频元素之后该对象才存在，而在您的脚本执行时这还没有发生。所以有几个选择。

1) 直接在 Javascript 中创建 Video.js 对象，如 the example 所示.

2) 稍等片刻。像这样:

$(function () {
    videojs('example_video_1').on('ended', function () {
        //todo: that voodoo that you do so well
    });
});

第二个示例可能具体取决于您加载 video.js 脚本的方式/位置。因此，如果这不起作用，请尝试选项 1。