01. はじめに

こんにちは、エンジニアのdoriです。開発で「videoタグを制御したい...しかも複数」となったので色々調べました。しかし、どこも１つのvideoタグを制御する方法ばかり。そこでちょこっと工夫すれば複数のvideoタグを制御できたので、今回はその方法を共有したいと思います。

01-2. 前提

・今回はVue.jsを用いた方法で実践しております
・Vue.jsやjavascriptをある程度理解している人向けです。

02. 基本の処理の流れ

大きな処理の流れを知っておかないとわかりにくいと思うので、まずは大きな処理の流れを書いておきます。
１.動画をクリックした際に、その動画のDOMをクリックイベントの引数に渡す
２.1で渡ってきたDOMからvideoタグのidを取得
３.2で取得したidをもとに、その動画（videoタグ）にあるクラスを取得
４.3で取得したクラスで、特定のクラスがあれば、動画を再生、停止する

このような流れで実装していきます。（ここでわかりにくかったら次へと話を進めていただければ🙏）

03-1. 手順1：動画をクリックした際にその動画のDOMをクリックイベントの引数に渡す

先にコードの方だけ載せておきます

//.vueファイル。好きなところに以下コードをコーディングしてもらえれば
<video src=[動画URL], 
       width=[各自設定],
       height=[各自設定],
       id="video1",
       @click="operateMovie($event)"//クリックした際に呼ばれるメソッド
</video>

●ポイント
・「@click=」の部分は実際は「v-on:click=」です。v-onディレクティブを短縮した形ですね。
・「operateMovie」はのちに実装する関数名です。次が肝なのですが、その関数の引数である「$event」がメソッドにDOMイベントを渡す変数になっております。詳しくは以下公式サイトにのっています。
このようにすることで、クリックした要素のIDを取得できるようになり、それをもとに複数動画の制御が可能になります。
https://jp.vuejs.org/v2/guide/events.html

つまり現状のコードは「videoタグをクリックしたら関数operateMovieの引数にDOMイベントを渡す」というような形になっています。

03-2. 手順2：手順1で渡ってきたDOMからvideoタグのidを取得

methods: {
    operateMovie: function (element) {
      const videoId = element["target"]["id"];
      const videoElement = document.getElementById(videoId);

上記は.vueファイルに記載したものです。
●ポイント
・element["target"]["id"]でvideoタグのidを取得しています。（どうしてこのような書き方になっているかを知りたければ、コンソールでelementの中身を出力させてみるとよい）

03-3. 手順3：手順2で取得したidをもとに、その動画（videoタグ）にあるクラスを取得

methods: {
    operateMovie: function (element) {
      const videoId = element["target"]["id"];
      const videoElement = document.getElementById(videoId);
      const elementClass= videoElement.classList;//追加したコード

●ポイント
「.classList」とすることで、その要素のクラスを全て取得できます。

03-4. 手順4：手順3で取得したクラスで、特定のクラスがあれば、動画を再生、停止する

methods: {
    operateMovie: function (element) {
      const videoId = element["target"]["id"];
      const videoElement = document.getElementById(videoId);
      const elementClass= videoElement.classList;

      //以下追加コード
      if (elementClass.contains("play") == true) {
        videoElement.pause();
        elementClass.add("pause");
        elementClass.remove("play");
      } else if (elementClass.contains("pause") == true) {
        videoElement.play();
        elementClass.add("play");
        elementClass.remove("pause");
      } else {
        videoElement.play();
        elementClass.add("play");
      }
}

ポイント
・特定のクラス「play」「pause」があるかないかによって、動画の「再生」「停止」を使い分ける。（containsメソッドについては今回は触れません🙏）（クラス名は別にお好きなもので問題なし）
今回では「クラスにplayがあれば動画を停止」「クラスにpauseがあれば動画を再生」「何もなければクラスにplayを付与」となっています。

つまり大まかな流れとしては、
動画を最初にクリック
↓
最初はクラス名に「play」「pause」がないので、ビデオが最初にクリックされたとわかる。つまりそのクリックは再生と解釈。→クラスに「play」を付与。動画を再生。
↓
動画をクリック
↓
クラス名に「play」がある。つまり動画が再生中であるとわかる。再生中にクリックされたのだからそのクリックは停止と解釈される。→クラスに「pause」を付与し、「play」のクラス名は削除。動画を停止。

となっています。

これで完成。あとは複数のvideoタグを配置して試してみてください。それぞれの動画がしっかりと制御されているのがわかります。

05. さいごに

ここまで見てくださりありがとうございました。今回のポイントは特定のclassの有無によって異なる制御をするです。
色々なところで使えそうな技ですね。それではまた。