video.js
ビデオ ジェーエス
video.jsは、WebサイトにHTML5動画プレイヤーを組み込み、UIや再生制御を柔軟にカスタマイズできるJavaScriptライブラリです。再生／一時停止、シーク、音量、フルスクリーンなどの基本UIはもちろん、プラグインで機能を拡張することができます。つまり、各ブラウザで用意された動画プレイヤーや、Youtubeなどのプレーヤーのデザインではなく、独自デザイン・機能の動画プレイヤーを制作できます。
特徴
video.jsでは、ただ「再生する」だけの動画プレイヤーではなく、有効に活用するためのあらゆるカスタマイズが可能です。
- 操作性・デザイン・機能の自由な設計・実装
- サイト内と連動したインタラクションの実装
- 計測や外部サービスとの連携
操作性・デザイン・機能の自由な設計
動画プレイヤー全体のデザインを自由に実装できるため、コンテンツのブランド体験を崩さずに動画プレイヤーを実装することができます。あらかじめ用意されたデザイン（スキン）も多数あり、例えば以下のデモのような「オリジナリティのある動画プレイヤー」を簡単に作ることができます。（※上部のボタンでプレイヤーのデザインを切り替えます）
プラグインによる機能追加によって、字幕の設置・データの解析などの機能も追加できるため、独自要件に合わせたプレイヤーを実装することができます。
サイト内と連動したインタラクションの実装
動画プレイヤー上のあらゆるユーザ操作（イベント）を検知（フック）して、ページ上の別の場所と連動させたインタラクションを実装することができます。ユーザによる再生や停止などの行動や、動画の視聴位置や再生後の経過時間などの状態に応じた動きをWebサイトに与えることで、ユーザ体験の質を高めることができます。逆にWebサイト上での行動をトラッキングして動画の再生状況に変化を与えるなど、動画コンテンツを強く訴求するためのインタラクションを仕込むことができます。
計測など外部サービスとの連携
ユーザ操作（イベント）の検知（フック）は、動画周辺のユーザ行動の計測や、GA4・GTMなどのアクセス・データ解析サービスと連携させることができます。動画の視聴数や動画再生中のユーザ行動を計測・解析することで、動画コンテンツの評価を行い、マーケティング施策に活かすことができます。
video.jsはあくまで動画プレイヤーのUI/制御を担うライブラリなので、どういった演出・インタラクションを実装するのか、どんなデータを集積し分析するのかなど、全体の設計が必要になります。BLOOM DESIGNでは、Webサイト・Webページの中で動画コンテンツをいかに効果的に配信し、どのように活用するのかも含め、ご要件に沿った制作・開発をご提案しています。