みかづきブログ その3

3ヶ月つづけてみました。

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

結論

できる!



kimizuka.hatenablog.com

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

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

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

なので、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;
    
})();

wmode を "transparent" にするかどうかは迷いましたが、
IE8に対応しなければ、もうおそらくいらないのではないかと思い外しました。
(ドキュメントからも消えていますし)

kimizuka.hatenablog.com


DEMO

http://jsrun.it/kimmy/uBdE
f:id:kimizuka:20170612172046p:plain

※ iOS10でご観覧ください

無事に、インライン再生&自動再生&ループ再生が実現できましたね。
今回は見送りましたが、この上にDOMを置けば、背景がムービーのサイトがスマホでも実現できそうですね。
こうなってくると、今後どんどんギガが減るサイトが増えるかもしれません。^ ^