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文件中设置一个等于1的自动播放属性（在iframe中）。它适用于android。

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

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

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

1 个答案: