HTML video

在 HTML 中播放视频的方法有很多种。

Example

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

Try it yourself

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

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

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

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

使用 <embed> 标签

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

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

Example

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

Try it yourself

Problemer

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

使用 <object> 标签

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

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

Example

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

Try it yourself

Problemer

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

使用 <video> 标签

HTML5 中有一个新的标签叫做 <video>。

<video>-tagget bruges til at indlejre videoelementer i HTML-sider.

Følgende HTML-fragment viser et indlejret video i formatet og webm, der er indlejret i en hjemmeside:

Example

<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 browser understøtter ikke video-tagget.
</video>

Try it yourself

Problemer

  • Du skal konvertere videoen til mange forskellige formater.
  • <video>-elementet fungerer ikke i gamle browsere.
  • <video>-elementet kan ikke valideres med HTML 4 og XHTML.

Den bedste HTML-løsning

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>

Try it yourself

I det foregående eksempel blev der brugt 4 forskellige videoformater. HTML 5 <video>-elementet forsøger at afspille videoen i en af følgende formater: mp4, og webm. Hvis alle forsøg fejler, falder det tilbage til <embed>-elementet.

Problemer

  • Du skal konvertere videoen til mange forskellige formater
  • <video>-elementet kan ikke valideres med HTML 4 og XHTML.
  • <embed>-elementet kan ikke valideres med HTML 4 og XHTML.

Bemærk:Brug <!DOCTYPE html> (HTML5) for at løse valideringsproblemer.

Youku-løsning

Den enkleste måde at vise en video i HTML er ved at bruge videoportaler som Youku.

Hvis du ønsker at afspille en video på din hjemmeside, kan du uploade videoen til en videoportal som Youku og derefter indsætte HTML-koden på din hjemmeside for at afspille videoen:

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

Try it yourself

Using Hyperlinks

If a web page contains hyperlinks to media files, most browsers will use 'assistant applications' to play the files.

The following code snippet shows a link to an AVI file. If the user clicks on the link, the browser will launch an 'assistant application', such as Windows Media Player, to play this AVI file:

Example

<a href="movie.swf">Play a video file</a>

Try it yourself

A note about inline video

When video is included in a web page, it is called inline video.

If you plan to use inline video in a web application, you need to be aware that many people find inline video annoying.

At the same time, please note that the user may have already turned off the inline video option in the browser.

Our best advice is to only include them where the user wants to see inline video. A positive example is when the user needs to see the video and click on a link, the page will open and then play the video.

HTML 4.01 Multimedia Tags

Tag Description
<applet> Not recommended.Define embedded applet.
<embed> Not recommended.Define embedded object. (Allowed in HTML5)
<object> Define embedded object.
<param> Define parameters of the object.

HTML 5 Multimedia Tags

Tag Description
<video> The tag defines audio, such as music or other audio streams.
<embed> The tag defines embedded content, such as plug-ins.