みかづきブログ その3

本ブログは更新を終了しました。通算140万ユーザーの方に観覧頂くことができました。長い間、ありがとうございました。

👆

引越し先はこちらです！

iOS10でYouTubeをインライン再生＆複数同時に再生するサイトをつくれるか検証する 📱

iOS YouTube JavaScript

結論

（2本目以降をミュートにすれば）できる！



kimizuka.hatenablog.com

昨日の検証 で、iOS10であればYouTubeをインライン再生することが難しくないことがわかりました。

kimizuka.hatenablog.com

以前、PC向けにYouTubeの動画を2本同時に再生するサイト をつくったことがあるのですが、これのスマホ版を実装することができるか検証しました。


検証1 複数のプレイヤーを埋め込む

DEMO

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

まずは複数プレイヤーの埋め込みを検証してみましたが、
基本的に同時に再生できる動画の数は1本ということがわかりました。
2本目を再生しようとすると、既に再生済みのビデオが一時停止状態となります。

しかし、色々試していくと、
複数同時に再生できないのではなく、音ありの動画は1本しか再生できないことがわかりました。
なので、2本目以降にミュートの設定さえしてあげれば複数同時再生ができそうです。

検証2

DEMO

http://jsrun.it/kimmy/QMWM
f:id:kimizuka:20170613191906p:plain

2本目をミュートにしつつ、ボタンイベントで2つのプレイヤーが同時に再生できるのかを試しました。
WiFiにつないでいれば2本ぐらいはさくさく観覧できそうです。

ソースコード

HTML
<div class="box">
    <div id="player1"></div>
    <div id="player2"></div>
</div>
<button id="btn">PLAY</button>
CSS
html {
    height: 100%;
}

body {
    margin: 0;
    height: 100%;
	background: radial-gradient(#000, #333);
	background-size: 4px 4px;
}

#player1, #player2 {
    width: 100%; height: 50%;
}

#btn {
    position: fixed;
    top: 10px; left: 10px;
}

.box {
    position: relative;
    width: 100%; height: 100%;
}

.box:after {
    display: block;
    position: absolute;
    top: 0; bottom: 0;
    left: 0; right: 0;
    content: "";
}

JavaScript

(function() {
    
    "use strict";
    
    var tag = document.createElement("script"),
        firstScriptTag = document.getElementsByTagName("script")[0],
        player1, player2;
    
    tag.src = "https://www.youtube.com/iframe_api";
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    
    function onYouTubeIframeAPIReady() {
        player1 = new YT.Player("player1", {
            width: 320,
            height: 240,
            videoId: "4HlVlmEDtpw",
            playerVars: {
//                autoplay: 1,
                controls: 0,
                disablekb: 0,
                fs: 0,
                iv_load_policy: 3,
//                loop: 1,
                modestbranding: 1,
                playsinline: 1,
                rel: 0,
                showinfo: 0
            },
            events: {
                "onReady": onPlayerReady,
                "onStateChange": onPlayerStateChange
            }
        });
        
        player2 = new YT.Player("player2", {
            width: 320,
            height: 240,
            videoId: "oYUW3_4FF0o",
            playerVars: {
//                autoplay: 1,
                controls: 0,
                disablekb: 0,
                fs: 0,
                iv_load_policy: 3,
//                loop: 1,
                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();
        }
    }
    
    document.getElementById("btn").addEventListener("click", function() {
        player1.mute();
        player1.playVideo();
        player2.playVideo();
    }, false);
    
    window.onYouTubeIframeAPIReady = onYouTubeIframeAPIReady;
    
})();

今回は以上です。

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

iOS YouTube JavaScript

結論

できる！



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を置けば、背景がムービーのサイトがスマホでも実現できそうですね。
こうなってくると、今後どんどんギガが減るサイトが増えるかもしれません。＾ ＾

iOS11ベータ版向けにつくったウェブコンテンツのデバックはSafari Technology Previewの手を借りると楽々 😀

iOS Mac JavaScript

最近、iOS11のSafari向けにコンテンツをつくって試してみることが多いのですが、
ウェブカメラをつかうコンテンツを試しているので実機で確認する必要があり、
ライトニングケーブルでMacと繋いでデバッグ しながら開発を進めたいのですが、
通常のSafariではうまくいかず、ひさしぶりにalertデバッグを多用しながら開発していました。



しかし、そんな僕のもとに救世主が！




f:id:kimizuka:20170608205410p:plain
Safari Technology Preview - Safari - Apple Developer



てってれー。



紫色のSafari。そう。人呼んで、 Safari Technology Preview です。

iPhoneとMacをライトニングケーブルで繋ぎ、
MacのSafari Technology Previewの「開発」から自分の端末を選択すれば、デベロッパーツールが使えるようになります。

本当に助かりました。 ＾ ＾
感謝の気持ちでいっぱいです。