Youtube Api playVideo method doesn't work on some mobile devices

I'm trying to create a mobile site where a YouTube video will play after clicking on an image.

I tested on multiple Android mobiles / versions and some not as intended.

I mean it stops when buffering and never reaches to play the video. Another thing I noticed is that the player works after the user starts the video, not programmatically. In more detail, if I show the YouTube player directly, the user clicks to play the video, and after that, press the button / image to play another video. It works.

I posted a test page here that I worked with 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);
 });
});

      

+3


source to share


1 answer


It looks like some of the functions you are using (player.playVideo ()) are disabled on mobile devices. In my case, after using player.playVideo () on some android devices, the video does not play even after clicking on the player

https://developers.google.com/youtube/iframe_api_reference?hl=zh-TW#Mobile_considerations



Autoplay and scenario replay

The HTML5 element, in some mobile browsers (like Chrome and Safari), only allows playback when triggered (like clicking on the player).

Due to this limitation, functions and options such as autoplay, playVideo (), loadVideoById () will not work in all mobile environments **

+3


source







All Articles