HTML-video
- Föregående sida HTML-ljud
- Nästa sida HTML YouTube
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>
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"/>
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"/>
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>
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>
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>
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>
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. |
- Föregående sida HTML-ljud
- Nästa sida HTML YouTube