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:
- 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.
- Hurkolás: A videót hurkolhatja úgy, hogy a videóelem loop attribútuma „true” értékre állítja.
- Tompított: A videót elnémíthatja, ha a videóelem elnémított attribútuma „igaz” értékre állítja.
- 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.