Html 获取多个嵌入的 Youtube 视频按顺序自动播放
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15199437/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Get Multiple Embedded Youtube Videos to Play Automatically in Sequence
提问by clifgray
Is there any simple way to have multiple embedded YouTube videos on a page and have them start playing as soon as the page is opened and when the first one finished have the second one start?
有没有什么简单的方法可以在一个页面上嵌入多个 YouTube 视频，并让它们在页面打开后立即开始播放，并且在第一个完成后让第二个开始播放？
I was hoping something like this would work:
我希望这样的事情会奏效：
<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>
And it does for the first one but not the second. I would imagine that I may need to dive into the API. Anyone have any suggestions?
它适用于第一个，但不适用于第二个。我想我可能需要深入研究 API。有人有什么建议吗？
回答by Aaron Saray
Using the Youtube IFrame API, you can do this easily.
使用 Youtube IFrame API，您可以轻松做到这一点。
The only part you need to configure here is the array of youtube IDs. You can retrieve those from the part after the /v/ in the URL (If need be, you can modify the javascript to load URLs instead of IDs. I just like this way better.
您需要在此处配置的唯一部分是 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>
回答by Matt Koskela
Here is an example using the YouTube Iframe Player API.
下面是一个使用YouTube Iframe Player API的示例。
There are two separate embeds (player1 and player2). The video autoplays when player1 has loaded, and it starts player2 when it completes.
有两个独立的嵌入（player1 和 player2）。视频在 player1 加载后自动播放，并在播放完成后启动 player2。
Here is the jfiddle if you want to play around with it.
And the code:
和代码：
<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>
回答by yuli chika
I am not good at javascript. But I have some similar question before.
我不擅长 javascript。但我之前有一些类似的问题。
judgement the first video is finished then run the second. you could set 2 functions.
判断第一个视频完成然后运行第二个。你可以设置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>
then
然后
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
}
}
hope this could help you and write some nicer code, thanks.
希望这可以帮助您并编写一些更好的代码，谢谢。
回答by Nishank
Use youtube API and put autoplay true;make aplaylist on youtube and give link to that.
使用 youtube API 并将自动播放设为 true；在 youtube 上制作播放列表并提供链接。
回答by xdeepakv
Based on prev sample code. I have created Basic Vanilla JavaScript Youtube Player- With playlist. Checkout Youtube Player- With playlist
基于上一个示例代码。我已经创建了 Basic Vanilla JavaScript Youtube Player- 带有播放列表。结帐Youtube 播放器 - 带播放列表
<!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>回答by JohnMathew
Don't be complicated, Simply use iframe
不要复杂，简单地使用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>
