上一章HTML5教程请查看:html5音频audio元素
【html5视频video元素 –
HTML5教程】在本教程中,你将学习如何将视频嵌入到HTML文档中。
在HTML文档中嵌入视频将视频插入到web页面并不容易,因为web浏览器没有一个定义嵌入媒体文件(如视频)的统一标准。
在本章中,我们将演示在web页面上添加视频的多种方法,从最新的HTML5 <
video>
元素到流行的YouTube视频。
使用HTML5视频video元素新引入的HTML5
<
video>
元素提供了一种将视频嵌入网页的标准方式。不过,视频元素相对较新,但它在大多数现代web浏览器中都能工作。
下面的示例使用浏览器默认控件集将视频插入到HTML文档中,其中一个源由src属性定义。
<
video controls="controls" src="http://www.srcmini.com/media/shuttle.mp4">
你的浏览器不支持HTML5视频元素
<
/video>
一段视频,使用浏览器默认控件集,有备选源。
<
video controls="controls">
<
source src="http://www.srcmini.com/media/shuttle.mp4" type="video/mp4">
<
source src="http://www.srcmini.com/media/shuttle.ogv" type="video/ogg">
你的浏览器不支持HTML5视频元素
<
/video>
使用object元素对象> 元素用于将不同类型的媒体文件嵌入到HTML文档中。最初,此元素用于插入ActiveX控件,但根据规范,对象可以是任何媒体对象,如视频、音频、PDF文件、Flash动画甚至图像。
下面的代码片段将Flash视频嵌入到web页面中。
<
object data="http://www.srcmini.com/media/blur.swf" width="400px" height="200px"><
/object>
只有支持Flash的浏览器或应用程序才能播放本视频。
警告:< object> 元素不被广泛支持,很大程度上取决于被嵌入对象的类型。在许多情况下,其他方法可能是更好的选择。iPad和iPhone设备不能显示Flash视频。
使用embed元素< embed> 元素用于将多媒体内容嵌入到HTML文档中。
下面的代码片段将Flash视频嵌入到web页面中。
<
embed src="http://www.srcmini.com/media/blur.swf" width="400px" height="200px">
警告:然而,< embed> 元素在当前的web浏览器中得到了很好的支持,它在HTML5中也被定义为标准元素,但是你的视频可能由于缺乏Flash浏览器支持或无法获得插件而无法播放。
推荐阅读
- html5 Web存储 – HTML5教程
- html5音频audio元素 – HTML5教程
- html5 SVG绘制以及和canvas的区别 – HTML5教程
- html5 canvas绘图 – HTML5教程
- html5 input新输入类型 – HTML5教程
- html ISO语言代码 – HTML教程
- html URL编码 – HTML教程
- html媒体类型和字符编码参考文档 – HTML教程
- html颜色名称参考文档 – HTML教程