Video atskaņotāja izveide programmā React varētu šķist sarežģīts uzdevums. Bet, izmantojot pareizos rīkus un paņēmienus, jūs to varat izdarīt samērā viegli.
Ir divi veidi, kā izveidot video atskaņotāju programmā React: izmantojot iebūvētās funkcijas un trešo pušu bibliotēkas.
Video atskaņotāja izveide programmā React
Pirms React video atskaņotāja izveides pārliecinieties, ka jums ir pamatzināšanas par HTML, CSS un JavaScript.
Sāciet ar izveidojot pamata React lietotni lai pievienotu tālāk norādīto video atskaņotāja funkcionalitāti.
Iebūvēto funkciju izmantošana (React Hooks)
Pirmā iespēja izveidot video atskaņotāju programmā React ir izmantot iebūvētās funkcijas.
Sāciet, izveidojot atskaņotāja komponentu, kas parādīs video un visas tā vadīklas. Lai to izdarītu, izveidojiet failu ar nosaukumu “Player.js” un pievienojiet šādu kodu:
imports Reaģēt no "reaģēt";
konst Spēlētājs = () => {
atgriezties (
<div>
<video platums="100%" augstums ="100%" vadīklas>
<avots src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" tips="video/mp4" />
</video>
</div>
)
}
eksportētnoklusējuma Spēlētājs;
Šis kods importē React bibliotēku un izveido atskaņotāja komponentu. Tas arī pievieno video elementu ar vadības atribūtu, kas iestatīts uz “true”. Tādējādi lapai tiks pievienots pamata video atskaņotājs.
Pēc tam pievienojiet atskaņošanas/pauzes pogu. Lai to izdarītu, atskaņotāja komponentam būs jāpievieno dažas koda rindiņas. Pievienojiet failu Player.js šādu kodu:
imports Reaģēt, { useState, useRef } no "reaģēt";konst Spēlētājs = () => {
konst [isPlaying, setIsPlaying] = useState(viltus);
konst videoRef = useRef(null);
konst togglePlay = () => {
if (isspēlē) {
videoRef.strāva.pauze();
} cits {
videoRef.strāva.spēlēt();
}
setIsPlaying(!isPlaying);
};
atgriezties (
<div>
<video
ref={videoRef}
platums="100%"
augstums ="100%"
vadīklas
>
<avots src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" tips="video/mp4" />
</video>
<poga onClick={togglePlay}>
{spēlē? "Pauze": "Spēlēt"}
</button>
</div>
)
}
eksportētnoklusējuma Spēlētājs;
Šis kods izmanto useState un useRef āķi lai sekotu līdzi videoklipa stāvoklim (vai tas tiek atskaņots vai apturēts) un atsaucei uz video elementu. Tas arī pievieno togglePlay funkciju, kas atskaņos un apturēs videoklipu. Pogas elements aktivizēs togglePlay funkciju.
Pēdējais solis ir pievienot progresa joslu. Lai to izdarītu, failam Player.js jāpievieno vēl dažas koda rindiņas. Pievienojiet tālāk norādīto.
imports Reaģēt, { useState, useRef } no "reaģēt";konst Spēlētājs = () => {
konst [isPlaying, setIsPlaying] = useState(viltus);
konst [progress, setProgress] = useState(0);
konst videoRef = useRef(null);
konst togglePlay = () => {
if (isspēlē) {
videoRef.strāva.pauze();
} cits {
videoRef.strāva.spēlēt();
}
setIsPlaying(!isPlaying);
};
konst handProgress = () => {
konst ilgums = videoRef.current.duration;
konst currentTime = videoRef.current.currentTime;
konst progress = (pašreizējais laiks / ilgums) * 100;
setProgress (progress);
};
atgriezties (
<div>
<video
onTimeUpdate={handleProgress}
ref={videoRef}
platums="100%"
augstums ="100%"
vadīklas
>
<avots src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" tips="video/mp4" />
</video>
<div>
<poga onClick={togglePlay}>
{spēlē? "Pauze": "Spēlēt"}
</button>
<progresa vērtība={progress} max="100" />
</div>
</div>
)
}
eksportētnoklusējuma Spēlētājs;
Šis kods pievieno HandProgress funkciju. Šī funkcija atjauninās progresa joslu. Tas arī pievieno video elementam onTimeUpdate notikumu klausītāju, kas aktivizēs HandProgress funkciju. Visbeidzot, lapai tiek pievienots progresa elements ar vērtību un maksimālo atribūtu, kas iestatīts attiecīgi uz progresu un 100.
Trešo pušu bibliotēku izmantošana
Otrā iespēja izveidot video atskaņotāju programmā React ir izmantot trešo pušu bibliotēkas. Ir pieejamas daudzas bibliotēkas, taču dažas no populārākajām ir ReactPlayer un React-media-player.
ReactPlayer
ReactPlayer ir vienkārša, viegla bibliotēka, kas ļauj izveidot video atskaņotāju, izmantojot tikai dažas koda rindiņas. Lai to instalētu, terminālī palaidiet šādu komandu:
npm uzstādīt reaģēt-spēlētājsPēc instalēšanas varat to izmantot šādi:
imports Reaģēt no "reaģēt";
imports ReactPlayer no 'reaģējošs spēlētājs';konst Spēlētājs = () => {
atgriezties (
<ReactPlayer
url="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
platums="100%"
augstums ="100%"
vadīklas
/>
)
}
eksportētnoklusējuma Spēlētājs;
Šis kods importē ReactPlayer komponentu no react-player bibliotēkas un pievieno to lapai. Tas nosaka URL, platumu, augstumu un vadības atribūtus. Apskatiet katru no šiem parametriem pa vienam:
- url: Šis ir tā videoklipa URL, kuru vēlaties atskaņot.
- platums: Šis ir video atskaņotāja platums.
- augstums: Šis ir video atskaņotāja augstums.
- vadīklas: Šis ir Būla atribūts, kas nosaka, vai video atskaņotājam būs vadīklas.
react-video-js-player
react-video-js-player ir vēl viena vienkārša, viegla bibliotēka, kas ļauj izveidot video atskaņotāju, izmantojot tikai dažas koda rindiņas. Lai to instalētu, terminālī palaidiet šādu komandu:
npm uzstādīt react-video-js-playerPēc instalēšanas varat to izmantot šādi:
imports Reaģēt no "reaģēt";
imports Video atskaņotājs no "react-video-js-player";konst Spēlētājs = () => {
atgriezties (
<Video atskaņotājs
platums="100%"
augstums ="100%"
src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
vadīklas
/>
)
}
eksportētnoklusējuma Spēlētājs;
Šis kods importē VideoPlayer komponentu no react-video-js-player bibliotēkas un pievieno to lapai.
Papildu video atskaņotāja funkcijas
Video atskaņotājam varat pievienot papildu funkcijas, piemēram:
- Plakāta pievienošana: Varat pievienot plakāta attēlu savam video atskaņotājam, iestatot video elementa plakāta atribūtu attēla URL.
- Cilpa: Varat izveidot cilpu video, iestatot video elementa cilpas atribūtu uz “true”.
- Izslēgts: Varat izslēgt videoklipa skaņu, iestatot video elementa izslēgto atribūtu uz “true”.
- Automātiskā atskaņošana: Varat automātiski atskaņot videoklipu, iestatot video elementa automātiskās atskaņošanas atribūtu uz “true”.
Varat arī pievienot video atskaņotājam savas pielāgotās vadīklas. Lai to izdarītu, video elementam ir jāpievieno notikumu uztvērēji un jāraksta funkcijas video vadīšanai.
Palieliniet lietotāju iesaisti, izmantojot video atskaņotāju
Izmantojot pareizos rīkus un paņēmienus, programmā React varat viegli izveidot video atskaņotāju. Varat arī pievienot papildu funkcijas, lai palielinātu lietotāju iesaisti. Multivides atskaņotāji ir lielisks veids, kā palielināt lietotāju iesaisti jūsu vietnē vai lietojumprogrammā.
Pēc video atskaņotāja pievienošanas savai vietnei noteikti izsekojiet lietotāju iesaistei, lai noskaidrotu, vai tai ir vēlamais efekts. Varat arī izvietot A/B testēšanu, lai noskaidrotu, vai video atskaņotāja pievienošana palielina reklāmguvumu līmeni.
