Në artikullin e mëparshëm, pamë se si të integrojmë video player në një projekt React duke përdorur paketën video.js.
Sot, ne do të shikojmë se si ta personalizojmë luajtësin tonë.
Lëkurat
Gjërat e para që mund të përdorni për të pasur një personalizim të shpejtë dhe të lehtë të luajtësit tuaj, janë Skins.
Të gjithë mund të krijojnë një dhe ta ndajnë atë, ju mund të gjeni një listë të lëkurave të disponueshme këtu:
https://github.com/videojs/video.js/wiki/Skins
Për t'i përdorur ato, ndiqni udhëzimet që ka shkruar autori i lëkurës, por në shumicën e rasteve ju duhet vetëm të instaloni paketën ose të kopjoni/ngjisni skedarin css.
PRO: Lehtë dhe e shpejtë
KUNDËT: Disa prej tyre janë me pagesë
Plugins
Sa i përket lëkurës, të gjithë mund të krijojnë shtojca dhe t'i ndajnë ato.
Shtojcat po sjellin më shumë funksionalitete në luajtësin tuaj, të tilla si trajtimi i gabimeve, enkriptimi,…
Ju mund të gjeni një listë të shtojcave të disponueshme këtu:
PORËT: shmangni kompleksitetin nëse dikush ka punuar tashmë për problemin tuaj
KUNDËT: kini kujdes se cilën paketë përfshini, të gjithë mund të publikojnë shtojca dhe shumica e tyre kanë vetëm një yll, kështu që mund të jetë e rrezikshme përdorimi i tyre në projektin tuaj.
Komponentët
Gjithçka në luajtës është komponent, shiriti i kontrollit, butoni i madh i luajtjes, shiriti i përparimit dhe ju mund të personalizoni gjithçka.
Nëse dëshironi të hiqni shiritin e kontrollit, për shembull, thjesht mund të shtoni kontrolle: false në opsionet e luajtësit tuaj.
Ju gjithashtu mund të krijoni komponentë për shembull, një buton për të shtuar veçori të reja në luajtësin tuaj video.js.
Ne do të shohim së bashku se si të:
- Shtoni një komponent në shiritin e kontrollit
- Shtoni një komponent në luajtës
Shto një komponent në shiritin e kontrollit
Kur dëshironi të shtoni një komponent, këtu një buton, në shiritin e kontrollit, duhet të merrni komponentin prind. Për këtë, mund të përdorni getChild dhe të specifikoni emrin e komponentit që dëshironi.
Më pas, mund të shtoni komponentin e fëmijës tuaj dhe t'i jepni një emër dhe veti.
Këtu, controlTextështë teksti i butonit tuaj, të cilin e keni bërë të dukshëm duke shtuar className vjs-visible-text.
Të gjitha emri i klasës së lojtarit janë parashtesuar nga vjs-
Në clickHandler, thjesht mund të shkruani sjelljen që dëshironi të ketë butoni juaj kur klikoni mbi të.
Shto një komponent te luajtësi
Shtimi i një komponenti në luajtës është pak më i komplikuar pasi sjellja e komponentit nuk është zbatuar.
Së pari, sa i përket shiritit të kontrollit, duhet të kapni komponentin prind, këtu të quajtur Komponent.
Pastaj, ju duhet të zgjeroni komponentin, duke shtuar një konstruktor dhe duke krijuar etiketën.
Për të krijuar etiketën, mund të përdorni elementin domtë Video.js dhe funksionin createEl, ku specifikoni emrin e etiketës dhe vetitë, të tilla si className
Mos harroni className fillon gjithmonë me vjs- në video.js
Këtu, ne duam të shfaqim titullin e videos kur përdoruesi ka miun mbi ekran.
Ne duhet të shtojmë tekst në komponentin tonë, duke e kapur atë në mbështetësit e konstruktorit.
Në updateTextContent, ju do të shtoni titullin tuaj në etiketën tuaj.
Ju e zgjeruat komponentin tuaj, por tani duhet ta regjistroni atë me Video.js duke bërë:
Parametri i parë është emri i komponentit tuaj, të cilin mund ta përdorni më vonë për ta marrë atë.
Tani, mund të krijoni luajtësin tuaj dhe të shtoni komponentin tuaj si fëmijë i luajtësit:
Mund të shtoni gjithashtu një dëgjues veprimi në luajtës, i cili do të ndikojë në komponentin tuaj. Për shembull, nëse duam të fshehim titullin kur përdoruesi është jashtë ekranit, mund të shtoni:
Ju do të duhet të specifikoni në scss:
Mos harroni të instaloni paketën sass
CSS
Skinet dhe shtojcat janë të kufizuara, nëse nuk krijoni tuajat, duhet të përdorni një listë të vogël të atyre të krijuara tashmë.
Nëse doni të ndryshoni ekranin e shiritit të progresit për shembull, nuk dëshironi të hiqni atë të video.js dhe të krijoni tuajin, do të ishte shumë punë.
Një mënyrë e thjeshtë për ta bërë këtë është të zgjeroni scss-in e klasës së përdorur nga video.js
Këtu, shiriti i përparimit është etiketuar me 3 emra të ndryshëm klasash: rrëshqitës, load-progress dhe play-progress (nëse nuk e dini emrin e className, thjesht ekzekutoni projektin tuaj dhe shikoni atë në tastierën e shfletuesit tuaj)
Duke ndryshuar ngjyrën e këtyre 3 emrave të klasave, unë mund të kem një ngjyrë të ndryshme për shiritin e përparimit.
Kodi përfundimtar do të duket kështu:
…
Faleminderit që lexuat artikullin tim të dytë se si të personalizoni luajtësin tuaj video.js.
Nëse dëshironi të lidheni, mund të më ndiqni në Twitter
Çdo reagim është gjithashtu i mirëpritur!
Lidhje të dobishme
