Javascripting一个Youtube视频接连播放

时间:2017-10-18 06:52:09

标签: javascript html javascript-events youtube youtube-api

我的视频无法加载以下代码。

它似乎应该非常直接,但我无法让它加载任何东西。我试过了:

  • 更改视频
  • 更改活动订单
  • 在html
  • 中为div添加显式高度

......关于我能想到的所有事情。

有人能看出出了什么问题吗?

感谢。

<html>
    <head>Video title 
        <script src=//"www.youtube.com/iframe_api"></script>
        <script>    
            var videoIDs = [
                'OdT9z-JjtJk',
                'NlXTv5Ondgs'
            ];

            var player, currentVideoId = 0;

            function onYouTubeIframeAPIReady() {
                player = new YT.Player('player', {
                    height: '350',
                    width: '425',
                    events: {
                        'onReady': onPlayerReady,
                        'onStateChange': onPlayerStateChange
                    }
                });
            }

            function onPlayerReady(event) {
                event.target.loadVideoById(videoIDs[currentVideoId]);
            }

            function onPlayerStateChange(event) {
                if (event.data == YT.PlayerState.ENDED) {
                    currentVideoId++;
                    if (currentVideoId < videoIDs.length) {
                        player.loadVideoById(videoIDs[currentVideoId]);
                    }
                }
            }
        </script>
    </head>
    <body>
        <div id="player"></div>
    </body> 
</html>

1 个答案:

答案 0 :(得分:0)

使用此脚本我更改了simething: -

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player, currentVideoId = 0;

function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
        height: '350',
        width: '650',
        videoId: 'M7lc1UVf-VE',
        events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
        }
    });
}

function onPlayerReady(event) {
    event.target.playVideo();
}
var done = false;

function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.PLAYING && !done) {
        currentVideoId++;
        if (currentVideoId < videoIDs.length) {
            player.loadVideoById(videoIDs[currentVideoId]);
        }
        setTimeout(stopVideo, 6000);
        done = true;
    }
}