Vaizdo įrašų grotuvo kūrimas „React“ gali atrodyti sudėtinga užduotis. Tačiau naudodami tinkamus įrankius ir metodus tai galite padaryti gana lengvai.
Yra du būdai sukurti vaizdo įrašų grotuvą „React“: naudojant integruotas funkcijas ir trečiųjų šalių bibliotekas.
Vaizdo įrašų grotuvo kūrimas „React“.
Prieš kurdami „React“ vaizdo įrašų grotuvą, įsitikinkite, kad turite pagrindinius HTML, CSS ir „JavaScript“ supratimus.
Pradėkite nuo sukurti pagrindinę „React“ programą Norėdami pridėti toliau nurodytas vaizdo grotuvo funkcijas.
Integruotų funkcijų naudojimas (React Hooks)
Pirmoji galimybė sukurti vaizdo įrašų grotuvą „React“ yra naudoti integruotas funkcijas.
Pradėkite kurdami grotuvo komponentą, kuriame bus rodomas vaizdo įrašas ir visi jo valdikliai. Norėdami tai padaryti, sukurkite failą pavadinimu „Player.js“ ir pridėkite šį kodą:
importuoti Reaguoti
iš „reaguoti“;konst Žaidėjas = () => {
grąžinti (
<div>
<vaizdo įrašo plotis ="100%" aukštis ="100%" valdikliai>
<šaltinis src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" tipas ="video/mp4" />
</video>
</div>
)
}
eksportuotinumatytas Žaidėjas;
Šis kodas importuoja „React“ biblioteką ir sukuria grotuvo komponentą. Taip pat pridedamas vaizdo elementas, kurio valdiklių atributas nustatytas į „true“. Taip prie puslapio bus pridėtas pagrindinis vaizdo įrašų grotuvas.
Tada pridėkite paleidimo / pristabdymo mygtuką. Norėdami tai padaryti, prie grotuvo komponento turėsite pridėti kelias kodo eilutes. Pridėkite šį kodą prie Player.js failo:
importuoti Reaguoti, { useState, useRef } iš „reaguoti“;konst Žaidėjas = () => {
konst [isPlaying, setIsPlaying] = useState(klaidinga);
konst videoRef = useRef(nulinis);
konst togglePlay = () => {
if (žaidžia) {
videoRef.dabartinė.Pauzė();
} Kitas {
videoRef.dabartinė.žaisti();
}
setIsPlaying(!isPlaying);
};
grąžinti (
<div>
<vaizdo įrašą
ref={videoRef}
plotis ="100%"
aukštis ="100%"
valdikliai
>
<šaltinis src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" tipas ="video/mp4" />
</video>
<mygtukas onClick={togglePlay}>
{groja? "Pauzė": "žaisti"}
</button>
</div>
)
}
eksportuotinumatytas Žaidėjas;
Šis kodas naudoja „useState“ ir „useRef“ kabliukai stebėti vaizdo įrašo būseną (ar jis leidžiamas, ar pristabdytas) ir nuorodą į vaizdo įrašo elementą. Ji taip pat prideda perjungimo funkciją, kuri leis ir pristabdys vaizdo įrašą. Mygtuko elementas suaktyvins togglePlay funkciją.
Paskutinis veiksmas yra pridėti eigos juostą. Norėdami tai padaryti, prie Player.js failo turėsite pridėti dar kelias kodo eilutes. Pridėti:
importuoti Reaguoti, { useState, useRef } iš „reaguoti“;konst Žaidėjas = () => {
konst [isPlaying, setIsPlaying] = useState(klaidinga);
konst [progress, setProgress] = useState(0);
konst videoRef = useRef(nulinis);
konst togglePlay = () => {
if (žaidžia) {
videoRef.dabartinė.Pauzė();
} Kitas {
videoRef.dabartinė.žaisti();
}
setIsPlaying(!isPlaying);
};
konst handProgress = () => {
konst trukmė = videoRef.current.duration;
konst currentTime = videoRef.current.currentTime;
konst eiga = (dabartinis laikas / trukmė) * 100;
setProgress (progress);
};
grąžinti (
<div>
<vaizdo įrašą
onTimeUpdate={handleProgress}
ref={videoRef}
plotis ="100%"
aukštis ="100%"
valdikliai
>
<šaltinis src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" tipas ="video/mp4" />
</video>
<div>
<mygtukas onClick={togglePlay}>
{groja? "Pauzė": "žaisti"}
</button>
<progreso vertė = {progresas} maks. ="100" />
</div>
</div>
)
}
eksportuotinumatytas Žaidėjas;
Šis kodas prideda HandProgress funkciją. Ši funkcija atnaujins eigos juostą. Taip pat prie vaizdo elemento prideda įvykių klausytoją onTimeUpdate, kuris suaktyvins HandProgress funkciją. Galiausiai prie puslapio pridedamas progreso elementas, kurio reikšmė ir max atributai nustatomi atitinkamai eigai ir 100.
Trečiųjų šalių bibliotekų naudojimas
Antroji galimybė sukurti vaizdo įrašų grotuvą „React“ yra naudoti trečiųjų šalių bibliotekas. Yra daug bibliotekų, tačiau kai kurios iš populiariausių yra „ReactPlayer“ ir „React-media-player“.
ReactPlayer
„ReactPlayer“ yra paprasta, lengva biblioteka, leidžianti sukurti vaizdo grotuvą naudojant tik kelias kodo eilutes. Norėdami jį įdiegti, savo terminale paleiskite šią komandą:
npm diegti reaguoja žaidėjasĮdiegę galite jį naudoti taip:
importuoti Reaguoti iš „reaguoti“;
importuoti ReactPlayer iš „reaguojantis žaidėjas“;konst Žaidėjas = () => {
grąžinti (
<ReactPlayer
url="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
plotis ="100%"
aukštis ="100%"
valdikliai
/>
)
}
eksportuotinumatytas Žaidėjas;
Šis kodas importuoja „ReactPlayer“ komponentą iš „react-player“ bibliotekos ir prideda jį prie puslapio. Jis nustato URL, plotį, aukštį ir valdo atributus. Pažvelkite į kiekvieną iš šių parametrų po vieną:
- url: Tai vaizdo įrašo, kurį norite leisti, URL.
- plotis: Tai yra vaizdo grotuvo plotis.
- aukštis: Tai yra vaizdo grotuvo aukštis.
- valdikliai: Tai loginis atributas, nustatantis, ar vaizdo įrašų grotuve bus valdikliai, ar ne.
„react-video-js-player“.
„react-video-js-player“ yra dar viena paprasta, lengva biblioteka, leidžianti sukurti vaizdo įrašų grotuvą naudojant tik kelias kodo eilutes. Norėdami jį įdiegti, savo terminale paleiskite šią komandą:
npm diegti „react-video-js-player“.Įdiegę galite jį naudoti taip:
importuoti Reaguoti iš „reaguoti“;
importuoti Vaizdo grotuvas iš "react-video-js-player";konst Žaidėjas = () => {
grąžinti (
<Vaizdo grotuvas
plotis ="100%"
aukštis ="100%"
src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
valdikliai
/>
)
}
eksportuotinumatytas Žaidėjas;
Šis kodas importuoja „VideoPlayer“ komponentą iš „react-video-js-player“ bibliotekos ir prideda jį prie puslapio.
Papildomos vaizdo grotuvo funkcijos
Prie vaizdo įrašų grotuvo galite pridėti papildomų funkcijų, tokių kaip:
- Plakato pridėjimas: Galite pridėti plakato vaizdą prie vaizdo įrašų grotuvo, nustatydami vaizdo elemento plakato atributą į vaizdo URL.
- Ciklas: Galite pakartoti vaizdo įrašą, nustatydami vaizdo elemento ciklo atributą į „true“.
- Nutildyta: Vaizdo įrašą galite nutildyti nustatę vaizdo elemento nutildyto atributo reikšmę „true“.
- Automatinis paleidimas: Galite automatiškai paleisti vaizdo įrašą, nustatę vaizdo elemento automatinio paleidimo atributą į „true“.
Taip pat prie vaizdo įrašų grotuvo galite pridėti savo pasirinktinius valdiklius. Norėdami tai padaryti, prie vaizdo elemento turėsite pridėti įvykių klausytojų ir įrašyti vaizdo įrašo valdymo funkcijas.
Padidinkite naudotojų įsitraukimą naudodami vaizdo įrašų grotuvą
Naudodami tinkamus įrankius ir metodus galite lengvai sukurti vaizdo įrašų grotuvą „React“. Taip pat galite pridėti papildomų funkcijų, kad padidintumėte vartotojų įsitraukimą. Medijos grotuvai yra puikus būdas padidinti vartotojų įtraukimą į svetainę ar programą.
Pridėję vaizdo įrašų grotuvą prie savo svetainės, būtinai stebėkite naudotojų įsitraukimą, kad sužinotumėte, ar jis duoda norimą efektą. Taip pat galite įdiegti A/B testavimą, kad sužinotumėte, ar vaizdo įrašų grotuvo pridėjimas padidina konversijų rodiklius.
