是否有任何简单的方法可以在页面上放置多个嵌入的YouTube视频并让它们在页面打开后立即开始播放，而第一个完成后第二个开始播放？
我希望这样的东西能起作用：
<object width="425" height="350"><param name="movie" value="http://www.youtube.com/v/OdT9z-JjtJk&autoplay=1"></param><embed src="http://www.youtube.com/v/OdT9z-JjtJk&autoplay=1" type="application/x-shockwave-flash" width="425" height="350"></embed></object>
<br>
<object width="425" height="350"><param name="movie" value="http://www.youtube.com/v/NlXTv5Ondgs&autoplay=2"></param><embed src="http://www.youtube.com/v/NlXTv5Ondgs&autoplay=2" type="application/x-shockwave-flash" width="425" height="350"></embed></object>
它适用于第一个而不是第二个。我想我可能需要深入了解API。有人有什么建议吗？
答案 0 :(得分：12)
使用Youtube IFrame API，您可以轻松完成此操作。
此处需要配置的唯一部分是youtube ID数组。您可以在URL中的/ v /之后从部件中检索这些部分（如果需要，您可以修改javascript以加载URL而不是ID。我只是更喜欢这种方式。
<div id="player"></div>
<script src="//www.youtube.com/iframe_api"></script>
<script>
/**
* Put your video IDs in this array
*/
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>
答案 1 :(得分：5)
以下是使用YouTube Iframe Player API。
的示例有两个独立的嵌入（player1和player2）。当player1加载时视频自动播放，并在播放完成后启动播放器。
Here is the jfiddle if you want to play around with it.
代码：
<div id="player1"></div>
<div id="player2"></div>
<script>
var tag = document.createElement('script');
tag.src = "//www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player1;
var player2;
function onYouTubeIframeAPIReady() {
player1 = new YT.Player('player1', {
height: '350',
width: '425',
videoId: 'OdT9z-JjtJk',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
player2 = new YT.Player('player2', {
height: '350',
width: '425',
videoId: 'NlXTv5Ondgs'
});
}
function onPlayerReady(event) {
event.target.playVideo();
}
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.ENDED) {
player2.playVideo();
}
}
</script>
答案 2 :(得分：1)
我不擅长javascript。但我之前有一些类似的问题。
判断第一个视频完成后再运行第二个视频。你可以设置2个功能。
<div id="player1"></div>
<br>
<object width="425" height="350"><param name="movie" id="player2-param" value="http://www.youtube.com/v/OdT9z-JjtJk"></param><embed src="http://www.youtube.com/v/OdT9z-JjtJk" type="application/x-shockwave-flash" width="425" height="350" id="player2-embed"></embed></object>
然后
function onPlayerStateChange(event) {
if(event.data === 0) {
$('#player2-param').attr('value','http://www.youtube.com/v/OdT9z-JjtJkautoplay=1');//jquery
$('#player2-embed').attr('src','http://www.youtube.com/v/OdT9z-JjtJkautoplay=1');//jquery
}
}
希望这可以帮助你并编写一些更好的代码，谢谢。
答案 3 :(得分：0)
使用youtube API并将autoplay设为true;在youtube上制作播放列表并提供指向该链接的链接。
答案 4 :(得分：0)
基于prev示例代码。我创建了Basic Vanilla JavaScript Youtube Player-带播放列表。结帐Youtube Player- With playlist
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Basic Vanilla JavaScript Youtube Player- With playlist</title>
</head>
<body>
<div class="player" style="width: 480px;height:360px;max-width: 50%;margin: 0 auto;">
<div id="youtube" style="width: 100%;height: 100%"></div>
<div class="controls" style="text-align: center;margin: 0 auto;">
<button style="padding: 10px;width: 100px;background-color: #167AC6;"
onclick="YouTubePlayer.playPrevious()">Prev
</button>
<button style="padding: 10px;width: 100px;background-color: #167AC6;margin-left: 30px;"
onclick="YouTubePlayer.playNext()">Next
</button>
</div>
</div>
<script src="//www.youtube.com/iframe_api"></script>
<script>
var YouTubePlayer = {
current: 0,
player: null,
/**
* Tracks ids here...
*/
videos: [
'vQMnaDNw5FQ',
'Dp6lbdoprZ0',
'OulN7vTDq1I'
],
currentlyPlaying:function(){
console.info('Current Track id', YouTubePlayer.videos[YouTubePlayer.current]);
return YouTubePlayer.videos[YouTubePlayer.current];
},
playNext: function () {
YouTubePlayer.increaseTrack()
if (YouTubePlayer.player) {
YouTubePlayer.currentlyPlaying();
YouTubePlayer.player.loadVideoById(YouTubePlayer.videos[YouTubePlayer.current]);
} else {
alert('Please Wait! Player is loading');
}
},
playPrevious: function () {
YouTubePlayer.decreaseTrack()
if (YouTubePlayer.player) {
YouTubePlayer.currentlyPlaying();
YouTubePlayer.player.loadVideoById(YouTubePlayer.videos[YouTubePlayer.current]);
} else {
alert('Please Wait! Player is loading');
}
},
increaseTrack: function () {
YouTubePlayer.current = YouTubePlayer.current + 1;
if (YouTubePlayer.current >= YouTubePlayer.videos.length) {
YouTubePlayer.current = 0;
}
},
decreaseTrack: function () {
YouTubePlayer.current = Math.max(YouTubePlayer.current - 1, 0);
},
onReady: function (event) {
event.target.loadVideoById(YouTubePlayer.videos[YouTubePlayer.current]);
},
onStateChange: function (event) {
if (event.data == YT.PlayerState.ENDED) {
YouTubePlayer.playNext();
}
}
}
function onYouTubeIframeAPIReady() {
YouTubePlayer.player = new YT.Player('youtube', {
height: '350',
width: '425',
events: {
'onReady': YouTubePlayer.onReady,
'onStateChange': YouTubePlayer.onStateChange
}
});
}
</script>
</body>
</html>
答案 5 :(得分：0)
不要太复杂，只需使用iframe
<iframe width="560" height="315" src="https://www.youtube.com/embed/nWHpU7H7Clc?playlist=b6KzNmLMW6o,qWE6g8puu98" frameborder="0" allow="autoplay; encrypted-media" style="width:900px;height:400px" autoplay="true"></iframe>