YouTubeの複数動画を配置して同時に再生開始

2019年02月03日
YouTubeの複数の動画を同時に一斉に再生したいということがありました。
2つの動画くらいならブラウザを2つ並べて素早く操作すれば、ほぼ同時に再生開始できますが、7つの動画を同じタイミングで一斉に再生開始する必要があり、手動ではほぼ不可能でした。

具体的には、
QTTA(クッタ) × GEMS COMPANY「バレンタインイブ」 - YouTube
の動画を7つ並べて再生したかったです。
スマホを7つ並べている動画もありますが、こういうイメージです。

QTTA(クッタ) × GEMS COMPANY「バレンタインイブ」

複数の動画を同期させる必要があるので、一気に複数のYouTube動画を同時に再生させる方法を考えてみました。

スポンサーサイト

基本的な考え方


色々と考えたのですが、
(1)ひとつのHTMLの中に複数の埋め込みYouTube動画を配置し
(2)ボタン一つで複数の動画を一気に再生する
という方法でいくことにしました。

(1)ひとつのHTMLの中に複数の埋め込みYouTube動画を配置


まずHTMLで、複数のYouTube動画を埋め込みリンクで配置します。
各YouTube動画の「共有」ボタンの「埋め込む」で、HTMLを取得します。
<iframe width="560" height="315" src="https://www.youtube.com/embed/dNZoq3_cqZs" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

で、これを適当に並べるだけです。
(ただし、あとで修正が必要になります。)

(2)ボタン一つで複数の動画を一気に再生する


これが意外と苦戦しました。
結局、Javascriptで、YouTubeのiframeのAPIを応用することにしました。
iframe 組み込みの YouTube Player API リファレンス  |  YouTube IFrame Player API  |  Google Developers

最初は、このAPIをそのまま使おうと思ったんですが、複数の動画を配置するところがめんどくなったので、PostMessageで制御する方式にしました。

(2-1)動画のURLに?enablejsapi=1を付加


まず、さっき配置したタグのsrcの最後に
?enablejsapi=1
を付けることで、YouTube Player API が有効になります。

例:
<iframe width="560" height="315" src="https://www.youtube.com/embed/dNZoq3_cqZs?enablejsapi=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

(2-2)iframeタグにidとclassを設定


あとで対象のiframeを特定するために、idとclassを設定しておきます。
例:
<iframe class="video" id="YouTube-player1" width="560" height="315" src="https://www.youtube.com/embed/dNZoq3_cqZs?enablejsapi=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

(2-3)PostMessageでYouTubeのiframeにAPIメッセージを送る


次に、適当にボタンを配置して、ボタンが押されたらPostMessageでAPIの各メッセージをPostするだけです。
<button id="play">再生</button>
<button id="pause">一時停止</button>
<button id="stop">終了</button>
<script>
$(function(){
$("#play").on("click", function(){
videoControlAll("mute");
videoControl(0,"unMute");
videoControlAll("playVideo");
});

$("#pause").on("click", function(){
videoControlAll("pauseVideo");
});

$("#stop").on("click", function(){
videoControlAll("stopVideo");
});

function videoControl(i,action){
$('.video')[i].contentWindow.postMessage('{"event":"command","func":"'+action+'","args":""}', '*');
}
function videoControlAll(action){
$('.video').each(
function(i,elm){
elm.contentWindow.postMessage('{"event":"command","func":"'+action+'","args":""}', '*');
}
);
}

});
</script>

※ jqueryを使っているので、jqueryを読み込んでおく必要があります
例:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

最後に


で、できたのがこれ。
QTTA(クッタ)× GEMS COMPANY「バレンタインイブ」連動

やってみるとわかりますが、動画のロードや読み込みの時間の影響で、再生がなかなか同期しないです。
最後まで一度、再生し終わってから、また再生するとタイミングが大体合います。

また、スマホだとパワー不足なせいか、7つ同時再生すると、とどきどき止まりがちです。

参考にしたサイト
【JS】YouTubeのiframe埋め込み動画をJSでコントロール - Qiita


スポンサーサイト

posted at 20:05 | Comment(0) | プログラミング
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント: