Youtube Api playVideo方法在某些移动设备上不起作用(Youtube Api playVideo method doesn't work on some mobile devices)

 我正在尝试创建一个移动网站，点击图像后播放YouTube视频。 
 
 我已经在几款Android手机/版本上进行了测试，有些手机没有达到预期的效果。 
 
 我的意思是它停止缓冲，永远不会播放视频。 我注意到的另一件事是播放器在用户触发视频后播放而不是以编程方式播放。 更详细，如果我直接显示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);
 });
});

I am trying to create a website for mobile where after clicking on an image a youtube video to play.
 
I have tested on several Android mobile phones/versions and on some doesn't behaves as intended. 
 
What I mean is it stops at buffering and never reaches to play the video. Another thing that I noticed is that the player works after the user triggers the video to play and not programatically. More detailed if I directly show the youtube player, the user click to play video and afterward click a button/image to play another video this works.
 
I have posted here the test page that I worked with 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);
 });
});

原文：https://stackoverflow.com/questions/26658869