Ar norite " React" projekte teisingai rodyti vaizdo įrašo ilgį? Šioje pamokoje parodysiu, kaip, įkėlus reikiamus metaduomenis, naudoti įvykį vaizdo įrašo ilgiui nustatyti. Labai svarbu pasiekti vaizdo įrašo trukmę tinkamu metu, kad užtikrintumėte, jog pateiksite teisingą informaciją.
Pagrindinės žinios
- Įvykis loadedmetadata užtikrina, kad vaizdo įrašo ilgis yra prieinamas.
- Būklė turi būti atnaujinta, kad būtų rodomas ilgis.
- Norėdami užklausti trukmės, galite naudoti vaizdo įrašo elemento savybę duration.
Žingsnis po žingsnio
Norėdami parodyti vaizdo įrašo trukmę, atlikite šiuos veiksmus
1 veiksmas: Inicializuokite vaizdo įrašą su būsena
Pirmiausia "React" komponente turite sukurti vaizdo elementą. Įsitikinkite, kad būsena inicializuota trukmei.
Čia nustatote pradinę trukmės reikšmę nulis arba 0. Tai svarbu, nes vėliau norėsite atnaujinti šią vertę, kai bus prieinami vaizdo įrašo metaduomenys.
2 žingsnis: integruokite įvykį loadedmetadata
Kitas žingsnis - naudoti loadedmetadata įvykį vaizdo įrašo trukmei gauti. Pridėkite šio įvykio klausytoją.
Kai vaizdo įrašas bus įkeltas ir metaduomenys bus paruošti, šis įvykis suveiks, todėl galėsite pasiekti vaizdo įrašo trukmės savybę.
3 veiksmas: Atnaujinkite būseną su vaizdo įrašo trukme
Dabar galite atnaujinti būseną su naujai nustatyta vaizdo įrašo trukme.
Naudokite funkciją setDuration, kad nustatytumėte trukmės reikšmę. Paprastai tai atliekama atgalinio skambučio funkcijoje, reaguojančioje į įvykį.
4 veiksmas: rodykite trukmės būseną
Turite įsitikinti, kad galutinę trukmę rodote komponento atvaizdavimo dalyje. Šioje vietoje įsitikinsite, kad trukmė rodoma teisingai.
Svarbu atitinkamai sureguliuoti atvaizdavimą, kad naudotojas visada matytų dabartinę trukmę, kurią gavote iš vaizdo elemento.
5 veiksmas: išbandykite ir optimizuokite pakeitimus
Testavimas ir optimizavimas yra svarbūs aspektai. Perkraukite programą ir išbandykite, ar vaizdo įrašo trukmė rodoma teisingai.
Čia matote, kad 60 sekundžių trukmė rodoma teisingai. Jei kyla problemų, patikrinkite, ar teisingai nustatytas klausytojas ir ar būsena atnaujinama taip, kaip tikimasi.
6 žingsnis: grotuvo plėtiniai
Jei pagrindinės vaizdo įrašo trukmės funkcijos veikia gerai, galite pagalvoti apie papildomas funkcijas. Tarp jų yra viso ekrano režimas arba garsumo valdymas.
Šie optimizavimai leidžia naudotojui mėgautis visapusiškesne patirtimi.
Apibendrinimas
Šioje pamokoje sužinojote, kaip "React" programoje rodyti vaizdo įrašo ilgį naudojant įvykį loadedmetadata. Būklė atnaujinama siekiant užtikrinti, kad būtų rodoma teisinga vaizdo įrašo trukmė. Įgyvendinus patobulinimus, jūsų vaizdo įrašų grotuvas taps dar patogesnis vartotojui.
Dažniausiai užduodami klausimai
Kaip rodyti vaizdo įrašo trukmę? Įkėlus vaizdo įrašą, galite užklausti apie vaizdo įrašo trukmę naudodami loadedmetadata įvykį.
Kas atsitinka, jei trukmė nerodoma? Patikrinkite, ar teisingai nustatytas įvykių klausytojas, ir įsitikinkite, kad būsena atnaujinama.
Ar galiu naudoti ir kitus vaizdo įrašo įvykius? Taip, galite naudoti ir kitus įvykius, tačiau loadedmetadata yra optimalus įvykis vaizdo įrašo trukmei gauti.
