結論
(2本目以降をミュートにすれば)できる!
昨日の検証 で、iOS10であればYouTubeをインライン再生することが難しくないことがわかりました。
以前、PC向けにYouTubeの動画を2本同時に再生するサイト をつくったことがあるのですが、これのスマホ版を実装することができるか検証しました。
検証1 複数のプレイヤーを埋め込む
DEMO
まずは複数プレイヤーの埋め込みを検証してみましたが、
基本的に同時に再生できる動画の数は1本ということがわかりました。
2本目を再生しようとすると、既に再生済みのビデオが一時停止状態となります。
しかし、色々試していくと、
複数同時に再生できないのではなく、音ありの動画は1本しか再生できないことがわかりました。
なので、2本目以降にミュートの設定さえしてあげれば複数同時再生ができそうです。
検証2
DEMO
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; })();
今回は以上です。