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

时间:2016-01-05 12:18:59

标签: javascript video mobile youtube youtube-api

我正在为我的网站使用素材,并将其上传到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%;
    }

作为一个细节,当我触摸视频时,它会全屏播放并且正常播放。

1 个答案:

答案 0 :(得分:1)

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

这是苹果公司引入的瘟疫,也是大多数移动浏览器复制的。

  

在iOS上的Safari(适用于所有设备,包括iPad)中,用户可能位于蜂窝网络上并按数据单元收费,因此会禁用预加载和自动播放。在用户启动数据之前不会加载任何数据。这意味着JavaScript play()和load()方法在用户启动回放之前也处于非活动状态,除非用户操作触发play()或load()方法。换句话说,用户启动的播放按钮可以工作,但是onLoad =&#34; play()&#34;事件没有。

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