HOWTO · React

React JS에 배경 비디오 추가

이 튜토리얼에서는 React JS에서 배경 비디오 설정에 대해 설명합니다.

작성자 Md Aminul Islam게시일 2023-06-21업데이트 2023-10-12

비디오 배경을 제공하는 것은 사용자의 관심을 끌 수 있는 매우 효과적인 방법입니다. React를 사용하여 비디오 배경을 구현하는 것은 매우 쉽습니다.

이 기사에서는 React JS 애플리케이션에서 비디오 배경을 만드는 방법을 보여주고 예제와 설명을 사용하여 각 단계를 논의하여 주제를 더 쉽게 만듭니다. 시작하기 전에 비디오 배경에 대한 한 가지 중요한 점은 모든 장치에 높은 구성이 포함되어 있지 않기 때문에 높은 그래픽 비디오 배경이 애플리케이션 성능에 영향을 미칠 수 있다는 것입니다.

React JS에 배경 비디오 추가

여기서는 React JS 애플리케이션에 비디오 배경을 포함하는 단계에 대해 설명합니다.

비디오 배경을 포함하려면 다음 세 단계를 따르십시오.

  • 우선 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 컨테이너 내에 두 개의 자식 요소를 만들었습니다. 첫 번째 요소는 배경으로 사용할 비디오입니다. 다른 하나는 일부 텍스트를 포함합니다.

  • 이제 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