はじめに

本記事では、HTMLのvideoタグを使用してブラウザで動画を再生する実装を行います。スタイリングにはTailwindCSSを使用し、ReactとViteで環境を構築します。

環境

react：18.3.1
tailwindcss：3.4.14
vite：5.4.8

ゴール

動画がブラウザに表示されてること、再生できることを確認する

1. コンポーネントの作成

動画表示のためのコンポーネントを作成していきます。
videoタグで動画プレーヤーの設定を行い、sourceタグでは再生する動画ファイルとその形式を指定しています。

App.js

const App = () => {
  return (
    <div className="flex items-center justify-center min-h-screen w-full bg-blue-900 p-4">
      <div className="w-full max-w-4xl aspect-video  overflow-hidden shadow-lg">
        <div className="relative w-full h-full ">
          <video
            className="absolute inset-0 w-full h-full object-contain "
            controls
            controlsList="nodownload"
            autoPlay
            loop
            muted
          >
            <source src="samplemv_q1.mp4" type="video/mp4" />
          </video>
        </div>
      </div>
    </div>
  );
};

export default App;

上記で使用してる video タグの属性は次の通りです。

controls：再生、一時停止、シークバー、音量などの標準的なビデオコントロールを表示
https://developer.mozilla.org/ja/docs/Web/HTML/Element/video#controls
controlsList：nodownloadを指定し、ダウンロードボタンは使わないので非表示にしています
https://developer.mozilla.org/ja/docs/Web/HTML/Element/video#controlslist
autoPlay：データの読み込みが完了したら自動再生を開始
https://developer.mozilla.org/ja/docs/Web/HTML/Element/video#autoplay
loop：動画を繰り返し再生
https://developer.mozilla.org/ja/docs/Web/HTML/Element/video#loop
muted：初期状態が消音
https://developer.mozilla.org/ja/docs/Web/HTML/Element/video#muted

再生したい動画ファイル（mp4形式）は publicディレクトリに配置しておいてください。

2. ブラウザで確認

ブラウザで動作を確認します。

npm run dev

参考リンク