はじめに
本記事では、HTMLのvideoタグを使用してブラウザで動画を再生する実装を行います。スタイリングにはTailwindCSSを使用し、ReactとViteで環境を構築します。
環境
- react:18.3.1
- tailwindcss:3.4.14
- vite:5.4.8
ゴール
動画がブラウザに表示されてること、再生できることを確認する
1. コンポーネントの作成
動画表示のためのコンポーネントを作成していきます。
videoタグで動画プレーヤーの設定を行い、sourceタグでは再生する動画ファイルとその形式を指定しています。
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
参考リンク