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

ひぐま
ひぐま

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」からも個性的なスキンを確認することができます。
実際の使用方法やプラグインの種類はこちらの公式ページに詳しく書かれています。

プラグインのリスト

実際にやってみます

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

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

デモ

どうでしょう

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

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

再生前

videojs01.jpg

再生中

videojs02.jpg

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); }

こんな感じでスタイルを上書きしています。

レスポンシブ対応にするため、video-jsのwidth,heightは100%に
比率を変えず可変するために16:9の画面幅の動画に対して「padding-top:56.25%;」を追加しています。

比率別

16:9
56.25%
3:2
66.6666%
4:3
75%

自動で計算してくれる便利なサイトもありますのでご参考までに

アスペクト比計算ツール

再生ボタンは、videoタグに「vjs-big-play-centered」クラスを追加するだけで画面中央へ配置することができますが、
いろいろカスタムした結果、センターになりきれなくなっていたのでpositionで真ん中に配置させています。

細かく変更を行う場合は、サイト上を右クリック→検証をクリックしてカスタマイズしたい箇所を選択すると指定クラスを特定することができます。

検証ツールを起動する(画面はGoogleChromeです)

videojs03.jpg

※上書きがうまくいかなくなる場合があるのでcssファイルはvideo-js.cssよりも下に配置してください。
どうしても上書きされない場合は!importantをつけて書くと優先度が一番高くなります。
セレクタの優先順位については以前書いたこちらの記事も参考になると思います。

【スタイルが適用されない!】セレクタの優先順位について

皆さんも是非、video.jsでオリジナルのプレイヤーを実装してみてください

関連記事