Question

我正在创建HTML视频播放器。所以我使用了＆＃34; http://www.videojs.com/＆＃34;插入。在下面的代码中，成功创建了播放器。

 <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

如果你使用“html5”以外的“技术”，

Video.js会替换你的<video>元素。 “技术”可以是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.

Answer 2

＆＃34; bind＆＃34;不推荐使用jQuery中的函数。请改用.on function。

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

上述解决方案适用于所有本地嵌入的视频。由于下面评论中提到的提问者使用了youtube embed，我将发布一个嵌入式视频解决方案。

Youtube为其视频提供了javascript API。

onStateChange方法提供了您正在寻找的功能：

<script>
    var video = document.getElementById('example_video_1');
    video.addEventListener("onStateChange", function(state){
        if(state === 0){
            alert("I'm done here!");
        }
    }); 
</script>

请参阅this问题。

回调功能不适用于HTML5视频播放器

2 个答案: