React – veidojam audio/video komponentu atskaņotājam

Šajā rakstā jūs uzzināsiet, kā instalēt react atskaņotāja pakotni un pēc tam izmantot to, lai react lietotnēs renderētu multivides atskaņotāju, pastāstīšu, kā lietot vairākus izplatītus iestatījumus un iestatīt atskaņotājam, automātisko atskaņošanu un sākuma skaļumu.

Apskatīsim pavisam vienkāršu lietotnes kodu, ko esmu izveidojis, izmantojot jau zināmo termināļa komandu npx create-react-app.

import './App.css';

function App() {

return (

<div className='App'>

<h1>React Player piemērs</h1>

</div>

);

}

export default App;

Pašlaik tas ir diezgan vienkāršs un atveido tikai <h1> virsrakstu, kurā ir lasāms rakstīts “React Player piemērs“. Padarīsim šo virsrakstu patiesu, pievienojot video atskaņotāju.

Šī procesa pirmais solis ir react atskaņotāja moduļa instalēšana, bet otrais solis ir tā importēšana manā lietotnes komponentā.

Lai instalētu moduli, es terminālī izpildīšu komandu:

npm install react-player

Kad moduļa instalēšana ir pabeigta, tas kļūst pieejams jebkuram mana projekta komponentam, bet tikai tad, ja es to importēju.

Tāpēc es izmantošu komandu import ReactPlayer from “react-player”;   Tagad esmu gatavs pievienot importēto react player pakotni kā komponentu un renderēt to no lietotnes komponenta.

import './App.css';

import ReactPlayer from "react-player";

function App() {

return (

<div className='App'>

<h1>React Player piemērs</h1>

</div> );

}

export default App;

Es arī vēlos iepriekš iestatīt dažus atskaņotāja iestatījumus, lai nodrošinātu, ka videoklips netiek automātiski atskaņots lapas ielādes laikā un lai sākuma skaļums būtu 50% no maksimālā. Lai to izdarītu, es pievienoju dažus atribūtus react player.

import './App.css';

import ReactPlayer from "react-player";

function App() {

return (

<div className='App'>

<h1>React Player piemērs</h1>

<ReactPlayer

url={vidUrl}

playing={false}

volume={0.5}

/>

</div>

);

}

export default App;

Iespējams, pamanījāt, ka React komponents satur arī rindiņu url={vidUrl} Tas attiecas uz tīmekļa saiti videoklipam, kas vēl nav iestatīts. Tagad, kad viss parējais izņemot to ir iestatīts, pievienosim šo saiti uz video URL mainīgo.

import './App.css';

import ReactPlayer from "react-player";

function App() {

const vidUrl = "https://youtu.be/ZKnWPNDOCdw";

return (

<div className='App'>

<h1>React Player piemērs</h1>

<ReactPlayer url={vidUrl}

playing={false}

volume={0.5}

/>

</div>

);

}

export default App;

Es varu atskaņot video, izmantot iebūvētās vadības ierīces, un video sākas ar pusi no skaļuma, tāpēc šķiet, ka viss ir pareizi.

Visbeidzot, jūs varat atrast projektus github.com/CookPete/react-player Šīs lapas labajā pusē ir sadaļa “Par”, kas ved uz vietni https://cookpete.com/react-player/, kurā atradīsit saiti uz atskaņotāja demonstrāciju. Varat izvēlēties no vairākiem video avotiem un mainīt video iestatījumus, piemēram, atskaņošanas ātrumu, apgaismojuma režīmu, cilpu un citus. Ja vēlaties uzzināt vairāk par react player.

Es iesaku eksperimentēt ar šiem iestatījumiem un konsultēties par projektiem ar autoru, ja ir tāda iespēja.