Teiesugused lugejad aitavad MUO-d toetada. Kui teete ostu meie saidil olevate linkide abil, võime teenida sidusettevõtte komisjonitasu. Loe rohkem.

Reactis videopleieri loomine võib tunduda keeruline ülesanne. Kuid õigete tööriistade ja tehnikatega saate seda suhteliselt lihtsalt teha.

Reactis on videopleieri loomiseks kaks võimalust: kasutades sisseehitatud funktsioone ja kasutades kolmandate osapoolte teeke.

Videopleieri loomine rakenduses React

Enne Reacti videopleieri loomist veenduge, et teil oleks HTML-i, CSS-i ja JavaScripti põhiteadmised.

Alusta sellest põhilise Reacti rakenduse loomine järgmise videopleieri funktsiooni lisamiseks.

Sisseehitatud funktsioonide kasutamine (React Hooks)

Esimene võimalus Reactis videopleieri loomiseks on kasutada sisseehitatud funktsioone.

Alustage pleieri komponendi loomisega, mis kuvab video ja kõik selle juhtelemendid. Selleks looge fail nimega "Player.js" ja lisage järgmine kood:

importida Reageerige alates 'reageerida';

konst Mängija = () => {
tagasi (
<

instagram viewer
div>
<video laius="100%" kõrgus ="100%" juhtnupud>
<allikas src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" tüüp="video/mp4" />
</video>
</div>
)
}

eksportidavaikimisi Mängija;

See kood impordib Reacti teegi ja loob mängija komponendi. Samuti lisab see videoelemendi, mille juhtelementide atribuudiks on seatud "tõene". See lisab lehele põhivideopleieri.

Järgmisena lisage taasesituse/pausi nupp. Selleks peate pleieri komponendile lisama paar koodirida. Lisage faili Player.js järgmine kood:

importida Reageerida, { useState, useRef } alates 'reageerida';

konst Mängija = () => {
konst [isPlaying, setIsPlaying] = useState(vale);
konst videoRef = useRef(null);

konst togglePlay = () => {
if (mängib) {
videoRef.praegune.paus();
} muidu {
videoRef.praegune.mängida();
}
setIsPlaying(!isPlaying);
};

tagasi (
<div>
<video
ref={videoRef}
laius="100%"
kõrgus ="100%"
juhtnupud
>
<allikas src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" tüüp="video/mp4" />
</video>
<nupp onClick={togglePlay}>
{mängib? "Paus": "Mängi"}
</button>
</div>
)
}

eksportidavaikimisi Mängija;

See kood kasutab konksud useState ja useRef et jälgida video olekut (kas seda esitatakse või peatatud) ja viidet videoelemendile. See lisab ka funktsiooni TogglePlay, mis esitab ja peatab video. Nupuelement käivitab funktsiooni togglePlay.

Viimane samm on edenemisriba lisamine. Selleks peate faili Player.js lisama veel paar rida koodi. Lisage järgmine:

importida Reageerida, { useState, useRef } alates 'reageerida';

konst Mängija = () => {
konst [isPlaying, setIsPlaying] = useState(vale);
konst [progress, setProgress] = useState(0);
konst videoRef = useRef(null);

konst togglePlay = () => {
if (mängib) {
videoRef.praegune.paus();
} muidu {
videoRef.praegune.mängida();
}
setIsPlaying(!isPlaying);
};

konst handProgress = () => {
konst kestus = videoRef.current.duration;
konst currentTime = videoRef.current.currentTime;
konst edenemine = (praegune aeg / kestus) * 100;
setProgress (progress);
};
tagasi (
<div>
<video
onTimeUpdate={handleProgress}
ref={videoRef}
laius="100%"
kõrgus ="100%"
juhtnupud
>
<allikas src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" tüüp="video/mp4" />
</video>
<div>
<nupp onClick={togglePlay}>
{mängib? "Paus": "Mängi"}
</button>
<edenemise väärtus={edenemine} max="100" />
</div>
</div>
)
}

eksportidavaikimisi Mängija;

See kood lisab funktsiooni handleProgress. See funktsioon värskendab edenemisriba. Samuti lisab see videoelemendile onTimeUpdate'i sündmuste kuulaja, mis käivitab funktsiooni handleProgress. Lõpuks lisab see lehele edenemise elemendi, mille väärtus ja max atribuudid on seatud vastavalt edenemisele ja 100-le.

Kolmandate osapoolte raamatukogude kasutamine

Teine võimalus Reactis videopleieri loomiseks on kasutada kolmandate osapoolte teeke. Saadaval on palju teeke, kuid mõned kõige populaarsemad on ReactPlayer ja React-media-player.

ReactPlayer

ReactPlayer on lihtne ja kerge raamatukogu, mis võimaldab teil luua videopleieri vaid mõne koodireaga. Selle installimiseks käivitage terminalis järgmine käsk:

npm installida reageerija-mängija

Pärast installimist saate seda kasutada järgmiselt:

importida Reageerige alates 'reageerida';
importida ReactPlayer alates 'reageerija';

konst Mängija = () => {
tagasi (
<ReactPlayer
url="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
laius="100%"
kõrgus ="100%"
juhtnupud
/>
)
}

eksportidavaikimisi Mängija;

See kood impordib ReactPlayeri komponendi react-playeri teegist ja lisab selle lehele. See määrab URL-i, laiuse, kõrguse ja kontrolli atribuute. Vaadake ükshaaval kõiki neid parameetreid:

  • url: See on selle video URL, mida soovite esitada.
  • laius: See on videopleieri laius.
  • kõrgus: See on videopleieri kõrgus.
  • juhtnupud: See on tõeväärtuslik atribuut, mis määrab, kas videopleieril on juhtnupud või mitte.

react-video-js-player

react-video-js-player on veel üks lihtne ja kerge teek, mis võimaldab teil luua videopleieri vaid mõne koodireaga. Selle installimiseks käivitage terminalis järgmine käsk:

npm installida react-video-js-player

Pärast installimist saate seda kasutada järgmiselt:

importida Reageerige alates "reageerida";
importida Video mängija alates "react-video-js-player";

konst Mängija = () => {
tagasi (
<Video mängija
laius="100%"
kõrgus ="100%"
src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
juhtnupud
/>
)
}

eksportidavaikimisi Mängija;

See kood impordib komponendi VideoPlayer teegist react-video-js-player ja lisab selle lehele.

Videopleieri lisafunktsioonid

Saate lisada oma videopleierile lisafunktsioone, näiteks:

  1. Plakati lisamine: Saate lisada oma videopleierisse plakatipildi, määrates videoelemendi atribuudiks plakat pildi URL-ile.
  2. Looming: Saate oma videot korrata, määrates videoelemendi silmuseatribuudi väärtuseks "tõene".
  3. Vaigistatud: Saate oma video vaigistada, määrates videoelemendi vaigistatud atribuudi väärtuseks "tõene".
  4. Automaatne esitus: Saate oma videot automaatselt esitada, määrates videoelemendi automaatse esitamise atribuudi väärtuseks "tõene".

Saate lisada videopleierile ka oma kohandatud juhtnupud. Selleks peate videoelemendile lisama sündmuste kuulajad ja kirjutama video juhtimiseks funktsioone.

Suurendage kasutajate seotust videopleieriga

Õigete tööriistade ja tehnikatega saate hõlpsasti luua Reactis videopleieri. Kasutajate seotuse suurendamiseks saate lisada ka lisafunktsioone. Meediapleierid on suurepärane viis kasutajate seotuse suurendamiseks teie veebisaidil või rakenduses.

Pärast saidile videopleieri lisamist jälgige kindlasti kasutajate seotust, et näha, kas sellel on soovitud mõju. Saate juurutada ka A/B testimise, et näha, kas videopleieri lisamine suurendab konversioonimäärasid.