无法在移动设备上自动播放 YouTube答案

【问题标题】：Cannot autoplay YouTube on mobile devices无法在移动设备上自动播放 YouTube
【发布时间】：2019-06-28 18:44:22
【问题描述】：

因此我无法自动播放 YouTube 视频，因为此更新会阻止未静音的视频在移动设备上播放：https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

我尝试在我的视频网址中设置mute=1 和volume=0。静音参数确实成功地将桌面上的视频静音，但我仍然无法让视频在移动设备上自动播放。我需要自动播放才能工作的原因是因为我在初始页面加载时加载了视频图像。一旦用户点击视频，我的 JavaScript 就会加载 iframe。这极大地帮助了我的页面的性能。 Stack Overflow 上还有其他几个相关的问题，但没有一个答案有效。

这是我当前的代码：

<iframe width="560" height="315" src="https://www.youtube.com/embed/QHfgMrpMOm4?autoplay=1&mute=1" volume="0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

【问题讨论】：

您可以在 ios 中查看此答案，如果没有用户交互，自动播放将无法正常工作。 stackoverflow.com/questions/15090782/…

标签： javascript html youtube youtube-api

【解决方案1】：

有同样的问题，看起来有什么变化。唯一对我有用的解决方案是 - 使用 youtube API

var tag = document.createElement('script');

tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;

function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    videoId: 'M7lc1UVf-VE',
    events: {
      'onReady': onPlayerReady,
    }
  });
}

function onPlayerReady(event) {
  event.target.mute();
  event.target.playVideo();
}

<!DOCTYPE html>
<html>

<body>
  <div id="player"></div>
</body>

</html>

【讨论】：