移动设备上的Youtube自动播放功能不起作用，但在浏览器中可行

Posted 2021-04-26

我只是将常规YouTube视频嵌入到我的html文件中。我使用autoplay = 1，它在浏览器上运行正常。但自动播放不适用于任何手机。

你能帮我吗 ？

谢谢

答案

`

var player;

function onYouTubePlayerAPIReady() {
    player = new YT.Player('player', {
        playerVars: {
            'autoplay': 1,
            'controls': 0,
            'autohide': 1,
            'wmode': 'opaque',
            'showinfo': 0,
            'loop': 1,
	    'playlist': 'aF5HAF0fg6M',
	    'fs':1
        },
        videoId: 'aF5HAF0fg6M',
        events: {
            'onReady': function(){
      player.pauseVideo();
      player.playVideo();
	    }
        }
    });

}

window.onload=function() {
};

.video-background {
  background: #000;
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: -99;
}
.video-foreground,.video-background iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

@media (min-aspect-ratio: 16/9) {
  .video-foreground { height: 300%; top: -100%; }
}

<script src="http://www.youtube.com/player_api"></script>

<div class="video-background">
<div class="video-foreground">
	<div id="player" ></div>
</div>
</div>

<div>test</div>

以上是关于移动设备上的Youtube自动播放功能不起作用，但在浏览器中可行的主要内容，如果未能解决你的问题，请参考以下文章

Xml 音频列表播放器在移动设备上不起作用，并且自动播放不起作用

youtube.com 上的视频如何在 iOS 上自动播放

Youtube iframe“循环”不起作用

android webview youtube嵌入视频自动播放不起作用

使用 <iframe> Youtube 视频自动播放 - ?autoplay=1 不起作用

Bootstrap 4轮播上的hasClass不起作用