HTML5 视频

在 HTML 中播放视频的方法有很多种，本章主要讲解用 HTML5 中新增的video与embed标签实现的视频播放。

使用 <video> 标签

<video> 是 HTML 5 中的新标签。

<video> 标签的作用是在 HTML 页面中嵌入视频元素。

以下 HTML 片段会显示一段嵌入网页的 ogg、mp4 或 webm 格式的视频：

实例

<!DOCTYPE html>
<html>
<body>
<video width="320" height="240" controls="controls" autoplay="autoplay">
  <source src="/example/video/demo.ogg" type="video/ogg" />
  <source src="/example/video/demo.mp4" type="video/mp4" />
  <source src="/example/video/demo.webm" type="video/webm" />
  您的浏览器不支持 video 标签
</video>
</body>
</html>

运行一下

<video> 元素提供了播放、暂停和音量控件来控制视频。

同时 <video> 元素也提供了 width 和 height 属性控制视频的尺寸。如果设置的高度和宽度，所需的视频空间会在页面加载时保留。如果没有设置这些属性，浏览器不知道大小的视频，浏览器就不能再加载时保留特定的空间，页面就会根据原始视频的大小而改变。

<video> 与</video> 标签之间插入的内容是提供给不支持 video 元素的浏览器显示的。

<video> 元素支持多个 <source> 元素。 <source> 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式。

使用 <embed> 标签

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

实例

<!DOCTYPE html>
<html>
<body>
<embed src="/example/video/demo.swf" height="200" width="200"/>
</body>
</html>

运行一下

embed 标签可以定义嵌入的内容（如插件、图片、媒体等）。

embed 也提供了 width 和 height 属性控制视频的尺寸。

HTML 5 多媒体标签

标签	描述
<video>	标签定义声音，比如音乐或其他音频流。
<embed>	标签定义嵌入的内容，比如插件。

HTML5 视频

使用 <video> 标签

实例

使用 <embed> 标签

实例

HTML 5 多媒体标签

分类导航