How to trigger an event when video ends inside an iframe using jQuery?

问题

I am looking to trigger an event when video finishes playing, here is the following iframe I am using:

<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>

回答1:

Check this JsFiddle, demonstrating Vimeo video embedding example with alert on video play and completed

<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

回答2:

In case you really need to use iframe:

Create a seprate page say video.html, accept required video playing parameters using URL query string parameters and finally draw playing using video service API. Example of using YouTube API

Now use iframe to open video.html as source and pass required parameters to show video player.

回答3:

I read in your comment to another answer that the included video is from Vimeo. In that case you can use the Vimeo JavaScript API: https://github.com/vimeo/player.js

Then you can do something like:

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
});

来源：https://stackoverflow.com/questions/44826554/how-to-trigger-an-event-when-video-ends-inside-an-iframe-using-jquery

标签

jquery

iframe