HTML video

在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

问题，问题，以及解决方法

在HTML中播放视频并不容易！

您需要熟练掌握大量技巧，以确保您的视频文件在所有浏览器中（Internet Explorer, Chrome, Firefox, Safari, Opera）和所有硬件上（PC, Mac, iPad, iPhone）都能够播放。

在本章，CodeW3C.com为您总结了问题和解决方法。

使用<embed>标签

<embed>标签的作用是在HTML页面中嵌入多媒体元素。

下面的HTML代码显示嵌入网页的Flash视频：

Exempel

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

Prova själv

Problem

  • HTML4无法识别<embed>标签。您的页面无法通过验证。
  • 如果浏览器不支持Flash，那么视频将无法播放
  • iPad和iPhone不能显示Flash视频。
  • 如果您将视频转换为其他格式，它仍然不能在所有浏览器中播放。

使用<object>标签

<object>标签的作用是在HTML页面中嵌入多媒体元素。

下面的HTML片段显示嵌入网页的一段Flash视频：

Exempel

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

Prova själv

Problem

  • 如果浏览器不支持Flash，将无法播放视频。
  • iPad和iPhone不能显示Flash视频。
  • 如果您将视频转换为其他格式，它仍然不能在所有浏览器中播放。

使用<video>标签

HTML5中新标签<video>。

<video>-taggen används fö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 med 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 fyra olika videoformat. HTML 5 <video>-elementet försöker spela upp video i formaten mp4, ogg eller webm. Om alla försök misslyckas, försöker det sedan med <embed>-elementet.

Problem

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

Kommentar:Lös problemet med att använda <!DOCTYPE html> (HTML5).

Youku-lösning

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

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

<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 kodfragment 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 inbäddade videor

När en video inkluderas i en webbsida kallas den för inbäddad video.

Om du planerar att använda inbäddade videor i webbapplikationer, måste du vara medveten om att många tycker att inbäddade videor är irriterande.

Samtidigt bör du notera att användaren kanske redan har stängt av alternativet för inbäddade videor i webbläsaren.

Vår bästa rekommendation är att endast inkludera dem där användaren vill se inbäddade videor. Ett positivt exempel är när användaren behöver se en video och klicka på en länk, då öppnas sidan och videon spelas upp.

HTML 4.01 multimediaetiketter

Etikett Beskrivning
<applet> Inte rekommenderat.Definiera inbäddad applet.
<embed> Inte rekommenderat.Definiera inbäddade objekt. (Tillåtet i HTML5)
<object> Definiera inbäddade objekt.
<param> Definiera 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.