当视频在使用 jQuery 的 iframe 内结束时如何触发事件？答案

【问题标题】：How to trigger an event when video ends inside an iframe using jQuery?当视频在使用 jQuery 的 iframe 内结束时如何触发事件？
【发布时间】：2017-12-03 05:43:53
【问题描述】：

我希望在视频播放完毕后触发一个事件，这是我正在使用的以下 iframe：

<div class="item">
    <div class="home-content-slider">
        <div class="home-content-inner">
            <iframe id="vid1" src="<%= post %>" width="" height="" frameborder="0" allowfullscreen></iframe>
        </div>
    </div>
</div>

【问题讨论】：

您是否尝试联系他们的开发团队？
您应该检查视频服务提供商是否有回调。
与其将问题编辑成一个全新的问题，不如只提出一个新问题。此编辑仅使上述 cmets 无效，因此我将保留它 - 如果答案已无效，我将回滚更改。

标签： jquery iframe

【解决方案1】：

Check this JsFiddle，演示 Vimeo 视频嵌入示例，并在视频播放时发出警报并完成

<iframe src="https://player.vimeo.com/video/66966424" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

<script src="https://player.vimeo.com/api/player.js"></script>
<script>

    var iframe = document.querySelector('iframe');
    var player = new Vimeo.Player(iframe);

    player.on('play', function() {
        alert('You have played the video')
    });
        player.on('ended', function(){
        alert('Video play completed');
    });

    player.getVideoTitle().then(function(title) {
        console.log('title:', title);
    });
</script>

Vimeo API Reference

【讨论】：

我不知道为什么人们对此投了反对票，如果您认为这个问题有用，请投票并感谢您的帮助:)
@Insomania 我认为您的问题可能因为缺乏信息而被否决。例如，它是 Vimeo 视频这一事实是应该包含在问题中的重要信息。 PS：我给你的答案和你一小时前接受的答案一样；）
同意@vi5ion 反对。您应该以适当的方式提出问题并提供详细信息。

【解决方案2】：

如果你真的需要使用iframe：

创建一个单独的页面，例如 video.html，使用 URL 查询字符串参数接受所需的视频播放参数，最后使用视频服务 API 绘制播放。 Example of using YouTube API

现在使用 iframe 打开 video.html 作为源并传递所需参数以显示视频播放器。

【讨论】：

就我而言，视频不是 Youtube 视频，而是 vimeo

【解决方案3】：

我在您对另一个答案的评论中读到包含的视频来自 Vimeo。在这种情况下，您可以使用 Vimeo JavaScript API：https://github.com/vimeo/player.js

然后你可以这样做：

var player = new Vimeo.Player('vid1');

player.getEnded().then(function(ended) {
  // ended = whether or not the video has ended
}).catch(function(error) {
  // an error occurred
});

【讨论】：

也感谢你@vi5ion，我非常感谢你的努力和分享这些有用的信息:)