移动浏览器上未加载YouTube视频

Question

我正在为我的网站使用一段视频，我已经将其上传到YouTube。我的视频必须在页面加载时自动播放，完成后循环，所以我使用YT Api来实现它。问题是，当我使用谷歌Chrome的移动设备模拟时，视频可以很好地发挥作用，但当我试图在实际的移动设备中加载我的页面时，YouTube试图加载视频，过了一段时间，我的视频超时，它警告我不要重新启动手机（不知道为什么，可能最好的猜测是翻译错误）。

这是我一直在使用的代码：

HTML

<div class="videoWrapper">
        <div id="player"></div>
    </div>

JavaScript

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', {
        height: '390',
        width: '640',
        videoId: 'XCZMvZBKClM',
        playerVars: { 'autoplay': 1, 'controls': 0, 'showinfo': 0 },
        events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
        }
    });
}
function onPlayerReady(event) {
    event.target.playVideo();
}
var done = false;
function onPlayerStateChange(event) {
    if (event.data === YT.PlayerState.ENDED) {
        player.playVideo();
    }
}
function stopVideo() {
    player.stopVideo();
}

可能不相关，但CSS

body {
    padding: 0;
    margin: 0;
    background: black;
}
.videoWrapper {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 25px;
    height: 0;
}
    .videoWrapper iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

作为一个细节，当我触摸视频时，它会全屏播放，流媒体也会正常启动。

Answer 1

在移动设备上无法自动播放视频/音频。

这是苹果公司引入的瘟疫，后来被大多数移动浏览器复制。

在iOS上的Safari（适用于包括iPad在内的所有设备）中，用户可能在蜂窝网络上，并按每个数据单元收费，预加载和自动播放被禁用。在用户启动之前，不会加载任何数据。这意味着在用户启动播放之前，JavaScript的play（）和load（）方法也处于非活动状态，除非play（或load）方法是由用户操作触发的。换句话说，用户启动的"播放"按钮有效，但onLoad="播放（）"事件无效。

https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html