Hvordan legge inn video i en HTML5 Web Page

May 11  by Eliza

Videoelementet er en av de mer etterlengtede funksjonene i HTML5. Med denne koden, kan du legge inn videoer i en nettside uten å kreve en plugin som Flash. Følgende kode inkluderer en nyttig budskap for brukere som ikke kan se den forventede video:

<Video src = "bigBuck.ogv" kontroller>
Nettleseren din støtter ikke innebygd video
gjennom HTML5.
</ Div>

Den <video> tag i seg selv er ganske enkel å forstå, men den faktiske gjennomføringen er noe komplisert. HTML5 indikerer en video tag, men det spesifiserer hvilket format leseren vil støtte, og, selvfølgelig, alle leser produsenter har en annen mening om hvilket format for å støtte. De tre viktigste videoformater i contention er

  • Ogg / Theora / Vorbis: Ogg er en container format som bruker Vorbis koding for lyd og Theora koding for video. Ogg system er uhemmet av noen kjente patenter. Det støttes av Firefox, Chrome og Opera. (Det er også støttet av Safari hvis brukeren har installert Vorbis plugin til QuickTime.) IE9 ikke støtter dette formatet.
  • MP4 / H.264 / AAC: Den MP4-standarden er en container format ved hjelp av H.264 for videokoding og AAC for lyd koding. Alle tre formater er underlagt patentrestriksjoner. Dette formatet støttes av Safari, Chrome, iPhone, IE9, og Android.
  • WebM / VP8 / Vorbis: WebM er en relativt ny standard introdusert av Google. Den bruker VP8 videokoding format og Vorbis audio koding. Det er lite støtte for WebM ennå, men de fleste nettlesere som indikerer støtte for formatet i kommende versjoner.

Bruk <kilde> -taggen for å inkludere alle de store videoformater. (Du kan bruke gratis FFmpeg verktøyet tilgjengelig for alle større programvareplattformer for å konvertere videoene dine.) Som en siste fallback, bruker du <embed> tag inni <video> tag å laste videoen med en Flash-spiller.

Du kan bruke Javascript for å styre videoelementet.