vimeo视频结束时加载下一页

Question

I would like to use a vimeo video as a intro for a website. Is there a way to load a new page after a embedded vimeo video is finished?

I tried something with jQuery but it is not really working.

<div id="vimeo">
    <iframe src="//player.vimeo.com/video/89470441?title=0&amp;byline=0&amp;portrait=0&amp;color=ea5045&amp;autoplay=1" width="960" height="540" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>

<script>
$("#vimeo").on("ended", function() {
    window.location.href = 'home.html';
});
</script>

Does someone have an idea how I could fix the problem?

Answer 1

Try this

<script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>

<div id="vimeo">
    <iframe src="//player.vimeo.com/video/89470441?title=0&amp;byline=0&amp;portrait=0&amp;color=ea5045&amp;autoplay=1" width="960" height="540" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>

<script>
var iframe = $('#vimeo iframe')[0],
    player = $f(iframe);

// When the player is ready, add listeners for pause, finish, and playProgress
player.addEvent('ready', function() {
    player.addEvent('finish', onFinish);
});

function onFinish(id) {
   window.location.href = 'home.html';
}
</script>

Ref: http://developer.vimeo.com/player/js-api

Answer 2

Try taking a look at the Vimeo Javascript API: http://developer.vimeo.com/player/js-api

There is a simple JavaScript example given. If you use Froogaloop, you can place your window.location.href inside onFinish, where you see status.text(data.seconds + 's played'); .

Answer 3

From the simple API you can grab the movie duration in seconds along with other useful things.

http://developer.vimeo.com/apis/simple#video-response

From this video request URL you can post to your grab your consumables listed in the above link.

http://developer.vimeo.com/apis/simple#video-request-url

In any case, you can find and construct enough to get you a jquery or js countdown to redirect.

Good luck!