回调函数不适用于 HTML5 视频播放器答案

【问题标题】：Callback function is not working for HTML5 Video player回调函数不适用于 HTML5 视频播放器
【发布时间】：2014-09-24 11:32:02
【问题描述】：

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

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

提前谢谢

【问题讨论】：

在 videojs 的文档中我发现了这个：github.com/videojs/video.js/blob/stable/docs/api/… 也许这就是你要找的东西？不确定这是否是响应速度最快的解决方案，但您可以在该函数上添加回调。另外，你的 videojs 对象在哪里？
嘿，您的视频标签的 ID 是“vid1”，而在 javascript 中您使用的是 $("#example_video_1")。那可能是你的问题。
hii Vira 。不，不是因为那个。我检查了

标签： javascript html plugins html5-video

【解决方案1】：

不推荐使用 jQuery 中的“绑定”功能。请改用.on function。

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

上述解决方案应该适用于本地嵌入的所有视频。由于下面 cmets 中提到的提问者使用的是 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>

请参阅this 问题。

【讨论】：

反对者愿意解释吗？这段代码对我来说很好。
嗨 madhippie 它不适合我。实际上，我有 youtube 视频而不是其他视频。
我为 youtube API 添加了一个解决方案。

【解决方案2】：

如果您使用“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。

【讨论】：