HTML5: Arbeide med Video-elementet

HTML5-videoelementet ligner på HTML5-lydelementet når det gjelder levering av multimedia-innhold på nettet som videospiller. Elementet har imidlertid flere tilleggsattributter knyttet til måten video presenteres på nettet, hovedsakelig tydelig på måten videofiler blir overført til digitale formater. Alle videofilformatene er faktisk beholderfiler, lik en komprimert zip-fil som inneholder flere filer, og synkronisert for å spille av dem sammen med kombinasjonen av både lyd og video som lager en multimediapresentasjon. I hovedsak er en "video" faktisk en serie rammer for den visuelle effekten sammen med lydfiler for lydeffekter.

Videokodeker

Videokodeker lar videospillere avkode streaming-mediefiler; i hovedsak, når du "ser på en video", utfører den elektroniske videospilleren minst disse tre funksjonene samtidig:

  1. Spilleren oversetter dataene i de separate filene ved å bekrefte beholderformatet og deretter bestemme de tilgjengelige sporene som kan inkludere video, videoeffekter, tekstoverlegg, videooverlegg, lydmiks og stemmeinnspilte spor.
  2. Spilleren avkoder videofilene og viser deretter en serie rammer på spillerens skjerm.
  3. Spilleren avkoder lydstrømmene og behandler lydfrekvensene til lydenheten og høyttalerne koblet til datamaskinen din.

Uten å sette for mye inn i forskjellene mellom alle videokontrollers komprimeringsformater, er nedenfor en liste over flere populære kodeker som er tilgjengelige i dag, og når de brukes i HTML5-elementet, kan du se i visse nettlesere (mer om det senere):

  • MPEG4 eller H.264 typisk med en utvidelse av .Mp4 eller .M4v
  • Ogg med .Ogv-utvidelsen også kalt "Theora"
  • WebM eller VP8 er et royaltyfritt åpent komprimeringsformat for lydvideo med .WebM-utvidelsen

Adopsjonsfrekvens

Det er faktisk hundrevis av videokodeker som er tilgjengelige, og dette bidrar til kompleksiteten for å finne et standard videoformat som alle nettlesere kan være enige om, og fortsetter å være den viktigste årsaken til en langsommere adopsjonsfrekvens for HTML5-elementet. Imidlertid gjør flere innholdsleverandører innpass i HTML5 Video online presentasjon inkludert Blip.tv, Vimeo og YouTube. For eksempel kunngjorde YouTube på bloggen sin 19. april 2011 at alle nye videoer nå vil bli kodet til WebM for lyd og video på nettet, spesielt for lettere å se på mobile enheter.

HTML5 Video-elementet i sin enkleste form er representert på denne rene og minimale måten:

Nettleseren din støtter ikke videoelementet.

Kildeattributtet peker til selve filen; plakatattributtet peker på en skjermdumping av videoen som vises på spillerskjermen før filen spilles av; og kontroller gir typisk stopp og start for avspilling, lydvolumnivåer, og avhengig av nettleser, et alternativ for å åpne i en ny skjerm og en fullskjermvisning.

Flere kilder

Den nåværende HTML5-videospesifikasjonen indikerer ikke hvilke videoformat-nettlesere som skal støtte i videoelementet. Brukeragenter står fritt til å støtte alle videoformater de føler er passende. Siden det ikke er noen løsning som passer til alle på dette tidspunktet for støtte over alle nettlesere av alle video- / lydfilformater og kodeker, betyr det at du som webutvikler må oppgi flere kilder til det samme prosjektet - i realiteten må du kode videofilene dine på tvers av flere formater.

For å sikre at du får flest seere til å gjengi videoene dine ved hjelp av HTML5, bør du imidlertid bruke minst tre kilder i videoelementkoden, som vist i eksemplet nedenfor. Vær oppmerksom på at kodekene er listet opp for hver kilde for å hjelpe nettleseren med å gjøre valg av filformat / kodek i kildetreet. Nettlesere vil parse kildetreet i den rekkefølgen som er oppført til et kompatibelt format blir funnet, eller fallback-utsagnet vises.

Nettleseren din støtter ikke videoelementet.

Som et tilleggsalternativ for fallback-støtte kan Flash Video legges til, noe som vil nødvendiggjøre å måtte kode opp filen til .FLV- eller .FL4-beholderformat og inkludere fallback Flash-koden sammen med HTML5-videoelementet.

Nettleserstøtte

Å teste HTML5-videoene dine i flere nettlesere kan bli en avgiftsprosess. Derfor er her en matrise av populære nettlesere for å identifisere kodekene som nettlesere støtter når du bruker HTML5-elementets videospiller.

11. januar 2011 kunngjorde Googles Chromium Project på bloggen sin at støtten for lukkede kodeker, spesielt H.264 (MPEG4), ville bli fjernet fra fremtidige utgivelser av Chrome. Blogginnlegget nevnte at fjerningen var deres anstrengelse for å øke bruken av det lisensfrie HTML5-elementet ved å rette ressursene mot adopsjon av åpen kildekodekoder som VP8 og Theora.

Flere nettsteder tester HTML5-videospilleren med forskjellige kodeker for kompatibilitetsvisning i forskjellige nettlesere, inkludert denne demovideoen ved hjelp av VP8 / WebM, ved hjelp av en 2-minutters testfil som ble kodet med en WebM VP8 videokonverterer.

Det ser ut til at det fortsatt er mye grunn å dekke mellom de forskjellige leverandørene av videoinnhold og forskjellene mellom de populære nettlesernes adopsjonsfrekvens for HTML5-støttede videokodeker. Foreløpig betyr utfordringene nettutviklere og bruk av HTML5-videoelementet med universell kompatibilitet på tvers av nettlesere å måtte tilby mer enn noen få kilder til den samme videofilen.

© Copyright 2020 | mobilegn.com