播放列表中的第一个视频，但不播放下一个视频。我已经从 YouTube API example 复制了初始代码。还有使用 this SO answer 中的 onPlayerStateChange(event) 的想法.
第一个视频播放正常。使用 Firebug，我还可以看到它进入了 playnextvideo() 函数。但是，下一个视频无法播放。我也尝试添加
player.playVideo()
在该函数的最后一行，但我收到一条错误消息“player.playVideo() 不是函数”。以下是我的全部<body>部分。此页面中没有其他脚本。
<div id="container">
<div id="content">
<div class="fixedwidthlower">
<?php
require 'dbconn.inc'; //database connection code
echo "<div id=\"SongList\"><ul id = \"songs\">";
$list = explode(" ", $_POST['playlist']);
$hlist = array();
for($i=0; $i<count($list); $i++){
$sql = "SELECT * FROM songs where aikey = " . $list[$i] . ";";
$result = $conn->query($sql);
$row = $result->fetch_assoc();
if ($i==0)
$liclass = " class=\"active\"";
else
$liclass = "";
echo "<li" . $liclass . "><a href=\"" . $row["URL"] . "\">" . $row["Song"] . " (" . substr($row["URL"], stripos($row["URL"], "=") + 1) . ")</a></li>";
$hlist[] = substr($row["URL"], stripos($row["URL"], "=") + 1);
}
echo "</ul></div>";
echo "<div id=\"Player\">";
for($i=0; $i<count($hlist); $i++){
echo $hlist[$i] . " ";
} // This loop puts the raw videoids into the Player Div
// which are then read by the first line in javascript below
// Example: "usNsCeOV4GM 8pPvNqOb6RA cwqhdRs4jyA XcATvu5f9vE WANNqr-vcx0 t-iJ47in9YQ OMOGaugKpzs l3LFML_pxlY mLDDxfFKd9Y 9Z4rmlyuH-s "
echo "</div>";
$conn->close();
?>
</div>
</div>
<script type="text/javascript">
var videolist = document.getElementById("Player").innerHTML.split(" ");
var i =0;
var video = videolist[i];
function playnextvideo(){
i++;
video = videolist[i];
playmyvideo();
player.playVideo();
}
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() {
playmyvideo();
}
function playmyvideo() {
player = new YT.Player('Player', {
height: '390',
width: '640',
videoId: video,
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
event.target.playVideo();
}
function onPlayerStateChange(event) {
if (event.data === 0) {
playnextvideo();
}
}
console.log(i);
console.log(video);
</script>
php 代码可能不相关，但为了完整性我已经展示了它。我没有包含 CSS，因为它可能不相关(没有 display:none div，正如我在其他问题中看到的导致问题的那样)。如果您想要此页面的链接，我也可以提供...
感谢您的帮助!
最佳答案
您需要修改您的实现并使用 loadPlaylist or cuePlaylist功能，因为它将完美解决您的问题，而无需实现太多复杂的代码。
使用loadPlaylist可以加载指定的播放列表并播放它。在下面的示例中，我指定了要在 onPlayerReady 事件中播放的视频 ID 列表。
(您可以尝试在 jsFiddle 中运行下面的代码)
<div id="player"></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 onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
event.target.loadPlaylist(['RB-RcX5DS5A','QtXby3twMmI']);
}
var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
done = true;
}
}
function stopVideo() {
player.stopVideo();
}
</script>
关于javascript - 无法获取 YouTube 视频的自定义播放列表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34400791/