コピペで5分！javascriptで埋め込みmp4動画に再生/停止ボタンを追加するコード

はじめに

こんにちは、daimaです。
本日はコピペするだけで同じページ内の全てのvideoタグで埋め込んだmp4動画に
再生/停止ボタンを追加することができる便利なjavascriptコードをご紹介します。

ちなみに掲載のjsコードはjQueryなしのバニラjs。
動作確認済み環境はChrome(win、Android)、Safari(mac、iOS)、Firefox(win)、Edge(win)のそれぞれ最新版となっております。

デモとソースコード

  <div class="p-video">
    <div class="p-video__wrapper js-movie">
      <video id="video1" muted poster="" playsinline class="p-vision_movie__video js-movie__target">
        <source src="https://spreadsheep.net/wp-content/themes/simplicity2/images/demo/movie_smpl1.mp4" type="video/mp4" class="">
      </video>
      <div class="p-video__control __play js-movie__button">
        <img src="https://spreadsheep.net/wp-content/themes/simplicity2/images/demo/movie_arrow.svg" alt="再生" class="p-video__icon js-movie__button __play">
      </div>
      <div class="p-video__control __pause js-movie__button">
        <img src="https://spreadsheep.net/wp-content/themes/simplicity2/images/demo/movie_pause.svg" alt="停止" class="p-video__icon __pause">
      </div>
      
    </div>

    <div class="p-video__wrapper js-movie">
      <video id="video2" muted poster="" playsinline class="p-vision_movie__video js-movie__target">
        <source src="https://spreadsheep.net/wp-content/themes/simplicity2/images/demo/movie_smpl2.mp4" type="video/mp4" class="">
      </video>
      <div class="p-video__control __play js-movie__button">
        <img src="https://spreadsheep.net/wp-content/themes/simplicity2/images/demo/movie_arrow.svg" alt="再生" class="p-video__icon js-movie__button __play">
      </div>
      <div class="p-video__control __pause js-movie__button">
        <img src="https://spreadsheep.net/wp-content/themes/simplicity2/images/demo/movie_pause.svg" alt="停止" class="p-video__icon __pause">
      </div>
    </div>
  </div>

  .p-video{
    width: 80%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding:60px 0;
  }
  .p-video video{
    width: 100%;
  }
  .p-video__wrapper{
    position: relative;
    line-height: 0;
    margin-bottom: 40px;
  }
  .p-video__wrapper:last-child{
    margin-bottom: 0;
  }
  .p-video__icon{
    position: absolute;
    font-size: 20px;
    z-index: 2;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 30px;
    height: 35px;
    pointer-events:none;
  }
  .p-video__control{
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
  }
  .p-video__control.__pause{
    opacity: 0;
    pointer-events: none;
  }
  .p-video__wrapper.js-movie_active:hover .p-video__control.__pause{
    opacity: 1;
    pointer-events: auto;
  }
  .js-movie__button{
    cursor:pointer;
    transition:opacity 200ms ease-out;
  }

  .js-movie_active .p-video__control.__play{
    opacity: 0;
    pointer-events: none;
  }

    function VideoControl(){}
    videoControl = new VideoControl();
    videoControl.movie_list = [];

    function flagSwitch(id){

      var parent = videoControl.movie_list[id].address,
          target = videoControl.movie_list[id].address.querySelector("video");

      if(!videoControl.movie_list[id].active){
        parent.classList.add("js-movie_active");
        target.play();
        videoControl.movie_list[id].active = true;
      } else {
        parent.classList.remove("js-movie_active");
        target.pause();
        videoControl.movie_list[id].active = false;
      }
      
    }

    var myClass = document.getElementsByClassName("js-movie__button");
    for (var i = 0; i < myClass.length; i++) {
      var parent = myClass[i].closest('.js-movie');
      var video = parent.querySelector('.js-movie__target');
      var statement = {
        active : false,
        address : parent
      };
      parent.dataset.vide_no = i;
      videoControl.movie_list.push(statement);

      myClass[i].addEventListener('click',function(){
        var id = this.closest('.js-movie').dataset.vide_no;
        flagSwitch(id);
      });

      video.addEventListener('ended',function(){
        var id = this.closest('.js-movie').dataset.vide_no;
        flagSwitch(id);
      });

    }

解説と使用方法

ここでやっていることは
文字に起こしてみるととてもシンプルです。

また上記の2の時点において、
ターゲットの親に対してビデオが現在再生中か
停止中かを判別するためのクラスの切り替え処理も同時に行っており、
再生/停止ボタンの表示切り替えは
このクラスを目印としたCSS処理によって実現しています。

次にこれの使用法についてですが
まず上記のjavascriptコードとcssコードをご自身のコンテンツ内に添付し、
続いて「js-movie」「js-movie__target」「js-movie__button」の
３つの専用コントロール用クラスをそれぞれ以下の要領で追記してください。

・「js-movie」・・・　「js-movie__target」と「js-movie__button」の共通の親となる要素に付与
・「js-movie__target」・・・再生/停止ボタンを付けたいvideo要素に付与
・「js-movie__button」・・・再生/停止ボタンに付与

もし上記の説明で分かり辛ければ
先に記載したサンプルのHTMLデータと見比べてみてください。

ここまでの過程が完了すれば、
既に動画の再生/停止ロジックは実現できていると思いますので、
あとはの再生/停止ボタンの画像データを
お好みのものに差し替えて頂ければ実装は完了です。

もし今回ご紹介したコードが上手く動かなかったり、
何か不都合があればお問い合わせフォームか
当記事のコメント欄にメッセージをお送りください。

時期はお約束できませんが
なるべくお返事させていただきます。

それでは。