こんにちは。アイレットデザイン事業部のフロントエンドエンジニアの須永です。

今回はHTMLのvideoタグを使用した動画プレーヤーのカスタマイズを数回に分けて紹介したいと思います。
まずはvideoタグをカスタマイズするにあたって便利なVideo.jsについての紹介をしていきたいと思います。

Video.jsとは

Video.jsとはJavaScriptの動画再生ライブラリの一つです。

動画を設置して再生するだけならvideoタグを使えばいいのでは？と思うのですが、Video.jsを使用すると以下のようなメリットがあります。

  • ストリーミング形式に対応
  • UIを統一できる
  • CSSによるスタイリングが容易になる

ストリーミング形式に対応

HLS形式のストリーミング動画は、ブラウザによってはそのままのvideoタグでは再生出来ません。
そこでVideo.jsを使用することでこれらの形式も取り扱うことが出来ます。

UIを統一できる

まずはVideo.jsを使用した場合としない場合の各ブラウザのUIを比べてみましょう。

Video.jsなしの場合

Video.jsなしの場合

ご覧の通りビデオのコントローラーがブラウザによって違うことがわかりますね。
それではVideo.jsを使用した場合を見てみましょう。

Video.jsありの場合

Video.jsありの場合

今度はどのブラウザでもコントローラーが統一されていることがわかりますね。

CSSによるスタイリングが容易になる

コントローラーが統一されたことで、ブラウザ間の差異を気にせずにプレーヤーをカスタマイズすることができます。

下記のような大胆なカスタマイズもブラウザを気にせず出来ます。

Video.jsを実装してみる

それでは実際にVideo.jsを使う準備をしていきましょう。
公式サイトからファイルを入手してきます。
▼公式サイト
https://videojs.com/getting-started/

今回はCDNを使用します。
CSSとJavaScriptを1つずつ読み込ませます。

Video.js読み込み

その後videoタグにvideo-jsクラスを追加し、data-setup属性を与えることでvideo.jsの初期化をします。

<video class="video-js" controls data-setup='{}'>
<source src="movie.mp4" type="video/mp4" />
</video>

上記の他にvideo-jsという独自のタグを使用する方法もあります。
こちらはクラス名を指定する必要がありません。

<video-js controls data-setup='{}'>
<source src="movie.mp4" type="video/mp4" />
</video-js>

これで準備は完了です。
次回はVideo.jsの具体的な設定を見ていきます。