Video JSで動画のUIを共通化する

目次

• デモ
• 解説

デモ

解説

今回はVideo JSで動画のUIを共通化する方法を紹介します。

Video JSのインストール

Videojsのインストール方法は公式サイトを参照してください。

今回はnpm install を実行します。 npm install video.js

Video JSの使い方

video-js クラスを持つvideo要素を作成します。 以下をimportすることでVideo JSのスタイルが適用されます。

import "video.js/dist/video-js.css";

以下のようにvideo要素を作成し、videojs関数を呼び出すことでVideo JSを使用することができます。 めっちゃ簡単ですね。

import videojs from "video.js";

const videoEl = document.getElementById("js-video");

const video = videojs(videoEl, {
  language: "ja",
  notSupportedMessage: "再生出来ません。",
});

あとは自分好みにカスタマイズしてみましょう。 今回は再生ボタンを押したときにボタンを非表示にするコードです。 フォーカスに対応しております。

import videojs from "video.js";
import "video.js/dist/video-js.css";
window.addEventListener("DOMContentLoaded", function () {
  const videoEl = document.getElementById("js-video");
  const playButtonBox = document.querySelector(".js-play-button-box");
  const playButton = document.querySelector(".js-play-button");

  if (!playButtonBox || !playButton || !videoEl) return;

  const video = videojs(videoEl, {
    language: "ja",
    notSupportedMessage: "再生出来ません。",
  });

  // ビデオが再生されたときにボタンを非表示にする
  video.on("play", function () {
    playButtonBox.style.visibility = "hidden";
    playButtonBox.style.opacity = "0";
  });

  // ビデオが一時停止または終了したときにボタンを表示する
  video.on("pause", function () {
    playButtonBox.style.visibility = "visible";
    playButtonBox.style.opacity = "1";
  });
  video.on("ended", function () {
    playButtonBox.style.visibility = "visible";
    playButtonBox.style.opacity = "1";
  });

  playButton.addEventListener("click", () => {
    video.play();
    const vjsPlayControl = document.querySelector(".vjs-play-control");
    if (!vjsPlayControl) return;
    vjsPlayControl.focus();
  });
});