HOWTO · React

React JS で背景ビデオを追加する

このチュートリアルでは、React JS での背景ビデオの設定について説明します。

著者 Md Aminul Islam公開日 2023-06-21更新日 2023-10-12
このページの内容

ビデオの背景を提供することは、ユーザーの関心を引く非常に効果的な方法です。 React を使用してビデオ背景を実装するのは非常に簡単です。

この記事では、React JS アプリケーションでビデオの背景を作成する方法を示し、トピックを簡単にするために例と説明を使用して各ステップについて説明します。 始める前に、動画の背景に関する 1つの重要な点は、すべてのデバイスに高設定が含まれているわけではないため、高グラフィックスの動画の背景がアプリケーションのパフォーマンスに影響を与える可能性があるということです。

React JS で背景ビデオを追加する

ここでは、React JS アプリケーションにビデオの背景を含める手順について説明します。

ビデオの背景を含めるには、次の 3つの手順に従います。

  • まず、index.html ファイルを次のように整理します。

    HTML コード (index.html):

    <!DOCTYPE html>
<html lang="en">
  <head>
	<meta charset="utf-8" />
	<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<meta name="theme-color" content="#000000" />
	<meta
	  name="description"
	  content="Web site created using create-react-app"
	/>
	<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
	<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
	<title>React App</title>
  </head>
  <body>
	<div id="root"></div>
  </body>
</html>

    この部分の構成のほとんどは、システムによって自動的に行われることに注意してください。 ただし、必要に応じて変更できます。

  • メインの JS ファイルである App.js に取り組みます。 このファイルのコードを見てください。

    JS コード (App.js):

    import './App.css';

import video from './video.mp4';

function App() {
  return (<div><video autoPlay loop muted>
          <source src = {video} type = 'video/mp4' />
          </video>
		<div className='content'>
		  <h1>This is a text</h1>
          </div>
	</div>);
}

export default App;

    上記の例では、div コンテナ内に 2つの子要素を作成しました。 最初の要素は、背景として機能するビデオです。 もう1つはテキストが含まれています。

  • では、React JS アプリにいくつかの CSS を含めます。 React JS アプリに以下のスタイルを適用しました。

    CSS コード (App.css):

    video {
  width: 100%;
}
.content {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
}

すべての手順を完全に完了すると、ブラウザに次の出力が表示されます。

React ビデオ背景 - 出力

この記事で共有するサンプル コードは、React JS プロジェクトで記述されています。 React プロジェクトを実行するには、システムに最新の Node JS バージョンが必要です。そのため、システムに Node JS が含まれていない場合は、まずそれをインストールしてください。

著者について

MD Aminul Islam

Aminul Is an Expert Technical Writer and Full-Stack Developer. He has hands-on working experience on numerous Developer Platforms and SAAS startups. He is highly skilled in numerous Programming languages and Frameworks. He can write professional technical articles like Reviews, Programming, Documentation, SOP, User manual, Whitepaper, etc.

著者プロフィールを見る
LinkedIn