通过 iFrame API 以编程方式嵌入 youtube 视频无法在移动设备上播放

Question

我需要能够通过 iframe api 以编程方式将视频加载到元素中，并让它在移动设备上播放（iOS 6、iOS 7、最新的 android）。

这里是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

var ping = new VideoModel({
    videoId: 'qMD2Jifubto',
    start: 20,
    end: 28
});

function VideoModel(attributes) {

        this.attributes = {
            videoId: attributes.videoId,
            start: attributes.start,
            end: attributes.end
        }

        this.get = function(attr) {
            if (attr) {
                return this.attributes[attr]
            } else {
                return this.attributes
            }

        }

}

function onYouTubeIframeAPIReady() {

    player = new YT.Player('thumbnail-inner', {
        height: '100%',
        width: '100%',
        enablejsapi: 1,
        events: {
            'onReady': onPlayerReady
        },
        rel: 0,
        playerVars: {
            controls: 0,
            modestBranding: 1,
            showinfo: 0
        }

    });

}

function onPlayerReady(event) {
    event.target.loadVideoById({'videoId': ping.get('videoId'), 'startSeconds': ping.get('start'), 'endSeconds': ping.get('end'), 'suggestedQuality': 'large'});
}

这在台式机上完美运行，但对于移动设备（在 ios 和 android 上测试），YouTube 播放器会加载，但视频加载时显示“视频不可用”，或者只是黑屏。

您能帮忙在移动设备上完成这项工作吗？

Answer 1

如果用户交互不是问题，您可以在您的 html 文件（在 iframe 中）中设置一个等于 1 的自动播放属性。它适用于android。

    <iframe src="http://www.youtube.com/embed/#{video_id}?enablejsapi=1&autoplay=1"></iframe>

看起来 android 浏览器不响应 youtube api，尤其是 iframe 和 YTplayer api。它只是没有以编程方式启动。