Html 使嵌入的 YouTube 视频自动播放和循环
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13041088/
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
Getting an Embedded YouTube Video to Auto Play and Loop
提问by Justin Newbury
I am trying to get a basic Youtube video to auto play and auto loop embedded on a page, but I'm having no luck.
我试图让一个基本的 Youtube 视频自动播放和自动循环嵌入页面，但我没有运气。
<div style="text-align: center; margin: auto"><object type="application/x-shockwave-flash" style="width:1120px; height:630px;" data="http://www.youtube.com/v/GRonxog5mbw?rel=0&loop=1&autoplay=1&showsearch=0&version=3&showinfo=0&modestbranding=1&fs=1">
<param name="movie" value="http://www.youtube.com/v/GRonxog5mbw?rel=0&loop=1&autoplay=1&showsearch=0&version=3&showinfo=0&modestbranding=1&fs=1" />
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
</object></div>
回答by Jamie Hayman
YouTubes HTML5 embed code:
YouTube 的 HTML5 嵌入代码：
<iframe width="560" height="315" src="http://www.youtube.com/embed/GRonxog5mbw?autoplay=1&loop=1&playlist=GRonxog5mbw" frameborder="0" allowfullscreen></iframe>?
You can read about it here: ... (EDITLink died.) ... View original content on Internet Archive project.
您可以在此处阅读：...（编辑链接已失效。）... 查看 Internet Archive 项目上的原始内容。
回答by Salman A
Here is the full list of YouTube embedded player parameters.
这是YouTube 嵌入式播放器参数的完整列表。
Relevant info:
相关资料：
autoplay(supported players: AS3, AS2, HTML5) Values: 0 or 1. Default is 0. Sets whether or not the initial video will autoplay when the player loads.
loop(supported players: AS3, HTML5) Values: 0 or 1. Default is 0. In the case of a single video player, a setting of 1 will cause the player to play the initial video again and again. In the case of a playlist player (or custom player), the player will play the entire playlist and then start again at the first video.
Note: This parameter has limited support in the AS3 player and in IFrame embeds, which could load either the AS3 or HTML5 player. Currently, the loop parameter only works in the AS3 player when used in conjunction with the playlist parameter. To loop a single video, set the loop parameter value to 1 and set the playlist parameter value to the same video ID already specified in the Player API URL:
http://www.youtube.com/v/VIDEO_ID?version=3&loop=1&playlist=VIDEO_ID
自动播放（支持的播放器：AS3、AS2、HTML5） 值：0 或 1。默认值为 0。设置初始视频在播放器加载时是否自动播放。
loop（支持的播放器：AS3、HTML5） 值：0 或 1。默认为 0。在单个视频播放器的情况下，设置为 1 将导致播放器一次又一次地播放初始视频。对于播放列表播放器（或自定义播放器），播放器将播放整个播放列表，然后从第一个视频重新开始。
注意：此参数在 AS3 播放器和 IFrame 嵌入中的支持有限，它们可以加载 AS3 或 HTML5 播放器。目前，loop 参数仅在 AS3 播放器中与播放列表参数结合使用时才有效。要循环播放单个视频，请将循环参数值设置为 1，并将播放列表参数值设置为已在播放器 API URL 中指定的相同视频 ID：
http://www.youtube.com/v/VIDEO_ID?version=3&loop=1&playlist=VIDEO_ID
Use the URL above in your embed code (append other parameters too).
在嵌入代码中使用上面的 URL（也附加其他参数）。
回答by Tarik
All of the answers didn't work for me, I checked the playlist URL and seen that playlist parameter changed to list!So it should be:
所有的答案都不适合我，我检查了播放列表 URL，看到播放列表参数更改为列表！所以应该是：
&loop=1&list=PLvNxGp1V1dOwpDBl7L3AJIlkKYdNDKUEs
&loop=1&list=PLvNxGp1V1dOwpDBl7L3AJIlkKYdNDKUEs
So here is the full code I use make a clean, looping, autoplay video:
所以这是我使用的完整代码来制作一个干净的、循环的、自动播放的视频：
<iframe width="100%" height="425" src="https://www.youtube.com/embed/MavEpJETfgI?autoplay=1&showinfo=0&loop=1&list=PLvNxGp1V1dOwpDBl7L3AJIlkKYdNDKUEs&rel=0" frameborder="0" allowfullscreen></iframe>
回答by LuH
Playlist hack didn't work for me either. Working workaround for September 2018 (bonus: set width and height by CSS for #yt-wrapinstead of hard-coding it in JS):
Playlist hack 对我也不起作用。2018 年 9 月的工作解决方法（奖励：通过 CSS 设置宽度和高度，#yt-wrap而不是在 JS 中对其进行硬编码）：
<div id="yt-wrap">
<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div id="ytplayer"></div>
</div>
<script>
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('ytplayer', {
width: '100%',
height: '100%',
videoId: 'VIDEO_ID',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.playVideo();
player.mute(); // comment out if you don't want the auto played video muted
}
// 5. The API calls this function when the player's state changes.
// The function indicates that when playing a video (state=1),
// the player should play for six seconds and then stop.
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.ENDED) {
player.seekTo(0);
player.playVideo();
}
}
function stopVideo() {
player.stopVideo();
}
</script>
回答by pst tomowo
Had same experience, however what did the magic for me is not to change embed to v.
有同样的经历，但是对我来说神奇的是不要改变嵌入到 v。
So the code will look like this...
所以代码看起来像这样......
<iframe width="560" height="315" src="https://www.youtube.com/embed/cTYuscQu-Og?Version=3&loop=1&playlist=cTYuscQu-Og" frameborder="0" allowfullscreen></iframe>
Hope it helps...
希望能帮助到你...
