Question

我希望在视频播放完毕时触发一个事件，这是我正在使用的以下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>

Answer 1

我在您的评论中读到另一个答案，其中包含的视频来自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
});

Answer 2

如果您确实需要使用 iframe ：

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

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

Answer 3

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

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

3 个答案: