knowledge base

マークアップ/フロントエンドエンジニアのWEB制作における備忘録です。平日はWEB屋、休日は社会人劇団の主宰・劇作家をしています。

YouTubeの埋め込み再生で、警告メッセージが出る

javascript

モバイルでは自動再生は行わない

YouTube Iframe Player APIを使用して、埋め込み動画を動的生成したところ、「すぐに再生が開始しない場合は、端末を再起動してください。」というメッセージが表示されるとともに、動画のローディングが終わらないという現象が起こりました。

f:id:ShinImae:20160928145647p:plain

ちなみに、このメッセージが表示されるのは、スマートフォンまたはタブレット端末においてのみです。 

どうやら調べてみたところ、下記記事のとおりJavascriptで自動再生するよう制御していたことが原因であったようです。

iframe埋め込み版 YouTube Player API | YouTube API プログラミング解説

実のところこの案件はレスポンシブ対応でして、さらに申しますとPCのときは自動再生をするという要件でした。その設定がモバイルでも生きてしまったのが要因であったようです。

ということで下記のように、モバイル端末でのアクセス時は自動再生を止めるようロジックを組むことで対応するのがセオリーなようです。

if(isDesktop) ytplayer.playVideo();

※変数isDesktopにはユーザーエージェントを判別した真偽値が、変数ytplayerにはYouTube iframe APIを用いて生成されたオブジェクトが格納されているという前提です。

そもそもモバイル端末では、YouTubeや埋め込みVideoはブラウザの仕様上、自動再生ができません。それなのに（結果的に）無理やり自動再生を行うようなことになってしまい、今回のようなことになってしまったものと思われます。

2016年現在、必ず再生ボタンを押さないと再生できないようになっているらしいので、その点はクライアントにもご理解いただく必要があります。

埋め込み動画のインライン再生について

先ほど、自動再生ができないと書きましたが、実のところインライン再生もできません。

もっと厳密に言いますと、iOS Safariでのみインライン再生は不可です（必ず別窓が開いて再生されます）。
このような記事があり、currentTimeを制御することで再生しているように見せかけていますが、検証したところAndroid端末では動作しませんでした（おそらくブラウザの仕様によるものかと思います）。

qiita.com


ということで、動画のインライン再生をどうしても行いたい場合は、iOSかAndroidかでロジックを分ける必要がありますが、Windows系やBlackberryは？という範囲にまで話が及んでしまうと検証の工数が膨大になってしまうので、 結論として動画をコマ撮り画像に変換し、Canvasを用いたアニメーションにて実装すればおおむねどの端末でも狙い通りの挙動が実装できると思います。

 

※ちなみにスプライトアニメーションでも対応はできますが、iOS Safariでは２メガ以上の画像を背景として読み込めないという問題があります。また、GIFアニメも最近では表示できるブラウザが増えてきましたが、まだまだすべての端末で対応できている状況ではなく、そもそも対応していても動きがカクついている場合が多いです。そのように考えると、Canvasによる実装が最も堅実であるという結論に達しています（個人的な主観ですが）。

shinimae.hatenablog.com

YouTube Iframe Player APIの利用について

YouTube Iframe Player APIの利用方法についても、備忘録として以下にまとめます。

大きく分けて２通りありますので、サイト特性に応じて使い分けるのがよいでしょう。

iframeを動的生成して利用する場合

①にてAPIを読み込んだのち、②でYTオブジェクトを生成します。onYouTubeIframeAPIReadyという関数名はAPI側より指定されているため、名前を変えることはできません。対象のIDを持つDIVが、そのまま同IDを持つiframeに置き換わりますので、動画を制御できるタイミング（onReadyイベント発火時）になったら③にて好きなように制御してください。

■生成前

<div id="player"></div>

■生成後

<iframe id="player" src="hogehoge"></iframe>

以下はJavascriptのソースです。

//プレイヤーオブジェクト格納用
var ytplayer = {};

//① YouTube Player API の読み込み
var tag = {}
var firstScriptTag = {};
tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);  

//②APIを読み込んだら動画ID、生成元のDOM（ID属性を第一引数にてわたしています）を指定してYT.Playerオブジェクトを生成
var onYouTubeIframeAPIReady = function(){
    var id = 'hogehoge';
    ytplayer = new YT.Player('player', {
        width: '640',
        height: '390',
        videoId: id,
        events: {
            'onReady': onPlayerReady
        },
        playerVars: {
            'modestbranding': 1,
            'autohide': 1,
            'controls': 1,
            'showinfo': 0,
            'rel': 0
        }
    });
}

//③動画の制御
var onPlayerReady = function(e){
    //またはe.target.playVideo()でも可
    ytplayer.playVideo();
}

詳細については、下記公式リファレンスも併せてご参照ください。

developers.google.com

ソース上のiframeにパラメータを渡して利用する場合

iframeの読み込み先のパラメータに「enablejsapi=1」という値を追加します。

<iframe id="player" src="https://www.youtube.com/embed/hogehoge?enablejsapi=1&rel=0&showinfo=0&controls=1&autohide=1&modestbranding=1" frameborder="0" allowfullscreen></iframe>

iframeの読み込み完了のタイミングで、当該iframeのID属性を引数にしてYT.Playerオブジェクトを生成します。

$(document).ready(function(){
  //プレイヤーオブジェクト格納用
  var ytplayer = {};
  $('#player').on('load', function(){
     var id = $(this).attr('id');
     ytplayer = new YT.Player(id);
     ytplayer.playVideo();
  });
});

YouTube APIには動画を制御するための豊富な機能が提供されています。これらの機能を使い分けて、柔軟な実装が可能となっています。