Javascript - 如何在视频结束时更改 iframe 的 src

Question

我想知道如何在视频结束时自动更改iframe的来源。我使用此脚本生成 iframe 和函数 onPlayerStateChange 来检测视频何时结束。我基本上需要在视频播放完毕后更改videoID。我的JS:

    <script src="http://www.youtube.com/player_api"></script>
<script>
    // create youtube player
    var player;
    function onYouTubePlayerAPIReady() {
        player = new YT.Player('player', {
          width: '640',
          height: '390',
          videoId: 'gPDcwjJ8pLg',
          events: {
            onStateChange: onPlayerStateChange
          }
        });
    }

    // when video ends
    function onPlayerStateChange(event) {        
        if(event.data === 0) {

        }
    }

</script>

感谢您的建议。

Answer 1

如果您想对多个视频执行此操作，则需要对此进行概括。但我认为这个示例(index.html 文件)应该有效:

<div id="player"></div>

<script src="http://www.youtube.com/player_api"></script>

<script>

    // create youtube player
    var player;
    function onYouTubePlayerAPIReady() {
        player = new YT.Player('player', {
          height: '390',
          width: '640',
          videoId: '0Bmhjf0rKe8',
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
    }

    // autoplay video
    function onPlayerReady(event) {
        event.target.playVideo();
    }

    // when video ends
    function onPlayerStateChange(event) {        
        if(event.data === 0) {            
            player.loadVideoById('iRXJXaLV0n4');
        }
    }

</script>

这是 jsFiddle:http://jsfiddle.net/lukeschlangen/dbrhgdkb/1/