Kuidas HTML-i videot lisada?
Maailmas veebiprogrammeerimisel on videote sisestamine funktsioon, mille järele on üha suurem nõudlus. Olgu selleks siis multimeediumisisu esitamine, õpetuste integreerimine või demode näitamine, video veebilehele manustamine on kasutajakogemuse parandamiseks ja teabe tõhusaks edastamiseks hädavajalik. märgistuskeel hüperteksti (HTML) puhul on see täiesti võimalik ja selles artiklis näitame teile, kuidas seda samm-sammult saavutada.
1. Sissejuhatus videote manustamiseks HTML-i
Videote manustamine HTML-i on põhifunktsioon, mis võimaldab veebiarendajatel kuvada videoid otse lehel ilma väliseid mängijaid kasutamata. Video HTML-i sisestamiseks kasutatakse märgendit . Sellel märgendil saate määrata lisatava videofaili asukoha ja tüübi ning muud valikud, näiteks video laiuse ja kõrguse. Nii saate juhtida video suurust ja taasesitamist. video veebilehel.
Lisaks etiketile Video funktsionaalsuse ja välimuse parandamiseks saab kasutada ka muid silte ja atribuute. Näiteks etikett
Video manustamisel HTML-i on oluline arvestada faili suurust ja video kvaliteeti. The videofailid Suured võivad aeglustada lehe laadimist ja tarbida palju ribalaiust, mis võib kasutajakogemust negatiivselt mõjutada. Seetõttu on soovitatav videofailid tihendada ja tagada, et neil oleks sobiv eraldusvõime ja bitikiirus. veebi jaoks. Lisaks on oluline pakkuda teksti või pildi alternatiive neile kasutajatele, kes ei saa juurdepääsuprobleemide või tehniliste piirangute tõttu videot vaadata ega esitada.
2. Põhikood video HTML-i sisestamiseks
Selles postituses näitame teile kuidas lisada video HTML-i. Video veebilehele manustamine võib lisada interaktiivsust ja parandada kasutajakogemust. Järgmisena esitleme teile a põhikood mida saate kasutada oma HTML-lehele video sisestamiseks.
1. Alustades: Alustuseks peab teil olema videofail sobivas vormingus, näiteks MP4 või WebM. Veenduge, et teie serveris või meediumiteegis on videofaili õige tee. Seejärel peate oma HTML-dokumendile lisama järgmise koodi:
"`html
«`
2. Isikupärastamine: Saate reguleerida videopleieri laiust ja kõrgust, muutes atribuutide laiust ja kõrgust. Ärge unustage pakkuda alternatiivsed versioonid video erinevates vormingutes (MP4, WebM), et tagada ühilduvus erinevate brauseritega.
3. Ühilduvus: Oluline on märkida, et mitte kõik brauserid ei toeta HTML5 videoelementi. Nõuetekohase vaatamise tagamiseks võite pakkuda ka alternatiivset võimalust, kasutades kolmandast osapoolest hostimisteenuse pakkujat, nagu YouTube või Vimeo. Samuti pidage meeles, et mõned brauserid võivad teatud videovormingute esitamiseks nõuda konkreetseid koodekeid.
Ja see ongi kõik! Järgige neid samme ja saate seda teha Sisestage video lihtsalt oma HTML-lehele. Ärge unustage testida oma lehte erinevates brauserites ja seadmetes, et veenduda video õiges esitamises.
3. Sildi toetatud vormingud ja koodekid
Silt
Toetatud vormingud:
– MP4: see on videote jaoks kõige sagedamini kasutatav formaat veebis. See ühildub enamiku brauseritega ja pakub head taasesituskvaliteeti.
– WebM: see vorming on eriti populaarne avatud lähtekoodiga brauserite, näiteks Google Chrome ja Mozilla Firefox. See tagab hea videokvaliteedi ja tõhusa tihendamise.
– Ogg: see vorming ühildub mitme brauseriga ja võib pakkuda head taasesituskvaliteeti. Kuid see on vähem levinud kui MP4- ja WebM-vormingud.
Toetatud kodekid:
– H.264: see on ülitõhus videokodek, mis ühildub enamiku brauseritega. Tagab hea videokvaliteedi ja tõhusa tihendamise.
– VP9: see videokoodek on eriti populaarne avatud lähtekoodiga brauserite seas, kuna see pakub head taasesituse kvaliteeti ja tõhusat tihendamist.
– Theora: see on avatud lähtekoodiga videokoodek, mis ühildub brauserite vahel, kuigi see ei paku sama tihendustõhusust kui teised koodekid, kuid see võib siiski pakkuda head taasesituskvaliteeti.
Kui lisate oma veebisaidile videoid, kasutage kindlasti optimaalse kasutuskogemuse ja sujuva videoesituse tagamiseks, et mõned brauserid võivad toetada ainult teatud vorminguid ja koodekeid, mistõttu on oluline testida erinevates seadmetes ja brauserites. ühilduvus. Õigete vormingute ja koodekitega saate pakkuda videoid kõrge kvaliteet mis meelitavad ligi ja hoiavad teie külastajaid.
4. Täpsemad seaded kasutajakogemuse parandamiseks
Üks atraktiivsemaid ja populaarsemaid elemente veebisaidi kasutajakogemuse parandamiseks on videote lisamine. Videod võivad olla suurepärane viis teabe lühidalt ja visuaalselt atraktiivseks edastamiseks. Video HTML-i sisestamiseks peate lihtsalt kasutama märgendit video ja paar peamist atribuuti: allikas et näidata videofaili asukohta ja juhtnupud kasutajale taasesituse juhtnuppude kuvamiseks.
Kui videoelement on loodud, saab seda täiendavate atribuutide abil täiendavalt kohandada. Näiteks saate atribuutide abil määrata video laiuse ja kõrguse laius ja kõrgus. Saate atribuudiga määrata ka plakati, mis kuvatakse enne video esitamist. plakat. Lisaks saate märgendi the abil lisada subtiitreid rada ja atribuut allikas subtiitrifaili asukoha määramiseks.
Kui soovite lisada video mitmes toetatud vormingus, saate kasutada silti allikas videoelemendi sees. See võimaldab määrata mitu videoallikat ja brauser valib esimese leitud ühilduva allika. Näiteks saate lisada MP4-faili kaasaegsete brauserite jaoks ja WebM-fail alternatiivina vanematele brauseritele. See tagab video korrektse esitamise erinevatel platvormidel ja seadmetes.
Lühidalt, video manustamine HTML-i on sama lihtne kui märgendi kasutamine. video ja vajalikud atribuudid. Lisaks saab kasutajakogemuse täiustamiseks kohandada täiendavaid elemente, nagu laius, kõrgus, plakat ja subtiitrid. Kui soovite pakkuda ühilduvust erinevate brauseritega, võite kasutada märgendit allikas mitme videoallika määramiseks. Nende teadmiste abil saate luua oma veebisaidi külastajatele huvitava ja kaasahaarava multimeediakogemuse.
5. Alternatiivid märgistusele
HTML-is märgen
–