Javascript 如何在 iframe 中嵌入自动播放的 YouTube 视频？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7281765/
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
How to embed an autoplaying YouTube video in an iframe?
提问by 472084
I am trying to embed the new iframe version of a YouTube video and get it to auto play.
我正在尝试嵌入 YouTube 视频的新 iframe 版本并让它自动播放。
As far as I can tell, there is no way of doing this by amending flags to the URL. Is there a way to do it by using JavaScript & the API?
据我所知，没有办法通过修改 URL 的标志来做到这一点。有没有办法通过使用 JavaScript 和 API 来做到这一点？
回答by mjhm
This works in Chrome but not Firefox 3.6 (warning: RickRoll video):
这适用于 Chrome 但不适用于 Firefox 3.6（警告：RickRoll 视频）：
<iframe width="420" height="345" src="http://www.youtube.com/embed/oHg5SJYRHA0?autoplay=1" frameborder="0" allowfullscreen></iframe>
The JavaScript API for iframe embedsexists, but is still posted as an experimental feature.
用于 iframe 嵌入的JavaScript API存在，但仍作为实验性功能发布。
UPDATE: The iframe API is now fully supported and "Creating YT.Player objects - Example 2"shows how to set "autoplay" in JavaScript.
更新：现在完全支持 iframe API，“创建 YT.Player 对象 - 示例 2”展示了如何在 JavaScript 中设置“自动播放”。
回答by Waheed ur Rehman
The embedded code of youtube has autoplay off by default. Simply add autoplay=1at the end of "src" attribute. For example:
youtube 的嵌入代码默认关闭自动播放。只需autoplay=1在“src”属性的末尾添加。例如：
<iframe src="http://www.youtube.com/embed/xzvScRnF6MU?autoplay=1" width="960" height="447" frameborder="0" allowfullscreen></iframe>
回答by MatayoshiMariano
Since April 2018, Google made some changes to the Autoplay Policy. So you will have to do something like this:
自 2018 年 4 月以来，Google 对自动播放政策进行了一些更改。所以你将不得不做这样的事情：
<iframe src="https://www.youtube.com/embed/VIDEO_ID?autoplay=1" allow='autoplay'></iframe>
回答by Tim Vermaelen
August 2018 I didn't find a working example on the iframe implementation. Other questions were related to Chrome only, which gave it away a little.
2018 年 8 月我没有找到有关 iframe 实现的工作示例。其他问题仅与 Chrome 相关，这有点泄露了它。
You'll have to mute sound mute=1in order to autoplay on Chrome. FF and IE seem to be working just fine using autoplay=1as parameter.
您必须将声音静音mute=1才能在 Chrome 上自动播放。FF 和 IE 似乎使用autoplay=1as 参数工作得很好。
<iframe src="//www.youtube.com/embed/{{YOUTUBE-ID}}?autoplay=1&mute=1" name="youtube embed" allow="autoplay; encrypted-media" allowfullscreen></iframe>
回答by Ralph
2014 iframe embed on how to embed a youtube video with autoplay and no suggested videos at end of clip
2014 iframe 嵌入如何嵌入具有自动播放功能的 youtube 视频，并且在剪辑结束时没有建议的视频
rel=0&autoplay
Example Below: .
示例如下： .
<iframe width="640" height="360" src="//www.youtube.com/embed/JWgp7Ny3bOo?rel=0&autoplay=1" frameborder="0" allowfullscreen></iframe>
回答by bdanin
at the end of the iframe src, add &enablejsapi=1to allow the js API to be used on the video
在 iframe src 的末尾，添加&enablejsapi=1以允许在视频上使用 js API
and then with jquery:
然后用jquery：
jQuery(document).ready(function( $ ) {
$('.video-selector iframe')[0].contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*');
});
this should play the video automatically on document.ready
这应该会在 document.ready 上自动播放视频
note, that you could also use this inside a click function to click on another element to start the video
请注意，您也可以在单击功能中使用它来单击另一个元素以启动视频
More importantly, you cannot auto-start videos on a mobile device so users will always have to click on the video-player itself to start the video
更重要的是，您无法在移动设备上自动启动视频，因此用户必须始终单击视频播放器本身才能启动视频
Edit: I'm actually not 100% sure on document.ready the iframe will be ready, because YouTube could still be loading the video. I'm actually using this function inside a click function:
编辑：我实际上并不是 100% 确定 document.ready iframe 会准备好，因为 YouTube 仍然可以加载视频。我实际上是在点击函数中使用这个函数：
$('.video-container').on('click', function(){
$('video-selector iframe')[0].contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*');
// add other code here to swap a custom image, etc
});
回答by Hastig Zusammenstellen
Multiple queries tip for those who don't know (past me and future me)
给不知道的人（过去和未来的我）的多个查询提示
If you're making a single query with the url just ?autoplay=1works as shown by mjhm's answer
如果你正在做的URL单个查询只是?autoplay=1作品由mjhm的回答显示
<iframe src="https://www.youtube.com/embed/oHg5SJYRHA0?autoplay=1"></iframe>
If you're making multiple queries remember the first one begins with a ?while the rest begin with a &
如果您要进行多个查询，请记住第一个以 a 开头，?其余的以 a 开头&
Say you want to turn off related videos but enable autoplay...
假设您想关闭相关视频但启用自动播放...
This works
这有效
<iframe src="https://www.youtube.com/embed/oHg5SJYRHA0?rel=0&autoplay=1"></iframe>
and this works
这有效
<iframe src="https://www.youtube.com/embed/oHg5SJYRHA0?autoplay=1&rel=0"></iframe>
But these won't work..
但这些都行不通..
<iframe src="https://www.youtube.com/embed/oHg5SJYRHA0?rel=0?autoplay=1"></iframe>
<iframe src="https://www.youtube.com/embed/oHg5SJYRHA0&autoplay=1&rel=0"></iframe>
example comparisons
示例比较
https://jsfiddle.net/Hastig/p4dpo5y4/
https://jsfiddle.net/Hastig/p4dpo5y4/
more info
更多信息
Read NextLocal's reply below for more info about using multiple query strings
阅读 NextLocal 下面的回复，了解有关使用多个查询字符串的更多信息
回答by Salman A
The flags, or parameters that you can use with IFRAME and OBJECT embeds are documented here; the details about which parameter works with what player are also clearly mentioned:
可以与 IFRAME 和 OBJECT 嵌入一起使用的标志或参数记录在此处；还明确提到了有关哪个参数适用于哪个播放器的详细信息：
YouTube Embedded Players and Player Parameters
You will notice that autoplayis supported by all players (AS3, AS2 and HTML5).
您会注意到autoplay所有播放器（AS3、AS2 和 HTML5）都支持它。
回答by MattAllegro
To have the accepted answer by mjhm working on Chrome 66 in May 2018, I added allow=autoplayto the iframe and enable_js=1to the query string:
为了让 mjhm 在 2018 年 5 月在 Chrome 66 上得到公认的答案，我添加allow=autoplay到 iframe 和enable_js=1查询字符串中：
<iframe allow=autoplay width="420px" height="345px" src="http://www.youtube.com/embed/oHg5SJYRHA0?autoplay=1&enable_js=1"></iframe>
回答by Jonas WebDev
Nowadays I include a new attribute "allow" on iframe tag, for example:
现在我在 iframe 标签上添加了一个新属性“允许”，例如：
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
允许=“加速度计；自动播放；加密媒体；陀螺仪；画中画”
The final code is:
最后的代码是：
<iframe src="https://www.youtube.com/embed/[VIDEO-CODE]?autoplay=1"
frameborder="0" style="width: 100%; height: 100%;"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"></iframe>
