videoタグの動画埋め込み時に、画面クリックで再生、ポーズを設定する方法

内容

videoタグでの動画埋め込み時は、通常コントローラーの再生ボタン等でしか操作ができない。ただそれだとyoutubeのように動画画面クリックで再生・ポーズに対応するデバイスに慣れている利用者にはUI的にイマイチだと思い方法を模索した。

実装

動画画面全体を覆う空divを作り、それにjavascriptで再生・ポーズのアクションを割り当ててるだけ。
気をつけた点は、、、

• divで動画全体を覆う際に通常のコントローラーも覆ってしまうと、コントローラーでの操作ができなくなるでその部分のみ覆わないように調整
• 再生、ポーズの動作の違いをstatus変数+ifで調整

html

<div class="video-wrap">
    <video  muted controls poster="test-movie.jpg" id="video">
      <source src="test.mp4" type="video/mp4" />
      <img src="test-movie.jpg" />
    </video>
    <div class="video-btn" id="video-btn"></div>
</div>

css

.video-wrap {
    position: relative;
}
.video-btn {
    content: "";
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:40px; /*コントローラー分下部に余白を*/
    cursor: pointer;
}

javascript

    const video = document.querySelector('#video');
    const video_btn = document.querySelector('#video-btn');
    let is_playing = false;

    video_btn.addEventListener('click', () => {
      if (!is_playing) {
        video.play();
        is_playing = true;
      } else {
        video.pause();
        is_playing = false;
      }
    });