HTML5 视频

有不同的方式在网页上播放视频。

在 HTML 文档中嵌入视频

将视频插入网页并不容易，因为浏览器没有统一的标准来定义嵌入的媒体文件。

在本章中，我们将演示在网页上添加视频的方法，如最新的 HTML5 <video> 元素。

使用 HTML5 视频元素

新推出的 HTML5 <video> 元素提供了一种在网页中嵌入视频的标准方法。但是，视频元素相对较新，但它适用于大多数现代 Web 浏览器。以下示例仅使用浏览器默认控件集将视频插入 HTML5 文档，并使用一个源。

<video controls="controls" src="shuttle.mp4">
    Your browser does not support the HTML5 Video element.
</video>

使用浏览器默认控件集和其他来源的视频。

<video controls="controls">
    <source src="shuttle.mp4" type="video/mp4">
    <source src="shuttle.ogv" type="video/ogg">
    Your browser does not support the HTML5 Video element.
</video>

使用 object 元素

<object> 元素用于将不同类型的媒体文件嵌入到 HTML 文档中。最初，此元素用于插入 ActiveX 控件，但根据规范，对象可以是任何媒体对象，如视频、音频、Java 小程序、ActiveX、文档（HTML、PDF、Word 等）、Flash 动画或甚至图像。

以下代码片段将 Flash 视频嵌入到网页中。

<object data="blur.swf" width="400px" height="200px"></object>

只有支持 Flash 的浏览器或应用才能播放此视频。

警告： <object> 元素不受广泛支持，并且在很大程度上取决于要嵌入的对象的类型。在许多情况下，其他方法可能是更好的选择。iPad 和 iPhone 无法显示 Flash 视频。

使用 <embed> 元素

<embed> 元素用于将多媒体内容嵌入到 HTML 文档中。

以下代码片段将 Flash 视频嵌入到网页中。

<embed src="blur.swf" width="400px" height="200px">

警告： 但是，<embed> 元素在当前浏览器中得到了很好的支持，并在 HTML5 中被定义为标准，但由于缺乏对 Flash 的浏览器支持或插件不可用，你的视频可能无法播放。