从列表中播放下一段youtube视频，当实际结束时

Question

我正在读"iframe_api_reference“，我想制作一个播放列表，在实际视频结束后播放下一个视频，所以.

在此基础上：

<div id = "player" style = "height: 390; width: 590;"></div>
<script src="http://www.youtube.com/player_api"></script> 
<script>
    var player;
    function onYouTubePlayerAPIReady() {
        player = new YT.Player('player', {
          height: '390',
          width: '590',
          videoId: "4kpXVR6LavI",
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
    }
    function onPlayerReady(event) {
        event.target.playVideo();
    }
    function onPlayerStateChange(event) {        
        if(event.data === 0) { 
            alert("over");         
        }
    }
</script>

我想从下面这样的视频中摘取下一段视频：

<div class="youtube" id="4kpXVR6LavI">
    <p>Video title</p>
    <img src="portraitphoto" alt="">
</div>

我怎么能做这个？谢谢!

Answer 1

您需要添加事件侦听器到您的应用程序。player.addEventListener(event:String, listener:String):Void。侦听器是一个字符串，它指定当指定的事件触发时将执行的函数。

包括onStateChange，每当玩家的状态发生变化时，此事件就会触发。API传递给事件侦听器函数的值将指定一个与新player状态对应的整数。

function onYouTubePlayerReady(playerId) {
    ytplayer = document.getElementById("myytplayer");
    ytplayer.addEventListener("onStateChange", "onytplayerStateChange");
}

function onytplayerStateChange(newState) {
    alert("Player's new state: " + newState);
}

将自定义函数作为处理程序绑定到"onStateChange"事件，并从内部计算新状态。根据API的Events部分，您正在寻找状态0，表示视频已经结束。

function onytplayerStateChange(newState) {
    if ( newState == 0 ) {
        /* load next video */
    }
}