所以当我试图在我的网站上创建一个嵌入式播放列表,并让它随机播放时,我发现YouTube API中有一个没有修复的错误,并且不会让任何人使用随机播放功能。
所以我试着创造一个工作。我想我可以用一个随机数代替播放列表的索引号。只要我手动输入随机数生成器的最大值和最小值,我就可以对播放列表进行洗牌。点击这里查看:http://jsfiddle.net/9kFyx/33/
虽然我对此非常满意,但我宁愿有一个更动态的代码,它只会得到播放列表数组中的元素数量,并将它们用作随机因子的最大值。听起来够简单吗?我在这里查找了API参考:https://developers.google.com/youtube/js_api_reference Retrieving_playlist_information
,发现player.getPlaylist()
我使用array.length;
获取数字数组元素,并将其注入随机生成器。但是行不通!我不知道为什么。当我试图写入数组时,返回为未定义。
你能帮忙吗?
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>
调用player.loadPlaylist()
和能够获得player.getPlaylist()
的播放列表之间有延迟。这个答案通过等待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();
}
}
}
我在PHP中的解决方案,有点压倒性,但它工作。
function getNumberofElements() {
$pid = $this->getPID();
$url = "https://www.googleapis.com/youtube/v3/playlists?part=contentDetails&id=$pid&key=$yourAPIKey";
$ch = curl_init($url);
curl_setopt($ch, CURLOPT_HTTPGET, TRUE);
curl_setopt($ch, CURLOPT_POST, FALSE);
curl_setopt($ch, CURLOPT_HEADER, false);
curl_setopt($ch, CURLOPT_NOBODY, FALSE);
curl_setopt($ch, CURLOPT_VERBOSE, FALSE);
curl_setopt($ch, CURLOPT_REFERER, "");
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, TRUE);
curl_setopt($ch, CURLOPT_MAXREDIRS, 4);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, TRUE);
curl_setopt($ch, CURLOPT_USERAGENT, "Mozilla/5.0 (Windows; U; Windows NT 6.1; he; rv:1.9.2.8) Gecko/20100722 Firefox/3.6.8");
$numberOfElements = curl_exec($ch); // $xml = simplexml_load_string($numberOfElements);
$numberOfElements = substr(strstr($numberOfElements, 'itemCount":'), strlen('itemCount":'));
$numberOfElements = str_replace("}", " ", $numberOfElements);
$numberOfElements = str_replace("]", " ", $numberOfElements);
return $numberOfElements;
}