YouTube Iframe嵌入自动播放

Question

我正在尝试嵌入YouTube视频的新iframe版本并将其设置为自动播放.

据我所知,没有办法通过修改URL的标志来做到这一点.有没有办法通过使用JavaScript和API来做到这一点？

Answer 1

这适用于Chrome但不支持Firefox 3.6(警告:RickRoll视频):

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

iframe嵌入的JavaScript API存在,但仍作为实验性功能发布.

更新:现在完全支持iframe API,"创建YT.Player对象 - 示例2"显示了如何在JavaScript中设置"autoplay".

Answer 2

youtube的嵌入代码默认关闭自动播放.只需添加autoplay=1"src"属性的末尾.例如:

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

Answer 3

自2018年4月以来,Google对自动播放政策进行了一些更改.所以你必须做这样的事情:

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

Answer 4

2014 iframe嵌入了如何使用自动播放嵌入YouTube视频,并在剪辑结束时没有建议的视频

rel=0&autoplay 

示例如下:.

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

Answer 5

2018年8月，我没有找到有关iframe实施的可行示例。其他问题仅与Chrome有关，这给了它一些帮助。

您必须将声音静音mute=1才能在Chrome上自动播放。FF和IE似乎可以很好地autoplay=1用作参数。

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

Answer 6

在iframe src的末尾,添加&enablejsapi=1以允许在视频上使用js API

然后使用jquery:

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

这应该在document.ready上自动播放视频

请注意,您也可以在点击功能中使用此功能点击其他元素以启动视频

更重要的是,您无法在移动设备上自动启动视频,因此用户始终必须点击视频播放器本身才能启动视频

编辑:我实际上并不是100%肯定在document.ready iframe准备就绪,因为YouTube仍然可以加载视频.我实际上是在click函数中使用这个函数:

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

Answer 7

可以在此处记录可与IFRAME和OBJECT嵌入一起使用的标志或参数; 有关哪个参数适用于哪个播放器的详细信息也明确提到:

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

您会注意到autoplay所有玩家都支持(AS3,AS2和HTML5).

Answer 8

多个查询提示给那些不知道的人(过去我和未来的我)

如果你正在做的URL单个查询只是?autoplay=1作品由mjhm的回答显示

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

如果您正在进行多个查询,请记住第一个查询开始,?其余时间以a开头&

假设您要关闭相关视频但启用自动播放...

这有效

<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>

但这些都行不通..

<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>

示例比较

https://jsfiddle.net/Hastig/p4dpo5y4/

更多信息

阅读下面的NextLocal的回复,了解有关使用多个查询字符串的更多信息