Füge ein Hintergrundvideo in React JS hinzu

  2. How-To's
  3. React Howtos
  4. Füge ein Hintergrundvideo in React JS …
MD Aminul Islam 15 Februar 2024
React React Background
Füge ein Hintergrundvideo in React JS hinzu

Die Bereitstellung eines Videohintergrunds ist ein sehr effektiver Weg, um Benutzer anzuziehen. Das Implementieren eines Videohintergrunds mit React ist sehr einfach.

Dieser Artikel zeigt uns, wie wir einen Videohintergrund in unserer React JS-Anwendung erstellen können, und wir werden jeden Schritt anhand von Beispielen und Erklärungen besprechen, um das Thema zu vereinfachen. Bevor wir beginnen, eine wichtige Sache zu Videohintergründen ist, dass Videohintergründe mit hoher Grafikleistung die Anwendungsleistung beeinträchtigen können, da nicht alle Geräte die hohe Konfiguration enthalten.

Füge ein Hintergrundvideo in React JS hinzu

Hier werden wir die Schritte besprechen, um einen Videohintergrund in eine React JS-Anwendung einzufügen.

Führen Sie die folgenden drei Schritte aus, um einen Videohintergrund einzufügen.

  • Zunächst werden wir unsere Datei index.html wie folgt organisieren:

    HTML-Code (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>

    Denken Sie daran, dass der größte Teil der Organisation dieses Teils automatisch vom System durchgeführt wird. Sie können sie jedoch an Ihre Bedürfnisse anpassen.

  • Wir werden an der Haupt-JS-Datei, der App.js, arbeiten. Schauen Sie sich den Code in dieser Datei an:

    JS-Code (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;

    Im obigen Beispiel haben wir zwei untergeordnete Elemente in einem div-Container erstellt. Das erste Element ist ein Video, das als Hintergrund dient; ein anderer enthält etwas Text.

  • Jetzt ist es an der Zeit, etwas CSS in unsere React JS-App aufzunehmen. Wir haben die folgenden Stile in unserer React JS-App angewendet.

    CSS-Code (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;
}

Nachdem Sie nun alle Schritte perfekt ausgeführt haben, erhalten Sie die folgende Ausgabe in Ihrem Browser:

Reagieren Sie auf Videohintergrund - Ausgabe

Die in diesem Artikel geteilten Beispielcodes wurden im React JS-Projekt geschrieben. Ihr System muss über die neueste Node JS-Version verfügen, um ein React-Projekt auszuführen. Wenn Ihr System Node JS also nicht enthält, installieren Sie es zuerst.

Autor: MD Aminul Islam
MD Aminul Islam avatar MD Aminul Islam avatar

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