Question

我正在阅读＆＃34; iframe_api_reference＆＃34;我希望制作类似播放列表的内容，在实际视频结束后播放下一个视频，所以......

基于此：

<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传递给事件侦听器函数的值将指定与新播放器状态对应的整数。

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

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

将自定义函数绑定为"onStateChange"事件的处理程序，并从内部评估新状态。根据API的“事件”部分，您正在查找状态0，表示视频已结束。

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

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

1 个答案: