jQuery 在页面加载时播放 iframe 嵌入的 YouTube 视频

Posted 2023-02-24

【中文标题】jQuery 在页面加载时播放 iframe 嵌入的 YouTube 视频

【英文标题】：jQuery play iframe embedded YouTube video on page load

【发布时间】：2018-01-18 12:08:10

【问题描述】：

我想在页面或文档加载时自动播放 Iframe 嵌入的 youtube 视频，而不是任何点击事件。

我尝试了以下方法，但它不能在 chrome 和移动设备上播放。

<iframe width="800" height="400" src="https://www.youtube.com/embed/W0LHTWG-UmQ?autoplay=1" frameborder="0" allowfullscreen></iframe>

第二种方式

jQuery(document).ready(function() 
  jQuery('#playvideo').click(function(ev) 
  
  jQuery("#video_played")[0].src += "&autoplay=1";
    ev.preventDefault();
  );
  
  setTimeout(function() 
    jQuery('#playvideo').trigger('click');
  , 4000);

); 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<iframe id="video_played" src="https://www.youtube.com/embed/W0LHTWG-UmQ?controls=0&showinfo=0&rel=0&loop=1&playlist=W0LHTWG-UmQ&autoplay=1" frameborder="0" allowfullscreen></iframe>
<a rel="wp-video-lightbox"  style="display: none;" href="#" id="playvideo">Play video</a>

我只想在加载页面期间播放 youtube 嵌入视频，而不是任何点击事件。

【问题讨论】：

YouTube Iframe embed auto play的可能重复

这不是重复的，我希望在加载页面期间自动播放并且我在 chrome 浏览器和移动设备中遇到了问题，我还尝试了我上面提到的自定义 js 脚本。

将 ?autoplay=1 更改为 ?rel=0&autoplay=1

@GovindSamrow 已经添加了有问题的答案，他提到它不起作用：p

您是否尝试过将jQuery("#video_played")[0].src += "&autoplay=1"; 移出点击事件？

【参考方案1】：

这里有一个解决方案https://codepen.io/Shiladitya/pen/prwJKB

iframe 
  width: 100%

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

只需添加?rel=0&autoplay=1

【讨论】：

我已经尝试过了，但现在可以在 chrome 浏览器和移动设备上使用

可能是缓存问题。

<iframe width="420" height="345" src="http://www.youtube.com/embed/EnGcluOlCQ0?rel=0&autoplay=1" frameborder="0" allowfullscreen></iframe> 我在本地测试了代码，它工作正常。我更改了youTube 视频

无法在 Iphone 6 中工作，您是否响应式签入。

看看https://***.com/questions/12496144/can-you-autoplay-html5-videos-on-the-ipad

【参考方案2】：

您可以在 youtube 链接的末尾添加 autoplay=1。请参考下文。

     <iframe   src="https://www.youtube.com/embed/ofKxLfdUGnk?autoplay=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>   

【参考方案3】：

除非您为视频添加静音，否则不会在 chrome 上自动播放。 静音=1

【讨论】：

在哪里？你能举个例子吗？

@Wallen。这是一个示例：mute=1 参数：<iframe width="560" height="315" src="https://www.youtube.com/embed/pTBjHjRhx_Y?autoplay=1&mute=1" title="YouTube video player" frameborder="0" allow="accelerometer; clipboard-write; encrypted-media;" allowfullscreen></iframe>