使用 youtube api 在移动设备上禁用 youtube 视频播放器答案

【问题标题】：Disable youtube video player on mobile using youtube api使用 youtube api 在移动设备上禁用 youtube 视频播放器
【发布时间】：2016-12-31 18:05:33
【问题描述】：

我正在使用带有这个 javascript/html 代码的 youtube api：

<div class="screen ${sVideo.options.muted ? 'mute' : '' @ context='styleString'}" id="ytbg-${sVideo.id}" data-autoplay="${sVideo.options.autoplay ? 'true' : 'false'}" data-loop="${sVideo.options.loop ? 'true' : 'false'}" data-muted="${sVideo.options.muted ? 'true' : 'false'}" data-videoid="${sVideo.src}"></div>

var tag = document.createElement('script');
    tag.src = 'https://www.youtube.com/player_api';
var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var tv,
    playerDefaults = {autoplay: 0, autohide: 1, modestbranding: 1, rel: 0, showinfo: 0, controls: 0, disablekb: 1, enablejsapi: 0, iv_load_policy: 3, loop: 0};


function onYouTubePlayerAPIReady() {
    $("div[id^=ytbg-]").each(function(index, element){
        if($(element).data("videoid")) {
            var videourl = $(element).data("videoid");
            var muted = $(element).data("muted");
            var autoplay = $(element).data("autoplay");
            var loop = $(element).data("loop");
            var id = $(element).attr('id');
            playerDefaults.autoplay = autoplay ? 1 : 0;
            playerDefaults.loop = loop ? 1 : 0;
            if(!tv) {
                tv = {};
            }
            tv[videourl] = {
                videoObject: {},
                vid: {'videoId': videourl, 'suggestedQuality': 'default'},
                mute: muted
            };
            tv[videourl].videoObject = new YT.Player(id, {events: {'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange}, playerVars: playerDefaults, width: '100%', height: '100%'});
        }
    });
}


function onPlayerReady(event) {
    if(!tv) return;
    var iframe = event.target.getIframe();
    var videourl = $(iframe).data("videoid");
    if(!tv[videourl]) return;
    if(!tv[videourl].videoObject) return;
    tv[videourl].videoObject.loadVideoById({videoId: videourl, suggestedQuality:'default'});
    if(tv[videourl].mute) {
        tv[videourl].videoObject.mute();
    }
}
function onPlayerStateChange(e) {
    var iframe = e.target.getIframe();
    var id = $(iframe).attr('id');
    var videourl = $(iframe).data("videoid");
    if (e.data === 1) {
        $('#' + id).addClass('active');
    } else if (e.data === 0){
        tv[videourl].videoObject.seekTo(tv[videourl].vid.startSeconds);
    }
}

我需要知道如何在分辨率为移动设备时禁用播放器。有没有办法禁用播放器并再次启用它？

【问题讨论】：

标签： javascript youtube youtube-api

【解决方案1】：

您可以使用playerVars (object)，该对象的属性标识player parameters，可用于自定义播放器。

var player;

function onYouTubeIframeAPIReady() {
player = new YT.Player('video-placeholder', {
width: 600,
height: 400,
videoId: 'Xa0Q0J5tOP0',
playerVars: {
'autoplay': 0,
'autohide': 1, 
'modestbranding' : 1,
'rel' : 0

},
events: {
onReady: initialize
}
});
}

有关更多信息，请查看此tutorial 和相关SO question。

【讨论】：