【思うままにスタイリング】video.jsでHTML5の動画プレイヤーを設置しよう！

: ひぐま

2021.12.13

JavaScript

video.jsとは

video.jsはHTML5の動画を実装＆プレイヤースキンを独自にカスタマイズできる有能なjsプラグインです。

公式サイト

公式ドキュメント

公式サイトにアクセスするとすぐにデモを確認できます。
ドキュメントは英語しかありませんのですこし上級者向けですが、カスタマイズはCSSの指定で簡単に行えちゃいます

video.jsの強み

スタイリングがしやすい: もちろん何も加えずともすぐに使用することができますが、先述した通りスタイリングはそれほど難しいものではないので、色や大きさ、形等を自分好みにアレンジし、個性的なプレイヤーを実装することが可能です。

対応する動画形式が豊富: mp4、webmをはじめとした代表的な形式から、dash形式やHLS形式等のストリーミング形式にも対応しています。

ブラウザーが違ってもコントローラーのUIの統一される: これまでのvideoタグでの動画の実装では、ブラウザーによってコントローラーのUIに違いがありましたが、video.jsはどのブラウザーで確認してもUIが統一されています。

どのブラウザーでも動作する: GoogleChrome、Edge、Firefox、safari、IE(ただし、最新V7ではIE11以下をサポートしないそう)等多くのブラウザーで動作します。

プラグインが豊富: 数百のプラグインやスキンがインストールできます。
冒頭の公式サイトのデモの下の「SWAP THEME」からも個性的なスキンを確認することができます。
実際の使用方法やプラグインの種類はこちらの公式ページに詳しく書かれています。
プラグインのリスト

実際にやってみます

テキストを読んでいるだけではいまいちピントこないことも多いので、実際に使ってみました

それでできたのがこちらのデモです。↓

デモ

どうでしょう

今回スキンまでは変更してませんが、普段見慣れたプレイヤーと比べてみると大分個性的になりました。

ちなみに、スタイルを変更する前(デフォルトの状態)だとこんな感じです。

再生前

再生中

STEP1.ファイルの読み込み

<link rel="stylesheet" href="css/videojs/video-js.css">
<script type="text/javascript" src="js/videojs/video.min.js"></script>

githubより任意のバージョンのファイルを落として、srcフォルダからvideo-js.css、video.min.js(video.js)の2つをダウンロードし、head内に記します。
ちなみに今回使ってるバージョンはver.7.10.2です。

github

※jQueryなしで動作します

STEP2.HTMLを書いていく

ファイルを読み込めたら、早速動画を設置していきます。

<section>
    <h2>■ 実装サンプル動画</h2>
    <video-js data-setup='{}' controls loop="loop">
        <source src="mp4/videojs/zawazawa.mp4" type="video/mp4" poster="img/videojs/video.jpg">
    </video-js>
</section>

上記が今回使用するソースコードになります。
通常の「video」タグでも動作しますが、ドキュメントによるとvideoタグを用いるとブラウザ側がスタイル設定されていないコントロールを表示させる恐れがあるため、カスマム要素の「video-js」のほうが推奨されているようなのでこちらを使用します。

videoタグをそのまま使用する場合はクラスに「video-js」を付与してください。

<video class="video-js" data-setup='{}' controls loop="loop">...</video>

data-setup={}部分はvideo.jsへオプションを引き渡すためのものです。こちらは空の状態で構いません。

controls	loop="loop"	autoplay
コントロール部分を表示する	ループする	自動再生する

controlsは、コントロール部分を表示するオプションです。
※これを消す場合再生ボタンがでないので後述の自動再生(autoplay)を追加するしか動画の視聴手段がないです。
loop="loop"は、動画終了後すぐにまた再生され、ループ状態となります。
今回は使用していませんがautoplayを追加で自動再生させます。
ただし、必ずしも動作するわけではなく、ブラウザによっては自動再生が無効化されてしまいます。
現時点ではIE11のみ自動再生が動作しますが、今のところつけない方が無難かもしれません。

そのほか、詳細は公式ガイドをご確認ください。

オプションについて

STEP3.CSSでカスタマイズする

ここからがvideo.jsの真骨頂、CSSを書いていきます。

header{ top:0; z-index:100; }
main > section{ max-width:640px; margin:0 auto; padding-top:57px; }
main > section h2{ margin-bottom:10px; color:#548ae5; font-size:18px; }
main > section p{ margin:10px 0 0; color:#484848; font-size:14px; }
.video-js{
    width:100%;
    height:100%;
    margin:0 auto;
    padding-top:56.25%;/*比率調整※16:9の画面幅*/
    border:5px solid rgb(200,225,0);
    color:#fff;
    background:rgb(200,225,0);
}
.video-js .vjs-tech{ outline:none; }
.video-js .vjs-big-play-button:focus{ background:none; }
/*再生ボタン(大)*/
.video-js:hover .vjs-big-play-button,
.video-js .vjs-big-play-button{
    height:90px;
    width:90px;
    border:3px dotted #ffff70;/*ドット枠線*/
    border-radius:50%;/*形を丸に*/
    font-size:5em;/*三角の大きさ変更*/
    line-height:90px;
    background:rgba(68,215,77,.5);
    /*動画の中心に再生ボタンを移動*/
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}
/*再生ボタンをマウスオーバーしたら*/
.video-js .vjs-big-play-button:hover{ background:rgba(215,255,0,.7); }
/*コントローラー*/
.video-js .vjs-control-bar{ background:rgba(68,215,77,.5);}
/*再生バー*/
.video-js .vjs-slider,
.video-js .vjs-load-progress div{ background:rgba(92,215,230,.8); }