【YoutubeAPI】 iPhoneやAndroidでplayVideo()が再生されず、読み込み中のままになる

jQuery

2016.02.01

先日の続きです。
YoutubeのプレーヤーAPIを使って簡単な再生プレーヤーを設置したのですが一部のスマホ端末で再生できない現象が出たので調査。

まず、やっていることはyoutubeプレーヤーの全面にプレイ画像を置き、クリックしたらプレイ画像が消え動画再生が始まるという、簡単な仕組み。
だけど、以下スマホブラウザでは動画が読み込み中のまま再生が始まらず、動画をタップしないと再生が始まらない現象でした。

以下が「×」がその現象が出て再生できなかった環境

Android	標準ブラウザ	×
Android	GoogleChome	○
iOS	safari	×

調べてみると、スマホ端末ではplayVideo()メソッドが禁止されているようでした。

なので、今回のケースでは、スマホ端末での場合

プレイ画像を表示しない
自動再生playVideo()を使わない

その為以下の処理を追加します。

$(document).ready(function () {
    var tag = document.createElement('script');
    tag.src = "http://www.youtube.com/iframe_api/";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    var youtubePlayer;
    var iOS = /(iPad|iPhone|iPod|Android)/g.test(navigator.userAgent);

    if(iOS){
        $(".wrap-img").css("display", "none");
    }

    window.onYouTubeIframeAPIReady = function () {
        youtubePlayer = new YT.Player('youtube-player', {
            height: '400',
            width: '800',
            videoId: 'ビデオID',
            playerVars: {
                showinfo: 0, //タイトルバーを非表示にする
                rel: 0, //関連動画を非表示にする
                wmode: 'transparent'
            }
        });
    };

    $(".wrap-img").click(function () {
        if (!iOS) {
            $(this).css("display", "none");
            youtubePlayer.playVideo();
        }
        return false;
    });

});