YouTube API会在视频更改后停止侦听事件

时间:2018-01-17 09:21:27

标签: javascript youtube-iframe-api

说我需要通过点击按钮并从阵列获取新链接来更改视频。 但是,每次src获取不同的视频链接onYouTubeIframeAPIReady都会停止收听 对于onStateChange事件,我的视频不再循环播放。问题不在于循环, 但一般情况下,如何在更改玩家src时保留事件监听器?

var videoz = [
        {youTube: 'https://www.youtube.com/embed/HcGG0tXv_U4?showinfo=0&controls=0&rel=0&modestbranding=1&start=20&end=23&autoplay=1&enablejsapi=1'},
        {youTube: 'https://www.youtube.com/embed/UVwJimrX3tg?showinfo=0&controls=0&modestbranding=1&rel=0&start=23&end=25&autoplay=1&enablejsapi=1'}],
    player;

function onYouTubeIframeAPIReady() { 
    document.getElementById('vidVid').src = videoz[0].youTube;
    player = new YT.Player('vidVid', {events:{onStateChange: playerVidEnd}}); 
}

function changeVid() {
    document.getElementById('vidVid').src = videoz[1].youTube;
}

function playerVidEnd(event) {
    if (event.data == 0) {
           player.seekTo(20);
           player.playVideo();
    }
}
<iframe id="vidVid" style="width: 500px; height: 400px" src=""></iframe>
    <button onclick="changeVid()" type="button" id="nxt">NEXT</button>

1 个答案:

答案 0 :(得分:0)

检查出来

选项1

尝试更改视频src以重新初始化播放器时。

选项2(由文档推荐)

将其放入您的更改功能

player.loadVideoByUrl({
    videoz[1].youTube,
    23 /* start */,
    25 /* end */,
    "highres"
})