Hur till Bädda in video i en HTML5 webbsida

October 16

Videoelementet är en av de mer förväntade funktionerna i HTML5. Med denna tagg kan du bädda in videoklipp till en webbsida utan att kräva en plugin som Flash. Följande kod innehåller ett hjälpmeddelande för användare som inte kan se den förväntade videon:

<Video src = "bigBuck.ogv" kontroller>
Din webbläsare stöder inte inbäddade video
genom HTML5.
</ Video>

Den <video> taggen i sig är ganska enkel att förstå, men det faktiska genomförandet är något komplex. HTML5 indikerar en video-taggen, men det anges inte vilket format webbläsaren kommer att stödja, och, naturligtvis, alla tillverkare webbläsaren har en annan åsikt om vilket format som stöd. De tre viktigaste videoformat i påståendet är

  • Ogg / Theora / Vorbis: Ogg är en container format som använder Vorbis kodning för ljud och Theora kodning för video. Ogg-systemet är inte kompliceras av några kända patent. Det stöds av Firefox, Chrome och Opera. (Det är också stöds av Safari om användaren har installerat Vorbis plugin till QuickTime.) IE9 inte stöder detta format.
  • MP4 / H.264 / AAC: Den MP4-standarden är en container format med H.264 för videokodning och AAC för ljudkodning. Alla tre formaten är föremål för restriktioner patent. Detta format stöds av Safari, Chrome, iPhone, IE9, och Android.
  • WebM / VP8 / Vorbis: WebM är en relativt ny standard som införts av Google. Den använder VP8 videokodning format och Vorbis ljudkodning. Det finns lite stöd för WebM ännu, men de flesta webbläsare indikerar stöd för formatet i kommande versioner.

Använd <källa> taggen för att inkludera alla större videoformat. (Du kan använda gratis FFmpeg verktyg tillgängligt för alla större mjukvaruplattformar för att konvertera dina videoklipp.) Som en sista reserv, använd <embed> taggen i din <video> taggen för att ladda videon med en Flash-spelare.

Du kan använda JavaScript för att styra videoelementet.