みかづきブログ その3

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

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

結論

(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;
    
})();

今回は以上です。