Az Önhöz hasonló olvasók támogatják a MUO-t. Amikor a webhelyünkön található linkek használatával vásárol, társult jutalékot kaphatunk. Olvass tovább.

A React-ban videolejátszó létrehozása kihívást jelentő feladatnak tűnhet. De a megfelelő eszközökkel és technikákkal ezt viszonylag könnyen megteheti.

A Reactban kétféleképpen hozhat létre videolejátszót: beépített funkciók és harmadik féltől származó könyvtárak használatával.

Videolejátszó létrehozása a Reactban

A React videolejátszó létrehozása előtt győződjön meg arról, hogy rendelkezik a HTML, a CSS és a JavaScript alapvető ismereteivel.

Kezdje ezzel egy alap React alkalmazás létrehozása a következő videólejátszó funkciók hozzáadásához.

Beépített funkciók használata (React Hooks)

Az első lehetőség a videolejátszó létrehozására a React alkalmazásban a beépített funkciók használata.

Kezdje a lejátszó komponens létrehozásával, amely megjeleníti a videót és annak összes vezérlőjét. Ehhez hozzon létre egy „Player.js” nevű fájlt, és adja hozzá a következő kódot:

import Reagál tól től 'reagál';

const Játékos = () => {
Visszatérés (
<div>
<videó szélessége="100%" magasság="100%" vezérlők>
<forrás src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" típus="videó/mp4" />
</video>
</div>
)
}

exportalapértelmezett Játékos;

Ez a kód importálja a React könyvtárat, és létrehoz egy lejátszó összetevőt. Ezenkívül hozzáad egy videoelemet, amelynek a controls attribútuma „true”-ra van állítva. Ezzel hozzáadja az alap videolejátszót az oldalhoz.

Ezután adja hozzá a lejátszás/szünet gombot. Ehhez hozzá kell adnia néhány sor kódot a lejátszó összetevőhöz. Adja hozzá a következő kódot a Player.js fájlhoz:

import React, { useState, useRef } tól től 'reagál';

const Játékos = () => {
const [isPlaying, setIsPlaying] = useState(hamis);
const videoRef = useRef(nulla);

const togglePlay = () => {
if (isplaying) {
videoRef.jelenlegi.szünet();
} más {
videoRef.jelenlegi.játék();
}
setIsPlaying(!isPlaying);
};

Visszatérés (
<div>
<videó
ref={videoRef}
szélesség="100%"
magasság="100%"
vezérlők
>
<forrás src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" típus="videó/mp4" />
</video>
<gomb onClick={togglePlay}>
{játszik? "Szünet": "Játék"}
</button>
</div>
)
}

exportalapértelmezett Játékos;

Ez a kód használja a useState és a useRef horgok nyomon követni a videó állapotát (lejátszás alatt vagy szüneteltetve) és a videóelemre való hivatkozást. Ezenkívül egy togglePlay funkciót is hozzáad, amely lejátssza és szünetelteti a videót. A gombelem elindítja a togglePlay funkciót.

Az utolsó lépés a folyamatjelző sáv hozzáadása. Ehhez hozzá kell adnia néhány további kódsort a Player.js fájlhoz. Adja hozzá a következőket:

import React, { useState, useRef } tól től 'reagál';

const Játékos = () => {
const [isPlaying, setIsPlaying] = useState(hamis);
const [progress, setProgress] = useState(0);
const videoRef = useRef(nulla);

const togglePlay = () => {
if (isplaying) {
videoRef.jelenlegi.szünet();
} más {
videoRef.jelenlegi.játék();
}
setIsPlaying(!isPlaying);
};

const handleProgress = () => {
const időtartam = videoRef.current.duration;
const currentTime = videoRef.current.currentTime;
const haladás = (jelenlegi idő / időtartam) * 100;
setProgress (haladás);
};
Visszatérés (
<div>
<videó
onTimeUpdate={handleProgress}
ref={videoRef}
szélesség="100%"
magasság="100%"
vezérlők
>
<forrás src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" típus="videó/mp4" />
</video>
<div>
<gomb onClick={togglePlay}>
{játszik? "Szünet": "Játék"}
</button>
<progress value={progress} max="100" />
</div>
</div>
)
}

exportalapértelmezett Játékos;

Ez a kód hozzáadja a handleProgress függvényt. Ez a funkció frissíti a folyamatjelző sávot. Ezenkívül hozzáad egy onTimeUpdate eseményfigyelőt a videoelemhez, amely elindítja a handleProgress funkciót. Végül hozzáad egy folyamatelemet az oldalhoz, amelynek értéke és max attribútumai vannak beállítva a folyamatra, illetve 100-ra.

Harmadik féltől származó könyvtárak használata

A második lehetőség a videólejátszó létrehozására a Reactban a harmadik féltől származó könyvtárak használata. Számos könyvtár áll rendelkezésre, de a legnépszerűbbek a ReactPlayer és a React-media-player.

ReactPlayer

A ReactPlayer egy egyszerű, könnyű könyvtár, amely lehetővé teszi videólejátszó létrehozását mindössze néhány sornyi kóddal. A telepítéshez futtassa a következő parancsot a terminálon:

npm telepítés reagáló játékos

A telepítés után a következőképpen használhatja:

import Reagál tól től 'reagál';
import ReactPlayer tól től „reagáló játékos”;

const Játékos = () => {
Visszatérés (
<ReactPlayer
url="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
szélesség="100%"
magasság="100%"
vezérlők
/>
)
}

exportalapértelmezett Játékos;

Ez a kód importálja a ReactPlayer összetevőt a react-player könyvtárból, és hozzáadja az oldalhoz. Beállítja az url-t, a szélességet, a magasságot és az attribútumokat. Tekintse meg ezeket a paramétereket egyenként:

  • url: Ez a lejátszani kívánt videó URL-je.
  • szélesség: Ez a videolejátszó szélessége.
  • magasság: Ez a videolejátszó magassága.
  • vezérlők: Ez egy logikai attribútum, amely meghatározza, hogy a videolejátszó rendelkezik-e vezérlőkkel vagy sem.

react-video-js-player

A react-video-js-player egy másik egyszerű, könnyű könyvtár, amely lehetővé teszi videólejátszó létrehozását néhány sornyi kóddal. A telepítéshez futtassa a következő parancsot a terminálon:

npm telepítés react-video-js-player

A telepítés után a következőképpen használhatja:

import Reagál tól től "reagál";
import Videó lejátszó tól től "react-video-js-player";

const Játékos = () => {
Visszatérés (
<Videó lejátszó
szélesség="100%"
magasság="100%"
src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
vezérlők
/>
)
}

exportalapértelmezett Játékos;

Ez a kód importálja a VideoPlayer összetevőt a react-video-js-player könyvtárból, és hozzáadja az oldalhoz.

További videolejátszó funkciók

További funkciókat adhat hozzá videolejátszójához, például:

  1. Plakát hozzáadása: Hozzáadhat egy poszterképet a videólejátszójához, ha a videóelem poszter attribútumaként beállítja a kép URL-címét.
  2. Hurkolás: A videót hurkolhatja úgy, hogy a videóelem loop attribútuma „true” értékre állítja.
  3. Tompított: A videót elnémíthatja, ha a videóelem elnémított attribútuma „igaz” értékre állítja.
  4. Automatikus lejátszás: A videót automatikusan lejátszhatja, ha a videóelem automatikus lejátszási attribútuma „igaz” értékre állítja.

Saját egyéni vezérlőket is hozzáadhat a videolejátszóhoz. Ehhez eseményfigyelőket kell hozzáadnia a videóelemhez, és a videó vezérléséhez funkciókat kell írnia.

Növelje a felhasználók elkötelezettségét egy videolejátszóval

A megfelelő eszközökkel és technikákkal könnyedén létrehozhat videolejátszót a Reactban. A felhasználói elköteleződés növelése érdekében további funkciókat is hozzáadhat. A médialejátszók nagyszerű lehetőséget kínálnak a felhasználók webhelye vagy alkalmazása iránti elkötelezettségének növelésére.

Miután hozzáadott egy videolejátszót webhelyéhez, mindenképpen kövesse nyomon a felhasználói elköteleződést, hogy megtudja, meghozza-e a kívánt hatást. Az A/B tesztelést is beveheti annak megállapítására, hogy a videolejátszó hozzáadása növeli-e a konverziós arányt.