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> 标签

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

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

Exempel

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

Prova själv

Problem

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

使用 <object> 标签

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

下面的 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-kod kommer att visa en inbäddad video i formaten ogg, mp4 eller webm på webbsidan:

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 föregående exempel användes 4 olika videoformat. HTML 5 <video>-elementet försöker spela upp video i formaten mp4, ogg eller webm. Om alla försök misslyckas, övergår det till <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: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 en videoportal som Youku.

Om du vill spela upp en video på en webbsida, kan du ladda upp videon till en videoportal som Youku och sedan lägga till HTML-koden på din webbsida 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ända lä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 inbäddade videor

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

Om du avser att använda inbäddade videor i webbapplikationer, behöver du vara medveten om att många tycker att inbäddade videor är irriterande.

Samtidigt 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 klickar på en länk, öppnas sidan och videon spelas upp.

HTML 4.01-mediabetag

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

HTML 5-mediabetag

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