我试图嵌入新的iframe版本的YouTube视频,并让它自动播放。

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


当前回答

自2018年4月起,谷歌对自动播放政策进行了一些更改。你不仅需要添加autoplay=1作为查询参数,还需要添加allow='autoplay'作为iframe的属性

所以你必须这样做:

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

其他回答

1 -添加&enablejsapi=1到IFRAME SRC

jQuery func:

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

工作正常

我没有找到iframe实现的工作示例。 其他问题只与Chrome有关,这透露了一点。

为了在Chrome上自动播放,你必须静音声音mute=1。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>

要使用javascript api,

<script type="text/javascript" src="swfobject.js"></script>
  <div id="ytapiplayer">
    You need Flash player 8+ and JavaScript enabled to view this video.
  </div>

  <script type="text/javascript">

    var params = { allowScriptAccess: "always" };
    var atts = { id: "myytplayer" };
    swfobject.embedSWF("http://www.youtube.com/v/OyHoZhLdgYw?enablejsapi=1&playerapiid=ytplayer&version=3",
                       "ytapiplayer", "425", "356", "8", null, null, params, atts);

  </script>

使用id播放youtube:

swfobject.embedSWF

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

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

然后用jquery:

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

这将在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
});

为了让mjhm在2018年5月在Chrome 66上工作,我在iframe中添加了allow=autoplay,并在查询字符串中添加了enable_js=1:

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