YouTube Iframe嵌入自动播放

YouTube Iframe embed auto play

我正在尝试嵌入新的iFrame版本的YouTube视频，并让它自动播放。

据我所知，没有办法通过修改URL的标志来做到这一点。有没有一种方法可以通过使用javascript和api来做到这一点？

这在Chrome中有效，但在Firefox 3.6中无效(警告：RickRoll视频)：

1	<iframe width="420" height="345" src="http://www.youtube.com/embed/oHg5SJYRHA0?autoplay=1" frameborder="0" allowfullscreen></iframe>

iframe嵌入的javascript api已经存在，但仍然作为实验特性发布。

更新：现在完全支持iframe API，"creating yt.player objects-example 2"显示如何在javascript中设置"autoplay"。

相关讨论

默认情况下，YouTube的嵌入代码已自动关闭。只需在"src"属性的末尾添加EDOCX1[1]。例如：

1	<iframe src="http://www.youtube.com/embed/xzvScRnF6MU?autoplay=1" width="960" height="447" frameborder="0" allowfullscreen></iframe>

号

相关讨论

自2018年4月以来，谷歌对自动播放政策进行了一些修改。所以你必须这样做：

1	<iframe src="https://www.youtube.com/embed/VIDEO_ID?autoplay=1" allow='autoplay'></iframe>

号

相关讨论

2014 iFrame嵌入了如何在视频剪辑末尾嵌入YouTube视频和自动播放以及无建议视频。

1	rel=0&autoplay

示例如下：

1	<iframe width="640" height="360" src="//www.youtube.com/embed/JWgp7Ny3bOo?rel=0&autoplay=1" frameborder="0" allowfullscreen></iframe>

。

在iframe-src的末尾，添加&enablejsapi=1以允许在视频中使用JS API。

然后使用jquery：

1
2
3

jQuery(document).ready(function( $ ) {
$('.video-selector iframe')[0].contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*');
});

。

这将在document.ready上自动播放视频。

请注意，您也可以在click函数中使用该函数来单击另一个元素来启动视频。

更重要的是，您不能在移动设备上自动启动视频，因此用户必须始终单击视频播放器本身来启动视频。

编辑：事实上，我对document.ready不是百分之百肯定，iFrame会准备好的，因为YouTube仍然可以加载视频。我实际上在一个click函数中使用这个函数：

1
2
3
4

$('.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
});

相关讨论

为不认识的人提供多个查询提示(过去的我和将来的我)

如果您使用URL进行单个查询，那么只有?autoplay=1的工作方式如mjhm的答案所示。

1	<iframe src="https://www.youtube.com/embed/oHg5SJYRHA0?autoplay=1"></iframe>

如果要进行多个查询，请记住，第一个查询以?开头，其余查询以&开头。

假设您想关闭相关视频，但启用自动播放…

这个工作

1	<iframe src="https://www.youtube.com/embed/oHg5SJYRHA0?rel=0&autoplay=1"></iframe>

。

这是可行的

1	<iframe src="https://www.youtube.com/embed/oHg5SJYRHA0?autoplay=1&rel=0"></iframe>

号

但是这些不行……

1
2
3

号

示例比较

https://jsfiddle.net/hastig/p4dpo5y4/

更多信息

有关使用多个查询字符串的详细信息，请阅读下面的NextLocal答复。

相关讨论

这里记录了可以与iframe和对象嵌入一起使用的标志或参数；还清楚地提到了与哪个播放器一起使用的参数的详细信息：

YouTube嵌入播放器和播放器参数

您会注意到，所有玩家(AS3、AS2和HTML5)都支持autoplay。

2018年8月，我没有找到关于iframe实现的工作示例。其他的问题只与铬有关，这给了它一点好处。

为了在Chrome上自动播放，您必须将声音设为静音。FF和IE使用autoplay=1作为参数似乎工作得很好。

1	<iframe src="//www.youtube.com/embed/{{YOUTUBE-ID}}?autoplay=1&mute=1" name="youtube embed" allow="autoplay; encrypted-media" allowfullscreen></iframe>

号

相关讨论

为了让MJHM在2018年5月对Chrome 66进行处理，我将allow=autoplay添加到iframe中，并将enable_js=1添加到查询字符串中：

1	<iframe allow=autoplay width="420px" height="345px" src="http://www.youtube.com/embed/oHg5SJYRHA0?autoplay=1&enable_js=1"></iframe>

号

相关讨论

1-在IFRAME SRC中加入&enablejsapi=1。

2-jquery函数：

1	$('iframe#your_video')[0].contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*');

。

工作正常

相关讨论

2018年12月，

寻找一个自动播放，循环，静音YouTube视频的反应。

其他的答案不起作用。

我找到了一个图书馆的解决方案：反应YouTube

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

class Video extends Component {

_onReady(event) {
// add mute
event.target.mute();
// add autoplay
event.target.playVideo();
}

render() {
const opts = {
width: '100%',
height: '700px',
playerVars: {
// remove video controls
controls: 0,
// remove related video
rel: 0
}
};

return (
<YouTube
videoId="oHg5SJYRHA0"
opts={opts}
// add autoplay
onReady={this._onReady}
// add loop
onEnd={this._onReady}
/>
)
}

}

号

1
2
3

号

要使用Javascript API，

1
2
3
4
5
6
7
8
9
10
11

要使用ID播放YouTube：

1	swfobject.embedSWF

。

参考：https://developers.google.com/youtube/js_api_referencemagazine