HTML-video

Det finns många sätt att spela upp video i HTML.

Exempel

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.swf" width="320" height="240" />
  </object>
</video>

Prova själv

Problem, problem och lösningar

Det är inte lätt att spela upp video i HTML!

Du behöver behärska många tekniker för att säkerställa att dina videofiler kan spelas upp i alla webbläsare (Internet Explorer, Chrome, Firefox, Safari, Opera) och på alla hårdvaror (PC, Mac, iPad, iPhone).

I detta kapitel har CodeW3C.com sammanfattat problem och lösningar för dig.

Använd <embed>-etiketten

Funktionen hos <embed>-etiketten är att inbädda multimediaelement i en HTML-sida.

Nedan visas HTML-koden som visar inbäddad Flash-video på en webbsida:

Exempel

<embed src="movie.swf" height="200" width="200"/>

Prova själv

Problem

  • HTML4 kan inte känna igen <embed>-etiketten. Din sida kan inte valideras.
  • Om webbläsaren inte stöder Flash, kommer videon inte att kunna spelas upp
  • iPad och iPhone kan inte visa Flash-videor.
  • Om du konverterar videon till ett annat format, kommer den fortfarande inte att kunna spelas upp i alla webbläsare.

Använd <object>-etiketten

Funktionen hos <object>-etiketten är att inbädda multimediaelement i en HTML-sida.

Nedan visas ett HTML-fragment som visar inbäddad Flash-video på en webbsida:

Exempel

<object data="movie.swf" height="200" width="200"/>

Prova själv

Problem

  • Om webbläsaren inte stöder Flash, kommer videon inte att kunna spelas upp.
  • iPad och iPhone kan inte visa Flash-videor.
  • Om du konverterar videon till ett annat format, kommer den fortfarande inte att kunna spelas upp i alla webbläsare.

Använd video-etiketten

Video är en ny etikett i HTML 5.

<video>-taggens funktion är att inbädda videoelement i en HTML-sida.

Följande HTML-fragment visar en inbäddad video i formaten ogg, mp4 eller webm:

Exempel

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
Din webbläsare stöder inte video-taggen.
</video>

Prova själv

Problem

  • Du måste konvertera videon till många olika format.
  • <video>-elementet fungerar inte i äldre webbläsare.
  • <video>-elementet kan inte valideras i HTML 4 och XHTML.

Det bästa HTML-lösningen

HTML 5 + <object> + <embed>

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.swf" width="320" height="240" />
  </object>
</video>

Prova själv

I det tidigare exemplet användes 4 olika videoformat. HTML5 <video>-elementet försöker spela upp video i mp4, ogg eller webm-format. Om alla försök misslyckas, används <embed>-elementet som en fallback.

Problem

  • Du måste konvertera videon till många olika format
  • <video>-elementet kan inte valideras i HTML 4 och XHTML.
  • <embed>-elementet kan inte valideras i HTML 4 och XHTML.

Kommentar:Använd <!DOCTYPE html> (HTML5) för att lösa valideringsproblem.

Youku-lösning

Det enklaste sättet att visa en video i HTML är att använda Youku eller en annan videoplattform.

Om du vill spela upp en video på din webbsida, kan du ladda upp videon till Youku eller en annan videoplattform och sedan infoga HTML-koden för att spela upp videon:

<embed src="http://player.youku.com/player.php/sid/XMzI2NTc4NTMy/v.swf" 
width="480" height="400" 
type="application/x-shockwave-flash">
</embed>

Prova själv

Använd hyperlänkar

Om en webbsida innehåller länkar till mediafiler använder de flesta webbläsare "hjälpprogram" för att spela upp filerna.

Följande kodsnutt visar en länk till en AVI-fil. Om användaren klickar på länken startar webbläsaren ett "hjälpprogram", till exempel Windows Media Player, för att spela upp den här AVI-filen:

Exempel

<a href="movie.swf">Spela upp en videofil</a>

Prova själv

En kommentar om inline-video

När video inkluderas i en webbsida kallas det inline-video.

Om du avser att använda inline-video i webbapplikationer, bör du vara medveten om att många tycker att inline-video är irriterande.

Samtidigt bör du notera att användaren kanske redan har stängt av alternativet för inline-video i webbläsaren.

Vår bästa rekommendation är att endast inkludera dem där användaren vill se inline-video. Ett positivt exempel är när användaren behöver se en video och klicka på en länk, som öppnar en sida där videon spelas upp.

HTML 4.01 multimediaetiketter

Etikett Beskrivning
<applet> Inte rekommenderat.Definierar inbäddade applets.
<embed> Inte rekommenderat.Definierar inbäddade objekt. (Tillåtet i HTML5)
<object> Definierar inbäddade objekt.
<param> Definierar parametrar för objekt.

HTML 5 multimediaetiketter

Etikett Beskrivning
<video> Etiketten definierar ljud, till exempel musik eller andra ljudströmmar.
<embed> Etiketter definierar inbäddat innehåll, till exempel plugins.