video元素 (影像)【新元素

<video>~</video>

video元素是HTML5增加的新元素,是备受关注的机能之一。截至目前,要想在网页中嵌入视频文件,就要使用Flash等相关插件。到了HTML5时代,不再使用插件就能实现网页上嵌入视频文件。

不使用插件直接播放视频,给网页制作者带来了便利,除此之外还有,因为不再使用插件,可以很方便的给video元素适用层叠样式表,可以使用JavaScript控制视频文件,还可以与HTML5中规定的其他API协作。例如,把使用video元素播放的一个视频场景加到Canvas元素中。

目前,视频已经不再仅仅是为了播放,还可以当作素材,使用各种方法加工制作成不同口味的视频大餐,这是其超具魅力的地方。随着的浏览器的不断完备,将会出现各种新颖的视频使用方法。具体的各种应用请参照video、audio API部分。

相关内容:视频种类以及各个浏览器支持的视频形式

属性

1、src内容属性
指定所要嵌入视频、文档的URL。
2、poster内容属性
当视频能够播放时,用于指定代表视频的图像的URL。
3、preload内容属性
preload内容属性用于指定是否提前下载,怎样提前下载视频数据,给用户代理相应的提示。
【preload属性的可选值:】
  • none:在播放视频之前不做下载。
  • metadata:只下载视频的meta信息部分。Meta信息中收集了关于视频的长度、视频的起始祯的图像、视频的长度等信息。
  • auto:尽可能提前下载视频。
  • autoplay:preload属性将无效。
4、autoplay内容属性
如果视频可以使用,马上播放视频,属于逻辑属性。
5、mediagroup内容属性
使多个video或者audio元素集合化。
6、loop内容属性
循环播放,属于逻辑属性。
7、muted内容属性
关闭视频的声音通道(静音),属于逻辑属性。
8、controls内容属性
用于表示能够操作视频播放与停止的用户界面,属于逻辑属性。
9、width内容属性
表示视频的横宽。
10、height内容属性
表示视频的纵高。

使用例

<video src="material/sample.mp4" controls="controls">

<p>你的浏览器不支持播放。请从<a href="sample.mp4">这里</a>下载视频。</p>

</video>

浏览器上的显示结果↓


X

浏览器支持情况

元素
video 9.0 11 3.6 5 11