複数動画を一括操作する方法なんて、ありませんよね？

Question

質問したいこと

ワードプレスの記事に複数の動画が貼ってあり、それを１つの調整バーによって、再生、停止、音量調整、をしたいのですが、そのような方法はありますでしょうか？

jQueryプラグインなどいくつか見たものの、それらしきものはありませんで、質問させて頂きました。

ワードプレスのembedに対応した動画（youtubeはもちろん、vimeoやsoundcloudなど）が並んでいて、それら全てを一括して操作できるバーをフッターにfixedしたいという目的です。

イメージとしては、

――　――　――　――
動画　動画　動画　動画　
――　――　――　――

―――――――――――
再生▶　停止〓　音量▲▼　
―――――――――――

と、このように４つの動画を全て操作できる感じです。

全サイト対応が難しければ、たとえばyoutube再生時にはyoutubeのバーが出現し、soundcloudを再生したらyoutubeが停止しバーも消えて、soundcloudのバーが出現する。というようなjavascriptになるでしょうか。

どのようにしたら良いか、ご意見やヒントなど（コードでも笑）歓迎です。

情報お待ちしております。
宜しくお願い致します。

Answer 1

これはいかがでしょう．

<div>
  <video src="s.mov"></video>
  <video src="s.mov"></video>
  <video src="s.mov"></video>
  <video src="s.mov"></video>
</div>
<footer>
  <button onclick="play()">PLAY</button>
  <button onclick="pause()">PAUSE</button>
  <button onclick="replay()">REPLAY</button>
  <button onclick="volup()">VOL+</button>
  <button onclick="voldown()">VOL-</button>
</footer>

let videos = document.getElementsByTagName('video');
const play = () =>
{
    for (let i = 0, v; v = videos[i]; i++) {
          v.play();           // 再生
    }
}
const pause = () =>
{
    for (let i = 0, v; v = videos[i]; i++) {
          v.pause();           // 停止
    }
}
const replay = () =>
{
    for (let i = 0, v; v = videos[i]; i++) {
          v.currentTime = 0;  // 初めから
          v.play();           // 再生
    }
}
const volup = () => 
{
	for (let i = 0, v; v = videos[i]; i++) {
		v.volume += 2.5;  //音量を上げる
	}
}
const voldown = () => 
{
	for (let i = 0, v; v = videos[i]; i++) {
		v.volume -= 2.5;  //音量を下げる
	}
}