Youtube API 播放视频方法在某些移动设备上不起作用

Question

我正在尝试为移动设备创建一个网站，点击图像后可以播放youtube视频。

我已经在几个安卓手机/版本上进行了测试，有些手机/版本的性能没有达到预期。

我的意思是，它停止在缓冲，从来没有达到播放视频。我注意到的另一件事是，播放器是在用户触发视频播放后工作的，而不是程序化的。更详细的是，如果我直接显示youtube播放器，用户点击播放视频，然后点击按钮/图像播放另一个视频，这是有效的。

我在这里发布了我与JsFiddle 合作的测试页面

$(document).ready(function () {
// Caching jQuery objects
var $body = $('body'),
    $log = $('#log'),
    $yt = $('#ytplayer'),
    $ytwrap = $('#ytwrapper'),
    $choices = $('#choices');

// This code loads the YouTube API
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
$body.append(tag);
// This will become the player object when the API is ready
var player;
// See what kind of device we're using
var userAgent = navigator.userAgent.toLowerCase();
var isAndroid = userAgent.indexOf('android') > -1;
var isIpad = userAgent.indexOf('ipad') > -1;
var isIphone = userAgent.indexOf('iphone') > -1;

window.onYouTubeIframeAPIReady = function onYouTubeIframeAPIReady() {
    player = new YT.Player('ytplayer', {
        videoId: videos[0],
        playerVars: {
            allowfullscreen: 'allowfullscreen',
            playsinline: 0
        },
        events: {
            'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
        }
    });

    window.player = player;
    //hide player 
  slidePlayer(false);
};

function onPlayerStateChange(event) {
    // When a video starts playing,
    // enable the fake fullscreen mode on Android & iPad
    if (event.data == YT.PlayerState.PLAYING) {
        if (isIpad) {
            fakeFullScreen(true);
        } else if (isAndroid) {
            fakeFullScreen(true);
        }
    }
    // On pause: hide the player, show thumbs
    if (event.data == YT.PlayerState.PAUSED) {
        if (isAndroid) {
            // Exit fullscreen
            fakeFullScreen(false);
            // Scroll back to choices
            window.scrollTo(0, playerTop);
        } else if (isIpad) {
            fakeFullScreen(false);
            window.scrollTo(0, playerTop);
        } else if (isIphone) {
            slide(false);
        }
    }
}

$('#vstImageAd .imageWrap img').click(function (e) {
    e.preventDefault();
    var $this = $(this);
    if (player) {
        $this.css("display", "none");
        slidePlayer(true);
        player.playVideo();
    }
});

// When a thumb image is pushed, start the video
$('#choices .playthumb img').click(function (e) {
    var $this = $(this),
        nr = parseInt($this.data('nr'));
    if (!videos[nr]) nr = 1;
    player.loadVideoById(videos[nr]);
    // Hide the thumbs
    slide(true);
 });
});

Answer 1

看起来您正在使用的某些功能（player.playVideo（））在移动设备中被禁用。在我的情况下，在一些Android设备中使用player.playVideo（）后，即使在点击播放器后，视频也不会播放

https://developers.google.com/youtube/iframe_api_reference?hl=zh-TW#移动_考虑

自动播放和脚本播放

HTML5元素，在某些移动浏览器中（如Chrome和Safari），只有在由用户交互（例如敲击播放器）。

由于这种限制，playVideo（）、loadVideoById（）不能在所有移动环境中工作**