Kaltaisesi lukijat auttavat tukemaan MUO: ta. Kun teet ostoksen käyttämällä sivustollamme olevia linkkejä, voimme ansaita kumppanipalkkion. Lue lisää.

Videosoittimen luominen Reactissa saattaa tuntua haastavalta tehtävältä. Mutta oikeilla työkaluilla ja tekniikoilla voit tehdä sen suhteellisen helposti.

On kaksi tapaa luoda videosoitin Reactissa: käyttämällä sisäänrakennettuja ominaisuuksia ja käyttämällä kolmannen osapuolen kirjastoja.

Videosoittimen luominen Reactissa

Ennen kuin luot React-videosoittimen, varmista, että sinulla on perustiedot HTML: stä, CSS: stä ja JavaScriptistä.

Aloita React-perussovelluksen luominen lisätäksesi seuraavan videosoittimen toiminnon.

Sisäänrakennettujen ominaisuuksien käyttäminen (React Hooks)

Ensimmäinen vaihtoehto videosoittimen luomiseen Reactissa on käyttää sisäänrakennettuja ominaisuuksia.

Aloita luomalla soitinkomponentti, joka näyttää videon ja kaikki sen säätimet. Tee tämä luomalla tiedosto nimeltä "Player.js" ja lisäämällä seuraava koodi:

tuonti Reagoi
instagram viewer
alkaen "reagoi";

konst Pelaaja = () => {
palata (
<div>
<videon leveys ="100%" korkeus ="100%" säätimet>
<lähde src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" tyyppi="video/mp4" />
</video>
</div>
)
}

viedäoletuksena Pelaaja;

Tämä koodi tuo React-kirjaston ja luo pelaajakomponentin. Se lisää myös videoelementin, jonka controls-attribuutti on "true". Tämä lisää perusvideosoittimen sivulle.

Lisää seuraavaksi toisto/tauko-painike. Voit tehdä tämän lisäämällä muutaman rivin koodia soitinkomponenttiin. Lisää seuraava koodi Player.js-tiedostoon:

tuonti Reagoi, { useState, useRef } alkaen "reagoi";

konst Pelaaja = () => {
konst [isPlaying, setIsPlaying] = useState(väärä);
konst videoRef = useRef(tyhjä);

konst togglePlay = () => {
if (isplaying) {
videoRef.virta.tauko();
} muu {
videoRef.virta.pelata();
}
setIsPlaying(!isPlaying);
};

palata (
<div>
<video
ref={videoRef}
leveys ="100%"
korkeus ="100%"
säätimet
>
<lähde src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" tyyppi="video/mp4" />
</video>
<painike onClick={togglePlay}>
{pelaa? "Tauko": "pelata"}
</button>
</div>
)
}

viedäoletuksena Pelaaja;

Tämä koodi käyttää useState- ja useRef-koukut seurataksesi videon tilaa (toistetaanko vai keskeytetäänkö se) ja viittausta videoelementtiin. Se lisää myös togglePlay-toiminnon, joka toistaa ja keskeyttää videon. Painikeelementti käynnistää togglePlay-toiminnon.

Viimeinen vaihe on edistymispalkin lisääminen. Voit tehdä tämän lisäämällä muutaman koodirivin Player.js-tiedostoon. Lisää seuraavat:

tuonti Reagoi, { useState, useRef } alkaen "reagoi";

konst Pelaaja = () => {
konst [isPlaying, setIsPlaying] = useState(väärä);
konst [progress, setProgress] = useState(0);
konst videoRef = useRef(tyhjä);

konst togglePlay = () => {
if (isplaying) {
videoRef.virta.tauko();
} muu {
videoRef.virta.pelata();
}
setIsPlaying(!isPlaying);
};

konst handleProgress = () => {
konst kesto = videoRef.current.duration;
konst currentTime = videoRef.current.currentTime;
konst edistyminen = (nykyinen aika / kesto) * 100;
setProgress (progress);
};
palata (
<div>
<video
onTimeUpdate={handleProgress}
ref={videoRef}
leveys ="100%"
korkeus ="100%"
säätimet
>
<lähde src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" tyyppi="video/mp4" />
</video>
<div>
<painike onClick={togglePlay}>
{pelaa? "Tauko": "pelata"}
</button>
<edistymisen arvo={progress} max="100" />
</div>
</div>
)
}

viedäoletuksena Pelaaja;

Tämä koodi lisää handleProgress-funktion. Tämä toiminto päivittää edistymispalkin. Se lisää myös onTimeUpdate-tapahtuman kuuntelijan videoelementtiin, joka käynnistää handleProgress-toiminnon. Lopuksi se lisää sivulle edistymiselementin, jonka arvo- ja max-attribuutit on asetettu edistymiseen ja 100.

Kolmannen osapuolen kirjastojen käyttäminen

Toinen vaihtoehto videosoittimen luomiseen Reactissa on käyttää kolmannen osapuolen kirjastoja. Saatavilla on monia kirjastoja, mutta suosituimpia ovat ReactPlayer ja React-media-player.

ReactPlayer

ReactPlayer on yksinkertainen, kevyt kirjasto, jonka avulla voit luoda videosoittimen vain muutamalla koodirivillä. Asenna se suorittamalla seuraava komento päätteessäsi:

npm Asentaa reagoiva pelaaja

Asennuksen jälkeen voit käyttää sitä seuraavasti:

tuonti Reagoi alkaen "reagoi";
tuonti ReactPlayer alkaen 'reagoi-pelaaja';

konst Pelaaja = () => {
palata (
<ReactPlayer
url="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
leveys ="100%"
korkeus ="100%"
säätimet
/>
)
}

viedäoletuksena Pelaaja;

Tämä koodi tuo ReactPlayer-komponentin react-player-kirjastosta ja lisää sen sivulle. Se asettaa URL-osoitteen, leveyden, korkeuden ja ohjaa attribuutteja. Tarkastele kutakin näistä parametreista yksitellen:

  • url: Tämä on sen videon URL-osoite, jonka haluat toistaa.
  • leveys: Tämä on videosoittimen leveys.
  • korkeus: Tämä on videosoittimen korkeus.
  • säätimet: Tämä on boolen attribuutti, joka määrittää, onko videosoittimessa säätimiä vai ei.

react-video-js-soitin

react-video-js-player on toinen yksinkertainen, kevyt kirjasto, jonka avulla voit luoda videosoittimen vain muutamalla koodirivillä. Asenna se suorittamalla seuraava komento päätteessäsi:

npm Asentaa react-video-js-soitin

Asennuksen jälkeen voit käyttää sitä seuraavasti:

tuonti Reagoi alkaen "reagoi";
tuonti Videosoitin alkaen "react-video-js-player";

konst Pelaaja = () => {
palata (
<Videosoitin
leveys ="100%"
korkeus ="100%"
src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
säätimet
/>
)
}

viedäoletuksena Pelaaja;

Tämä koodi tuo VideoPlayer-komponentin react-video-js-player-kirjastosta ja lisää sen sivulle.

Videosoittimen lisäominaisuudet

Voit lisätä videosoittimeesi lisäominaisuuksia, kuten:

  1. Julisteen lisääminen: Voit lisätä julistekuvan videosoittimeen asettamalla videoelementin julisteattribuutin kuvan URL-osoitteeksi.
  2. Kierto: Voit loop videosi asettamalla videoelementin silmukkaattribuutiksi "true".
  3. Mykistetty: Voit mykistää videosi asettamalla videoelementin mykistetty-attribuutin arvoon "true".
  4. Automaattinen toisto: Voit toistaa videosi automaattisesti asettamalla videoelementin automaattisen toiston attribuutiksi "true".

Voit myös lisätä omia mukautettuja säätimiä videosoittimeen. Tätä varten sinun on lisättävä videoelementtiin tapahtumakuuntelijoita ja kirjoitettava toimintoja videon ohjaamiseksi.

Lisää käyttäjien sitoutumista videosoittimella

Oikeilla työkaluilla ja tekniikoilla voit helposti luoda videosoittimen Reactissa. Voit myös lisätä lisäominaisuuksia käyttäjien sitoutumisen lisäämiseksi. Mediasoittimet ovat loistava tapa lisätä käyttäjien sitoutumista verkkosivustoosi tai sovellukseesi.

Kun olet lisännyt videosoittimen sivustollesi, muista seurata käyttäjien sitoutumista nähdäksesi, onko sillä haluttu vaikutus. Voit myös ottaa käyttöön A/B-testauksen nähdäksesi, lisääkö videosoittimen lisääminen tulosprosenttia.