Čitatelia ako vy pomáhajú podporovať MUO. Keď uskutočníte nákup pomocou odkazov na našej stránke, môžeme získať pridruženú províziu. Čítaj viac.

Vytvorenie prehrávača videa v Reacte sa môže zdať ako náročná úloha. Ale so správnymi nástrojmi a technikami to dokážete relatívne ľahko.

Existujú dva spôsoby, ako vytvoriť prehrávač videa v Reacte: pomocou vstavaných funkcií a pomocou knižníc tretích strán.

Vytvorenie prehrávača videa v React

Pred vytvorením prehrávača videí React sa uistite, že máte základné znalosti HTML, CSS a JavaScriptu.

Začnite tým vytvorenie základnej aplikácie React pridať nasledujúcu funkciu prehrávača videa.

Používanie vstavaných funkcií (React Hooks)

Prvou možnosťou vytvorenia prehrávača videa v Reacte je použitie vstavaných funkcií.

Začnite vytvorením komponentu prehrávača, ktorý zobrazí video a všetky jeho ovládacie prvky. Ak to chcete urobiť, vytvorte súbor s názvom „Player.js“ a pridajte nasledujúci kód:

importovať Reagovať od 'reagovať';

konšt Hráč = () => {
vrátiť (
<div

instagram viewer
>
<šírka videa ="100%" výška ="100%" ovládacie prvky>
<zdroj src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" typ="video/mp4" />
</video>
</div>
)
}

exportpredvolená Hráč;

Tento kód importuje knižnicu React a vytvorí komponent prehrávača. Pridáva tiež prvok videa s atribútom control nastaveným na „true“. Tým sa na stránku pridá základný prehrávač videa.

Potom pridajte tlačidlo prehrávania/pozastavenia. Ak to chcete urobiť, musíte do komponentu prehrávača pridať niekoľko riadkov kódu. Pridajte nasledujúci kód do súboru Player.js:

importovať Reagovať, { useState, useRef } od 'reagovať';

konšt Hráč = () => {
konšt [isPlaying, setIsPlaying] = useState(falošný);
konšt videoRef = useRef(nulový);

konšt togglePlay = () => {
if (isPlaying) {
videoRef.aktuálny.pauza();
} inak {
videoRef.aktuálny.hrať();
}
setIsPlaying(!isPlaying);
};

vrátiť (
<div>
<video
ref={videoRef}
šírka ="100%"
výška ="100%"
ovládacie prvky
>
<zdroj src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" typ="video/mp4" />
</video>
<button onClick={togglePlay}>
{hra sa? "Pauza": "hrať"}
</button>
</div>
)
}

exportpredvolená Hráč;

Tento kód používa háčiky useState a useRef sledovať stav videa (či sa prehráva alebo je pozastavené) a odkaz na prvok videa. Pridáva tiež funkciu togglePlay, ktorá prehrá a pozastaví video. Prvok tlačidla spustí funkciu togglePlay.

Posledným krokom je pridanie indikátora priebehu. Ak to chcete urobiť, musíte do súboru Player.js pridať niekoľko riadkov kódu. Pridajte nasledujúce:

importovať Reagovať, { useState, useRef } od 'reagovať';

konšt Hráč = () => {
konšt [isPlaying, setIsPlaying] = useState(falošný);
konšt [progress, setProgress] = useState(0);
konšt videoRef = useRef(nulový);

konšt togglePlay = () => {
if (isPlaying) {
videoRef.aktuálny.pauza();
} inak {
videoRef.aktuálny.hrať();
}
setIsPlaying(!isPlaying);
};

konšt handleProgress = () => {
konšt trvanie = videoRef.current.duration;
konšt currentTime = videoRef.current.currentTime;
konšt priebeh = (aktuálny čas / trvanie) * 100;
setProgress (pokrok);
};
vrátiť (
<div>
<video
onTimeUpdate={handleProgress}
ref={videoRef}
šírka ="100%"
výška ="100%"
ovládacie prvky
>
<zdroj src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" typ="video/mp4" />
</video>
<div>
<button onClick={togglePlay}>
{hra sa? "Pauza": "hrať"}
</button>
<hodnota pokroku={progress} max="100" />
</div>
</div>
)
}

exportpredvolená Hráč;

Tento kód pridáva funkciu handleProgress. Táto funkcia aktualizuje indikátor priebehu. Do prvku videa tiež pridá poslucháč udalosti onTimeUpdate, ktorý spustí funkciu handleProgress. Nakoniec pridá na stránku prvok pokroku s atribútmi value a max nastavenými na progress a 100 v tomto poradí.

Používanie knižníc tretích strán

Druhou možnosťou na vytvorenie prehrávača videa v Reacte je použitie knižníc tretích strán. Existuje veľa dostupných knižníc, ale niektoré z najpopulárnejších sú ReactPlayer a React-media-player.

ReactPlayer

ReactPlayer je jednoduchá, ľahká knižnica, ktorá vám umožňuje vytvoriť prehrávač videa len s niekoľkými riadkami kódu. Ak ho chcete nainštalovať, spustite v termináli nasledujúci príkaz:

npm Inštalácia reakčný hráč

Po nainštalovaní ho môžete použiť takto:

importovať Reagovať od 'reagovať';
importovať ReactPlayer od 'react-player';

konšt Hráč = () => {
vrátiť (
<ReactPlayer
url="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
šírka ="100%"
výška ="100%"
ovládacie prvky
/>
)
}

exportpredvolená Hráč;

Tento kód importuje komponent ReactPlayer z knižnice ReactPlayer a pridá ho na stránku. Nastavuje atribúty url, width, height a control. Pozrite sa postupne na každý z týchto parametrov:

  • url: Toto je adresa URL videa, ktoré chcete prehrať.
  • šírka: Toto je šírka prehrávača videa.
  • výška: Toto je výška prehrávača videa.
  • ovláda: Toto je boolovský atribút, ktorý určuje, či prehrávač videa bude mať ovládacie prvky alebo nie.

Reagovať-video-js-prehrávač

Reag-video-js-player je ďalšia jednoduchá, ľahká knižnica, ktorá vám umožňuje vytvoriť prehrávač videa s niekoľkými riadkami kódu. Ak ho chcete nainštalovať, spustite v termináli nasledujúci príkaz:

npm Inštalácia Reagovať-video-js-prehrávač

Po nainštalovaní ho môžete použiť takto:

importovať Reagovať od "reagovať";
importovať Video prehrávač od "react-video-js-player";

konšt Hráč = () => {
vrátiť (
<Video prehrávač
šírka ="100%"
výška ="100%"
src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
ovládacie prvky
/>
)
}

exportpredvolená Hráč;

Tento kód importuje komponent VideoPlayer z knižnice respond-video-js-player a pridá ho na stránku.

Ďalšie funkcie prehrávača videa

Do prehrávača videa môžete pridať ďalšie funkcie, ako napríklad:

  1. Pridanie plagátu: Do prehrávača videa môžete pridať obrázok plagátu nastavením atribútu plagát prvku videa na adresu URL obrázka.
  2. Slučovanie: Video môžete opakovať nastavením atribútu loop prvku videa na hodnotu „true“.
  3. Stlmené: Svoje video môžete stlmiť nastavením atribútu stlmeného prvku videa na hodnotu „true“.
  4. Automatické prehrávanie: Svoje video môžete prehrať automaticky nastavením atribútu automatického prehrávania prvku videa na hodnotu „true“.

Do prehrávača videa môžete pridať aj svoje vlastné ovládacie prvky. Ak to chcete urobiť, musíte do prvku videa pridať poslucháčov udalostí a zapisovať funkcie na ovládanie videa.

Zvýšte zapojenie používateľov pomocou prehrávača videa

So správnymi nástrojmi a technikami môžete ľahko vytvoriť prehrávač videa v Reacte. Môžete tiež pridať ďalšie funkcie na zvýšenie zapojenia používateľov. Prehrávače médií sú skvelým spôsobom, ako zvýšiť zapojenie používateľov na váš web alebo aplikáciu.

Po pridaní prehrávača videa na svoj web nezabudnite sledovať interakciu používateľov, aby ste zistili, či má požadovaný účinok. Môžete tiež nasadiť A/B testovanie, aby ste zistili, či pridanie prehrávača videa zvyšuje mieru konverzie.