html5视频video元素 – HTML5教程

上一章HTML5教程请查看：html5音频audio元素

在本教程中，你将学习如何将视频嵌入到HTML文档中。

在HTML文档中嵌入视频

将视频插入到web页面并不容易，因为web浏览器没有一个定义嵌入媒体文件(如视频)的统一标准。

在本章中，我们将演示在web页面上添加视频的多种方法，从最新的HTML5 <video>元素到流行的YouTube视频。

使用HTML5视频video元素

新引入的HTML5 <video>元素提供了一种将视频嵌入网页的标准方式。不过，视频元素相对较新，但它在大多数现代web浏览器中都能工作。

下面的示例使用浏览器默认控件集将视频插入到HTML文档中，其中一个源由src属性定义。

<video controls="controls" src="media/shuttle.mp4">
    你的浏览器不支持HTML5视频元素
</video>

一段视频，使用浏览器默认控件集，有备选源。

<video controls="controls">
    <source src="media/shuttle.mp4" type="video/mp4">
    <source src="media/shuttle.ogv" type="video/ogg">
        你的浏览器不支持HTML5视频元素
</video>

使用object元素

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

下面的代码片段将Flash视频嵌入到web页面中。

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

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

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

使用embed元素

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

下面的代码片段将Flash视频嵌入到web页面中。

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

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