Question

因此，由于此更新导致我无法自动播放YouTube视频，该更新会阻止未静音的视频在手机上播放：https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

我尝试在视频URL中设置mute=1和volume=0。静音参数确实可以使台式机上的视频成功静音，但是我仍然无法使该视频在移动设备上自动播放。我需要自动播放才能工作的原因是因为我在初始页面加载时加载了视频图像。用户点击视频后，我的JavaScript就会加载iframe。这极大地提高了我页面的性能。关于堆栈溢出还有其他几个相关问题，但没有一个答案起作用。

这是我当前的代码：

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

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

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

1 个答案: