HTML视频

HTML通过使用各种标记和元素来描述页面的各个部分，包括文本、图像、链接、表格、表单和多媒体内容等。其中，视频作为一种重要的多媒体形式，在HTML中有特定的标记和支持。那么HTML怎么添加视频？使用 <video> 标签可以用来嵌入视频。

一、HTML添加视频

<video width="320" height="240" 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>

• <video>标签定义了一个视频播放器，并设置了宽度和高度，以及控制条来控制视频播放。
• <source>标签用于指定多个视频源文件，以便不同类型的浏览器能够选择支持的视频格式进行播放。在这个例子中，提供了三种不同格式的视频文件：MP4、Ogg和WebM。

如果浏览器不支持<video>标签中指定的任何视频格式，那么<object>元素内的内容就会被显示。在这里，<object>元素指定了一个Flash视频文件（.swf 格式）作为备选方案。

二、embed标签

<embed> 标签用于在 HTML 页面中嵌入多媒体元素，例如音频、视频或 Flash 动画等。它是一种用于向页面添加外部内容的标准 HTML 标签。

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

<embed src="intro.swf" height="200" width="200">

注意：HTML4无法识别标签，页面将无法通过验证。如果浏览器不支持Flash，视频将无法播放。此外，iPad和iPhone也无法显示Flash视频，即使将视频转换为其他格式，它仍然可能无法在所有浏览器中播放。

三、object标签

<object> 标签是用于在 HTML 页面中嵌入多媒体元素的标准 HTML 标签之一。它可以用于嵌入各种类型的多媒体内容，如视频、音频和 Flash 动画等。

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

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

注意：如果浏览器不支持Flash，视频将无法播放；此外，iPad和iPhone也无法显示Flash视频；即使将视频转换为其他格式，它仍然可能无法在所有浏览器中播放。

四、video元素

HTML5中的<video>标签用于定义一个视频或影片，它在所有现代浏览器中都得到了支持，用户可以在网页上播放各种格式的视频文件。

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

<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
<source src="movie.webm" type="video/webm">
Your browser does not support the video tag.
</video>

• ogg：带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件；
• mp4：带有 H.264 视频编码和 AAC 音频编码的 mp4 文件 ；
• webm：带有 VP8 视频编码和 Vorbis 音频编码的 webm 文件 。

注意：

• 必须把视频转换为很多不同的格式；
• <video> 元素在老式浏览器中无效。

五、HTML解决方法

以下实例中使用了4种不同的视频格式。HTML 5 <video> 元素会尝试播放以 mp4、ogg 或 webm 格式中的一种来播放视频。如果均失败，则回退到 <embed> 元素。

注意：必须把视频转换为很多不同的格式。

<video width="320" height="240" 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>

六、使用超链接

如果网页包含指向媒体文件的超链接，大多数浏览器会使用"辅助应用程序"来播放文件。以下代码片段显示指向 AVI 文件的链接。如果用户点击该链接，浏览器会启动"辅助应用程序"，比如 Windows Media Player 来播放这个 AVI 文件：

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

七、HTML多媒体标签