Jak vytvořit přehrávač videa v Reactu

Vytvoření přehrávače videa v Reactu se může zdát jako skličující úkol. Se správnými nástroji a technikami to ale zvládnete poměrně snadno.

Existuje několik jednoduchých způsobů, jak vytvořit přehrávač videa v Reactu: pomocí vestavěných funkcí a pomocí knihoven třetích stran. Podívejte se, jak vytvořit objekty přetažením v Reactu.

Vytvořte přehrávač videa v Reactu

Před vytvořením přehrávače videa React se ujistěte, že máte základní znalosti HTML, CSS a JavaScriptu.

Začněte vytvořením jednoduché aplikace React, která přidá následující funkce přehrávače videa.

Používejte vestavěné funkce (háčky interakce)

První možností, jak v Reactu vytvořit přehrávač videa, je použít vestavěné funkce.

Začněte vytvořením komponenty přehrávače, která bude zobrazovat video a všechny ovládací prvky. Chcete-li to provést, vytvořte soubor s názvem „Player.js“ a přidejte následující kód:

import React from ‘react’;

const Player = () => {
 return (
 <div>
 <video width=”100%” height=”100%” controls>
 <source src=” type=”video/mp4" />
 </video>
 </div>
 )
}

export default Player;

Tento kód importuje knihovnu React a vytvoří komponentu launcher. Přidává také prvek videa s atributem control nastaveným na true. Tím se na stránku přidá primární přehrávač videa.

Poté přidejte tlačítko přehrávání/pozastavení. Chcete-li to provést, musíte do konfigurátoru spouštěče přidat několik řádků kódu. Přidejte následující kód do souboru Player.js:

import React, { useState, useRef } from ‘react’;

const Player = () => {
 const [isPlaying, setIsPlaying] = useState(false);
 const videoRef = useRef(null);

const togglePlay = () => {
 if (isPlaying) {
 videoRef.current.pause();
 } else {
 videoRef.current.play();
 }
 setIsPlaying(!isPlaying);
 };

return (
 <div>
 <video
 ref={videoRef}
 width=”100%”
 height=”100%”
 controls
 >
 <source src=” type=”video/mp4" />
 </video>
 <button onClick={togglePlay}>
 {isPlaying ? “Pause” : “Play”}
 </button>
 </div>
 )
}

export default Player;

Tento kód používá háček useState A použití Ref Sleduje stav videa (ať už se přehrává nebo je pozastaveno) a označuje prvek videa. Přidává také funkčnost togglePlay který přehraje a pozastaví video. Prvek tlačítka aktivuje funkci togglePlay.

Posledním krokem je přidání ukazatele průběhu. Chcete-li to provést, musíte do souboru Player.js přidat několik řádků kódu. Musíte přidat:

import React, { useState, useRef } from ‘react’;

const Player = () => {
 const [isPlaying, setIsPlaying] = useState(false);
 const [progress, setProgress] = useState(0);
 const videoRef = useRef(null);

const togglePlay = () => {
 if (isPlaying) {
 videoRef.current.pause();
 } else {
 videoRef.current.play();
 }
 setIsPlaying(!isPlaying);
 };

const handleProgress = () => {
 const duration = videoRef.current.duration;
 const currentTime = videoRef.current.currentTime;
 const progress = (currentTime / duration) * 100;
 setProgress(progress);
 };
 return (
 <div>
 <video
 onTimeUpdate={handleProgress}
 ref={videoRef}
 width=”100%”
 height=”100%”
 controls
 >
 <source src=” type=”video/mp4" />
 </video>
 <div>
 <button onClick={togglePlay}>
 {isPlaying ? “Pause” : “Play”}
 </button>
 <progress value={progress} max=”100" />
 </div>
 </div>
 )
}

export default Player;

Tento kód přidá funkci actProgress. Tato funkce aktualizuje ukazatel průběhu. Kód také přidá posluchač události onTimeUpdate k prvku videa, který spouští funkci handleProgress. Nakonec přidáte na stránku prvek pokroku s nastavenou hodnotou, maximálním postupem a 100 atributy. Zkontrolujte, jak konfigurujete myš, abyste ji mohli pohodlně používat.

Používání knihoven třetích stran

Druhou možností, jak v Reactu vytvořit přehrávač videa, je použití knihoven třetích stran. K dispozici je mnoho knihoven, ale nejoblíbenější jsou ReactPlayer a React-media-player.

ReactPlayer

ReactPlayer je jednoduchá a lehká knihovna, která vám umožňuje vytvořit přehrávač videa s několika řádky kódu. Spusťte následující příkaz v Terminálu a nainstalujte je:

npm install react-player

Po instalaci jej můžete používat takto:

import React from ‘react’;
import ReactPlayer from ‘react-player’;

const Player = () => {
 return (
 <ReactPlayer
 url=”
 width=”100%”
 height=”100%”
 controls
 />
 )
}

export default Player;

Tento kód importuje komponentu ReactPlayer z knihovny ReactPlayer a přidá ji na stránku. Nastavuje URL, šířku, výšku a ovládací atributy. Podívejte se jeden po druhém na každý z těchto parametrů:

1. url: Toto je adresa URL videa, které chcete přehrát.
2. šířka: Toto je šířka přehrávače videa.
3. výška: Toto je výška přehrávače videa.
4. ovládací prvky: Toto je logický atribut, který určuje, zda bude přehrávač videa obsahovat ovládací prvky.

reakční video js přehrávač

Reag-video-js-player je další jednoduchá a lehká knihovna, která vám umožňuje vytvořit přehrávač videa s několika řádky kódu. Spusťte následující příkaz v Terminálu a nainstalujte je:

npm install react-video-js-player

Po instalaci jej můžete používat takto:

import React from “react”;
import VideoPlayer from “react-video-js-player”;

const Player = () => {
 return (
 <VideoPlayer
 width=”100%”
 height=”100%”
 src=”
 controls
 />
 )
}

export default Player;

Tento kód importuje komponentu VideoPlayer z knihovny respond-video-js-player a přidá ji na stránku.

Další funkce přehrávače videa

Do přehrávače videa můžete přidat další funkce, například:

1. Přidat plakát: Do přehrávače videa můžete přidat obrázek plakátu nastavením atributu „plakát“ videodíla na adresu URL obrázku.
2. Smyčka: Video můžete opakovat nastavením atributu smyčky prvku videa na hodnotu true.
3. Ztlumit: Video můžete ztlumit nastavením atributu mute prvku videa na hodnotu true.
4. Automatické přehrávání: Video můžete přehrát automaticky nastavením atributu autoplay u videosouboru na hodnotu true.

Do přehrávače videa můžete také přidat své vlastní ovládací prvky. Chcete-li to provést, musíte do prvku videa přidat posluchače událostí a zapisovat funkce pro ovládání videa. Podívejte se na nejlepší způsoby, jak opravit chybu „Toto video nelze přehrát“ na Disku Google.

Zvyšte interakci uživatele s přehrávačem videa

Se správnými nástroji a technikami můžete snadno vytvořit přehrávač videa v Reactu. Můžete také přidat další funkce pro zvýšení zapojení uživatelů. Přehrávače médií jsou skvělým způsobem, jak zvýšit zapojení uživatelů na vašem webu nebo aplikaci.

Po přidání přehrávače videa na váš web byste měli sledovat interakci uživatele, abyste zjistili, zda má požadovaný účinek. Můžete také testovat A/B, abyste zjistili, zda přidání přehrávače videa zvyšuje míru konverze. Nyní se můžete podívat na nejlepší způsoby, jak zlepšit konverzní poměr vašeho webu.