Čtenáři jako vy pomáhají podporovat MUO. Když provedete nákup pomocí odkazů na našich stránkách, můžeme získat provizi přidružené společnosti. Přečtěte si více.

Vytvoření přehrávače videa v Reactu se může zdát jako náročný úkol. Ale se správnými nástroji a technikami to můžete udělat relativně snadno.

Existují dva způsoby, jak vytvořit přehrávač videa v Reactu: pomocí vestavěných funkcí a pomocí knihoven třetích stran.

Vytvoření přehrávače 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 tím vytvoření základní aplikace React přidat následující funkce přehrávače videa.

Používání vestavěných funkcí (React Hooks)

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

Začněte vytvořením komponenty přehrávače, která zobrazí video a všechny jeho 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 Reagovat z 'reagovat';

konst Player = () => {

instagram viewer

vrátit se (
<div>
<šířka videa="100%" výška ="100%" řízení>
<zdroj src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" typ="video/mp4" />
</video>
</div>
)
}

vývoznívýchozí Hráč;

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

Dále přidejte tlačítko přehrávání/pozastavení. Chcete-li to provést, budete muset do komponenty přehrávače přidat několik řádků kódu. Přidejte následující kód do souboru Player.js:

import Reagovat, { useState, useRef } z 'reagovat';

konst Player = () => {
konst [isPlaying, setIsPlaying] = useState(Nepravdivé);
konst videoRef = useRef(nula);

konst togglePlay = () => {
if (isPlaying) {
videoRef.aktuální.pauza();
} jiný {
videoRef.aktuální.hrát si();
}
setIsPlaying(!isPlaying);
};

vrátit se (
<div>
<video
ref={videoRef}
šířka="100%"
výška ="100%"
řízení
>
<zdroj src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" typ="video/mp4" />
</video>
<button onClick={togglePlay}>
{hraje? "Pauza": "Hrát si"}
</button>
</div>
)
}

vývoznívýchozí Hráč;

Tento kód používá háčky useState a useRef sledovat stav videa (ať už se přehrává nebo pozastaveno) a odkaz na prvek videa. Přidává také funkci togglePlay, která přehraje a pozastaví video. Prvek tlačítka spustí funkci togglePlay.

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

import Reagovat, { useState, useRef } z 'reagovat';

konst Player = () => {
konst [isPlaying, setIsPlaying] = useState(Nepravdivé);
konst [progress, setProgress] = useState(0);
konst videoRef = useRef(nula);

konst togglePlay = () => {
if (isPlaying) {
videoRef.aktuální.pauza();
} jiný {
videoRef.aktuální.hrát si();
}
setIsPlaying(!isPlaying);
};

konst handleProgress = () => {
konst trvání = videoRef.current.duration;
konst currentTime = videoRef.current.currentTime;
konst pokrok = (aktuální čas / trvání) * 100;
setProgress (pokrok);
};
vrátit se (
<div>
<video
onTimeUpdate={handleProgress}
ref={videoRef}
šířka="100%"
výška ="100%"
řízení
>
<zdroj src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" typ="video/mp4" />
</video>
<div>
<button onClick={togglePlay}>
{hraje? "Pauza": "Hrát si"}
</button>
<progress value={progress} max="100" />
</div>
</div>
)
}

vývoznívýchozí Hráč;

Tento kód přidá funkci handleProgress. Tato funkce aktualizuje ukazatel průběhu. Do prvku videa také přidá posluchač události onTimeUpdate, který spustí funkci handleProgress. Nakonec přidá na stránku prvek pokroku s atributy value a max nastavenými na progress a 100.

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 některé z nejpopulárnějších jsou ReactPlayer a React-media-player.

ReactPlayer

ReactPlayer je jednoduchá, lehká knihovna, která vám umožní vytvořit přehrávač videa s několika řádky kódu. Chcete-li jej nainstalovat, spusťte ve svém terminálu následující příkaz:

npm Nainstalujte reagující hráč

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

import Reagovat z 'reagovat';
import ReactPlayer z 'react-player';

konst Player = () => {
vrátit se (
<ReactPlayer
url="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
šířka="100%"
výška ="100%"
řízení
/>
)
}

vývoznívýchozí Hráč;

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

  • url: Toto je adresa URL videa, které chcete přehrát.
  • šířka: Toto je šířka přehrávače videa.
  • výška: Toto je výška přehrávače videa.
  • řízení: Toto je booleovský atribut, který určuje, zda bude mít přehrávač videa ovládací prvky, či nikoli.

reagovat-video-js-player

Reag-video-js-player je další jednoduchá, lehká knihovna, která vám umožňuje vytvořit přehrávač videa s několika řádky kódu. Chcete-li jej nainstalovat, spusťte ve svém terminálu následující příkaz:

npm Nainstalujte reagovat-video-js-player

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

import Reagovat z "reagovat";
import Video přehrávač z "react-video-js-player";

konst Player = () => {
vrátit se (
<Video přehrávač
šířka="100%"
výška ="100%"
src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
řízení
/>
)
}

vývoznívýchozí Hráč;

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řidání plakátu: Do přehrávače videa můžete přidat obrázek plakátu nastavením atributu plakát prvku videa na adresu URL obrázku.
  2. Smyčka: Video můžete opakovat nastavením atributu smyčky prvku videa na „true“.
  3. Ztlumeno: Video můžete ztlumit nastavením atributu ztlumení prvku videa na hodnotu „true“.
  4. Automatické přehrávání: Své video můžete automaticky přehrát nastavením atributu autoplay prvku videa na hodnotu „true“.

Do přehrávače videa můžete také přidat své vlastní ovládací prvky. Chcete-li to provést, budete muset do prvku videa přidat posluchače událostí a zapisovat funkce pro ovládání videa.

Zvyšte zapojení uživatelů pomocí videopřehrávače

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 svůj web nezapomeňte sledovat zapojení uživatelů, abyste zjistili, zda má požadovaný účinek. Můžete také nasadit A/B testování, abyste zjistili, zda přidání přehrávače videa zvyšuje míru konverze.