【PR】を含みます。

フロントエンド

【JavaScript】videoタグにオリジナルの再生ボタンを設置する方法

JavaScript videoタグにオリジナルの再生ボタンを設置する方法

動画プレイヤーをWebサイトに設置する際、videoタグの再生ボタンのデザインがブラウザによってバラバラだったり、場合によっては期待通りに表示されないこともあります。

見た目や操作性をサイトのデザインに合わせて統一したい…そんなときに活躍するのが「オリジナル再生ボタン」の実装です。

本記事では、JavaScriptを使って誰でも簡単に設置できる、オリジナルの再生ボタンの作り方を解説します。

コピペで使えるサンプルコードも用意しているので、ぜひ実務や学習に役立ててください。

前提

videoタグの再生ボタンは、動画のコントロールバーを表示するためのcontrols属性によって表示されます。

しかし、ブラウザによって再生ボタンのデザインが違っていたり、Chromeだと再生ボタンが表示されないなどの差異があります。

この記事では、JavaScript使用して再生停止中はcontrols属性を削除、再生中はcontrols属性を付与して、オリジナル再生ボタンの表示・非表示を制御しています。

【サンプル】videoタグにオリジナルの再生ボタンを設置

再生ボタン

【実装コード】videoタグにオリジナルの再生ボタンを設置

HTML
Copy
<div class="movie">
  <video class="movie_video" src="動画URL" playsinline></video>
  <img class="movie_btn" src="再生ボタン画像URL" alt="再生ボタン">
</div>
CSS
Copy
.movie {
  display: inline-block;
  position: relative;
}
.movie_video {
  max-width: 100%;
  height: auto;
}
.movie_btn {
  width: 60px;
  height: 60px;
  border-radius: 100%;
  overflow: hidden;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
}
JavaScript
Copy
// 対象のvideoタグを取得
let video = document.querySelectorAll('.movie_video');
// フルスクリーン判定
let fullscreenFlag = false;
document.addEventListener('fullscreenchange', handleFullscreenChange);
document.addEventListener('webkitfullscreenchange', handleFullscreenChange); // Safari用
document.addEventListener('mozfullscreenchange', handleFullscreenChange); // 古いFirefox用
function handleFullscreenChange() {
  const isFullscreen = document.fullscreenElement ||
                       document.webkitFullscreenElement ||
                       document.mozFullScreenElement;
  if (isFullscreen) {
    // フルスクリーン時
    fullscreenFlag = true;
  } else {
    // フルスクリーン解除時
    fullscreenFlag = false;
    video.forEach(function(element) {
      if (element.paused) {
        element.removeAttribute('controls');
      }
    });
  }
}
video.forEach(function(element) {
  // 再生時の処理
  element.addEventListener('playing', function() {
    this.closest('.movie').querySelector('.movie_btn').style.display = 'none';
    this.setAttribute('controls', '');
  });
  // 再生停止時の処理
  element.addEventListener('pause', function() {
    if (!this.seeking) {
      if (!fullscreenFlag) {
        this.removeAttribute('controls');
      }
      this.closest('.movie').querySelector('.movie_btn').style.display = 'block';
    }
  });
  // フルスクリーン以外でvideoタグクリック時に、再生されてなければ再生開始
  element.addEventListener('click', function() {
    if (this.paused && !fullscreenFlag) {
      this.play();
    }
  });
  // 再生ボタンクリック時に、再生開始
  element.closest('.movie').querySelector('.movie_btn').addEventListener('click', function() {
    if (element.paused) {
      element.play();
    }
  });
});

まとめ

この記事では、videoタグにオリジナルの再生ボタンを設置する方法を解説しました。

ブラウザによる見た目の違いを統一し、ユーザー体験を向上させるために、JavaScriptでコントロールを動的に切り替える実装が可能です。

サンプルコードも紹介しているので、ぜひ自分のサイトにも取り入れてみてください。

カスタマイズ次第でさらにオリジナリティある動画プレイヤーを作成できますので、この記事を参考に実践してみましょう。

-フロントエンド
-