javascript - 修复 Youtube API 的随机播放列表

Question

因此，当我尝试在网站上创建嵌入式播放列表并使其随机播放时，我发现 YouTube API 中存在一个尚未修复的错误，并且不允许任何人使用随机播放功能.

所以我正在尝试创建一个解决方法。 我想我可以用随机数代替播放列表的索引号。 效果很好，只要我手动输入随机数生成器的最大值和最小值，就可以随机播放播放列表。在这里查看:http://jsfiddle.net/9kFyx/33/

虽然我对此感到非常满意，但我更希望有一个更动态的代码，它只会获取播放列表数组中的元素数量，并将它们用作随机因子的最大数量。听起来很容易吗？ 我在这里查找了 API 引用: https://developers.google.com/youtube/js_api_reference#Retrieving_playlist_information

并找到player.getPlaylist()

我使用array.length;来获取数字数组元素，并将其注入(inject)到随机生成器中。但这不起作用!我不知道为什么。当我尝试写入数组时，它返回为未定义。

你能帮忙吗？

http://jsfiddle.net/42S5N/

<div id="player"></div>
<div id="output" style="width:300px; height:20px; background:white; color:black;">maxNumber</div>
<script>
    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;

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

        });
    }


    var playlistArray;
    var playListArrayLength;
    var maxNumber;

    function onPlayerReady(event) {
        player.loadPlaylist({
            'listType': 'playlist',
                'list': 'PLhaqVbVcY6UPkbjbeJM2CwRedCrr0rPJr'
        });
        playlistArray = player.getPlaylist();
        playListArrayLength = playlistArray.length;
        maxNumber = playListArrayLength;
        document.getElementById('output').innerHTML = playListArrayLength;
        next();
    }



    function next() {
        player.loadPlaylist({
            'listType': 'playlist',
                'list': 'PLhaqVbVcY6UPkbjbeJM2CwRedCrr0rPJr',
                'index': newRandomNumber(),
                'startSeconds': '0',
                'suggestedQuality': 'small'
        });
        player.setShuffle({
            'shufflePlaylist': 'true'
        });
    }


    var oldNumber = 0;
    var NewNumber = 0;

    function newRandomNumber() {
        oldNumber = NewNumber;
        NewNumber = Math.floor(Math.random() * maxNumber);
        if (NewNumber == oldNumber) {
            newRandomNumber();
        } else {
            return NewNumber;
        }
    }

    function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.ENDED) {
            next();
        }
    }
</script>

Answer 1

调用 player.loadPlaylist() 和使用 player.getPlaylist() 获取播放列表之间存在延迟。 This answer通过等待 CUED 事件提供了修复，但在我的测试中它根本没有被触发，因此我检查了 PLAYING 事件，该事件工作正常。

你的代码将是这样的:

function onPlayerReady(event) {
    player.loadPlaylist({
        'listType': 'playlist',
        'list': 'PLhaqVbVcY6UPkbjbeJM2CwRedCrr0rPJr'
    });
}

var firstLoad = true;
function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.ENDED) {
        next();
    } else {
        if (firstLoad && event.data == YT.PlayerState.PLAYING) {
            firstLoad = false;
            playlistArray = player.getPlaylist();
            playListArrayLength = playlistArray.length;
            maxNumber = playListArrayLength;
            document.getElementById('output').innerHTML = playListArrayLength;
            next();
        }
    }
}