HTMLのタグよりもVideo.jsを使ったほうが良い

Video.jsとは
<video>タグは見た目や挙動が異なる
Video.jsでの実装方法
まとめ

Video.jsとは

Video.jsはHTML5ベースのWeb動画プレイヤーを構築する、オープンソースのJavaScriptライブラリです。

HTMLの<video>タグでは難しい、全ブラウザでのUI統一やHLS形式のストリーミング再生、見た目や機能のカスタマイズを容易に実現できる、世界的に人気の高いツールです。

Amazon、Adobe、Udemyなどの大手IT企業が使用しており、2026年3月10日にUIやファイルサイズなどが改善されたバージョン10のベータ版が公開されたため注目されています。

<video>タグは見た目や挙動が異なる

<video>タグでWebページ上に動画を表示したい場合はcontrols属性を付けて、src属性で動画の場所を指定するだけで実装できます。

HTML

<video controls 
src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"></video>

<video controls 
src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"></video>

しかし、<video>タグでWeb動画プレイヤーを表示すると、ブラウザ間で見た目や挙動が異なるという問題が発生します。

ChromeやSafariで<video>タグでの表示を確認すると、下図のように見た目が異なることが確認できます。(左: Chrome、右: Safari)

また、ChromeとSafariのどちらもシークバーのクリック可能な範囲が狭かったり、再生速度を細かく変えられない、ストリーミング対応でないので動画の読み込みが遅いなどの欠点があります。

Video.jsを使用すればこれらのデメリットを解消できます。

Video.jsでの実装方法

Video.jsの実装は公式サイトのInstallationの手順通りに行えば簡単に実装できます。

この記事ではReactでの実装手順を説明します。

1. Installationページにアクセス

まず、公式サイトのInstallationのページにアクセスします。

Installation | Video.js

2. フレームワークを選択

フレームワークをReact, Video, Minimalで選択します。

3. ファイルを選択

or select manuallyで「HLS」を選択して、右側に動画ファイルをアップロードしてストリーミング再生に必要なm3u8ファイルとtsファイルを生成します。

外部に動画ファイルをアップロードできない場合は、ffmpegでm3u8ファイルとtsファイルを生成します。

brew install ffmpeg

brew install ffmpeg

ffmpeg -i input.mp4 -c:v copy -c:a copy -f hls -hls_time 10 -hls_playlist_type vod output.m3u8

ffmpeg -i input.mp4 -c:v copy -c:a copy -f hls -hls_time 10 -hls_playlist_type vod output.m3u8

m3u8とtsファイルだと、mp4ファイルと違ってファイルが分割されているため、再生時の読み込みがスムーズで動画ファイルをダウンロードされにくいというメリットがあります。

4. プロジェクトフォルダにVideo.jsをインストール

プロジェクトフォルダにVideo.jsをインストールします。

npm install @videojs/react

npm install @videojs/react

5. 生成されたコードからtsxファイルを作成

1から4の手順が完了したら、Web動画プレイヤーを表示するためのコードが生成されているので、これをコピペしてtsxファイルを作成し、実装すれば完了です。

例えば、App.tsxでplayerのコンポーネントを読み込んで表示したい場合は以下のようなコードになります。

ffmpegでm3u8ファイルとtsファイルを生成した場合はvideoディレクトリにすべて入れて、src="/video/output.m3u8" のように指定します。

App.tsx

import { MyPlayer } from './components/player'

function App() {
  return (
    <>
      <h1>Video.js React Sample</h1>
      <MyPlayer src="https://stream.mux.com/FTTHs8yiLoW01C02aSa4Imyaicuz02Bkz1Rpa18RzwpGeQ.m3u8" />
    </>
  )
}

export default App

import { MyPlayer } from './components/player'

function App() {
  return (
    <>
      <h1>Video.js React Sample</h1>
      <MyPlayer src="https://stream.mux.com/FTTHs8yiLoW01C02aSa4Imyaicuz02Bkz1Rpa18RzwpGeQ.m3u8" />
    </>
  )
}

export default App