回调函数不适合HTML5视频播放器

Callback function is not working for HTML5 Video player

本文关键字：视频 播放器 HTML5 不适合 函数 回调      更新时间：2023-09-26

我正在创建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>

我的问题是我怎么知道视频完成了?为此，我写了代码，但它不工作。你能帮我吗?

提前致谢

Video.js，如果你使用的是"技术"而不是"html5"，将会替换你的<video>元素。"技术"可以是Flash或一些插件，就像你的情况一样，就是YouTube。这里发生的是你将回调附加到video元素然后，当video。js替换那个元素时，它无法知道你已经附加了回调，所以你的回调丢失了。

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

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

2)等一会儿。这样的:

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

第二个例子可能取决于你如何/在哪里加载video.js脚本。所以，如果这不起作用，试试选项1

jQuery中的"bind"函数已弃用。请使用。on函数。

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

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

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>

相关文章：