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

Question

我正在为我的网站使用一段视频，并将其上传到 YouTube。我的视频必须在页面加载时自动播放并在完成后循环播放，所以我使用了 YT Api 来实现它。问题是，当我使用谷歌浏览器的移动设备模拟时，视频可以完美地解决问题，但是当我尝试在实际的移动设备中加载我的页面时，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

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

这是一种由 Apple 引入并被大多数移动浏览器复制的瘟疫。

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

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