javascript - 全屏 vimeo 视频播放后如何重定向 URL？

Question

我阅读了这个主题，但似乎仍然没有得到解答。

我有一个全屏 vimeo 视频。我希望页面播放完毕后重定向到外部网站(例如 google.com)。我怎样才能做到这一点？任何帮助表示赞赏。下面是 JSFiddle 和代码:'

HTML
<script 
src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js">
</script>
<script 
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>

<!-- Youtube or Vimeo Embed code here - add 'fullvid' class -->
<iframe class="fullvid" id="vim" width="1280" height="720" 
src="https://player.vimeo.com/video/213039819?
api=1&autoplay=1&loop=0&badge=0title=0&byline=0&portrait=0&background=0" 
frameborder="0" allowfullscreen></iframe>

CSS
<style type="text/css">
.vidcover {
background: #000;
opacity: 0.4;
display: block;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: -1;
-webkit-transition: opacity 800ms ease 0.2s;
-moz-transition: opacity 800ms ease 0.2s;
-ms-transition: opacity 800ms ease 0.2s;
transition: opacity 800ms ease 0.2s;
}
.fullvid {
width: 1280px;
height: 720px;
position: fixed;
bottom: 50%;
left: 50%;
z-index: -2;
-webkit-transform: translate(-50%, 50%);
-moz-transform: translate(-50%, 50%);
-ms-transform: translate(-50%, 50%);
transform: translate(-50%, 50%);
-webkit-transition: all 400ms ease-out 400ms;
-moz-transition: all 400ms ease-out 400ms;
-ms-transition: all 400ms ease-out 400ms;
transition: all 400ms ease-out 400ms;
}
/* Optional: For demo purpose only*/
* {
margin: 0;
padding: 0;
}
html {
font-size: 62.5%;
}
body {
color: #222;
font: 1.3rem/1.4em Arial, Sans-serif;
margin: 0;
}
h1 { 
color: #000;
line-height: 1.3em;
font-size: 4rem;
text-transform: uppercase;
letter-spacing: 0.01em;
}
h2 {
font-size: 2.4rem;
font-weight: normal;
color: #666;
text-transform: uppercase;
letter-spacing: 0.02em
}
p {
margin-bottom: 2rem;
}
.credits {
font-size: 1rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #888;
margin-top: 4rem;
}
article {
max-width: 320px;
background: rgba(255,255,255,0.95);
padding: 4rem 4rem 0.1rem;
margin: 0rem;
border-left: 0rem solid #888;
}
</style>

JS
<script type="text/javascript">
/**
* @name jQuery fullvid
* @author M'c kenneth Licon
* @link http://mlicon.ca
* @version 1.0.0
*/

$(document).ready(function() {
  $('body')
    .prepend('<div class="vidcover"></div>')
    .hover (
        function() {
            $('.vidcover').css({'opacity':'0.4'})
        },
        function() {
            $('.vidcover').css({'opacity':'0'})
        }
    );

    $(window).resize( function(){
        var theWidth = $(window).width();
        var theHeight = $(window).height();
        var newWidth = (theHeight*1.77777778);
        var newHeight = (theWidth/1.77777778);

        if ( (theWidth > 1280) && (newHeight > theHeight )) {
            $('.fullvid').css({'width':theWidth, 'height':newHeight});
        }

        if ( (theHeight > 720) && (newWidth > theWidth )) {
            $('.fullvid').css({'height':theHeight, 'width':newWidth});
        }

        $('.vidcover').css({'height':theHeight, 'width':theWidth});
    }).resize();
});

/*REDIRECT URL PORTION STARTS HERE*/
    function playVideo() {
    var video= document.getElementById('vim');
    video.play();
    video.addEventListener('ended',function() {
        window.location= 'http://www.google.com';
    });
}
playVideo();
</script>

https://jsfiddle.net/XavierTheGreat/xctgnaeq/3/

Answer 1

这个 fiddle 也许可以帮助你。请注意，他们使用名为 froogaloop 的插件来添加事件监听器。

http://jsfiddle.net/bdougherty/HfwWY/light/

var iframe = $('#player1')[0],
    player = $f(iframe),
    status = $('.status');

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

    player.addEvent('pause', onPause);
    player.addEvent('finish', onFinish);
    player.addEvent('playProgress', onPlayProgress);
});

// Call the API when a button is pressed
$('button').bind('click', function() {
    player.api($(this).text().toLowerCase());
});

function onPause(id) {
    status.text('paused');
}

function onFinish(id) {
   // status.text('finished');
   window.location = 'http://www.google.com';
}

function onPlayProgress(data, id) {
    status.text(data.seconds + 's played');
}