iOS10でYouTubeをインライン再生＆自動再生＆ループ再生を試してページの背景がムービーのサイトをつくれるか検証する 📱

結論

できる！

kimizuka.hatenablog.com

以前、iOS10のビデオタグの挙動を調べましたが、
videoタグを直接使う機会よりも、YouTubeをつかう機会の方が圧倒的に多いため、YouTubeの挙動を調べてみました。

iOS10のビデオに関しての仕様を整理すると、

playsinline属性をつければインライン再生ができる
無音であれば自動再生できる

なので、APIでYouTubeのプレイヤーをつくるときに、
playsinline属性をつけるオプション、無音にするオプションがあれば、インライン再生＆自動再生が実現できそうです。
また、上記に加えてループ再生も可能になると、PC版のサイトでよくある、背景が動画みたいなページがつくれちゃったりすると思うので、
同時に調べることにします。

ではでは早速、ドキュメントをみながら実装してみましょう。

https://developers.google.com/youtube/player_parameters?playerVersion=HTML5

ソースコード

HTML

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

JavaScript

(function() {
    
    "use strict";
    
    var tag = document.createElement("script"),
        firstScriptTag = document.getElementsByTagName("script")[0];
    
    tag.src = "https://www.youtube.com/iframe_api";
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    
    function onYouTubeIframeAPIReady() {
        new YT.Player("player", {
            width: 320,
            height: 240,
            videoId: "Ayqq7qSOxV8",
            playerVars: {
//                autoplay: 1, // 再生時にミュートしてないといけないので、パラメータではなくメソッドを利用する
//                loop: 1, // プレイリストにしか聞かないのでonPlayerStateChange内でplayVideoを叩く
                playsinline: 1 // インライン再生を指定
            },
            events: {
                "onReady": onPlayerReady,
                "onStateChange": onPlayerStateChange
            }
        });
    }
    
    function onPlayerReady(evt) {
        evt.target.mute(); // 自動再生できるようにミュートする
        evt.target.playVideo(); // ミュートしてから再生のメソッド叩く
    }
    
    function onPlayerStateChange(evt) {
        if (evt.data === YT.PlayerState.ENDED) { // 再生終了を検知
            evt.target.playVideo();
        }
    }
    
    window.onYouTubeIframeAPIReady = onYouTubeIframeAPIReady; // iframeのreadyをグローバルにする

})();

最低限だとこんな感じですが、
ページ背景に使いやすいように、コントロールを不可にしたり、関連動画を非表示にしたり、YouTubeのロゴを消してみたりするために、
更にパラメーターを追加してみました。

JavaScript

(function() {
    
    "use strict";
    
    var tag = document.createElement("script"),
        firstScriptTag = document.getElementsByTagName("script")[0];
    
    tag.src = "https://www.youtube.com/iframe_api";
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    
    function onYouTubeIframeAPIReady() {
        new YT.Player("player", {
            width: 320,
            height: 240,
            videoId: "Ayqq7qSOxV8",
            playerVars: {
                controls: 0, // UIを非表示にする
                disablekb: 0, // キーボードによる操作を不可にする
                fs: 0, // フルスクリーンボタンを消す
                iv_load_policy: 3, // アノテーションを非表示にする
                modestbranding: 1, // ロゴを非表示にする
                playsinline: 1,
                rel: 0, // 関連動画を非表示にする
                showinfo: 0 // インフォメーションを非表示にする
            },
            events: {
                "onReady": onPlayerReady,
                "onStateChange": onPlayerStateChange
            }
        });
    }
    
    function onPlayerReady(evt) {
        evt.target.mute();
        evt.target.playVideo();
    }
    
    function onPlayerStateChange(evt) {
        if (evt.data === YT.PlayerState.ENDED) {
            evt.target.playVideo();
        }
    }
    
    window.onYouTubeIframeAPIReady = onYouTubeIframeAPIReady;
    
})();