0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

個人的アドカレAdvent Calendar 2024

Day 25

videoタグでmp4動画を再生する動画プレイヤーを作成してみる

Posted at

はじめに

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

環境

  • react:18.3.1
  • tailwindcss:3.4.14
  • vite:5.4.8

ゴール

tset_qi2.gif

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

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 タグの属性は次の通りです。

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

2. ブラウザで確認

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

npm run dev

tset_qi2.gif

参考リンク

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?