建站经验技巧关于html5视频标签video的属性和用法

关于html5视频标签video的属性和用法

以往在网页中引入视频的代码很复杂,在html5中出现了专用于视频的video标签,在网页中引用视频变得就像引用图片那样容易了,最简单的视频引入代码为:

<video src="v1.mp4"></video>

这里就如图片img标签一样,通过src属性引入视频的URL,此时在浏览器中显示的效果是这样的:

html5-video标签1.png

视频默认不会自动播放,如果需要网页加载后视频自动播放,则需要加入autoplay属性:

<video src="v1.mp4" autoplay></video>

按照Xhtml的书写习惯,一般建议写成下面这样:

<video src="v1.mp4" autoplay="autoplay"></video>

添加了该属性后,视频在网页加载后就会自动开始播放,仅播放一次,播放完成后会定格在最后的画面。如果希望播放后重新循环播放,那么可加入loop属性:

<video src="v1.mp4" autoplay="autoplay" loop="loop"></video>

此时视频会一直循环播放,除此之外,还可以在视频上点击右键选择是否循环:

html5-video标签2.png

视频右键菜单里还可以通过“显示控件”在选择在视频下方出现控制区域,视频控件是这样的(不同浏览器的右键菜单和控件有所不同):

html5-video标签3.png

这样就具备一个简单的播放器功能了,可以对视频进行播放和暂停,拖动播放进度,设置音量和选择全屏播放,当鼠标离开控件区域后,控件会自动隐藏,一般如果不希望视频自动播放,便可以使用controls属性让控件默认显示出来:

<video src="v1.mp4" controls="controls"></video>

此时视频虽然不自动播放,但是可以很方便的点击控件上的播放按钮开始播放。

有时候不希望视频自动播放,但希望视频预先加载,便于用户点击播放按钮时能快速播放,此时可使用preload属性:

<video src="v1.mp4" preload="auto" controls="controls"></video>

此时视频会在网页加载的时候自动预先缓存,节省了用户等待时间,这里将preload属性值设置为auto表示预先加载全部数据,如果设置为preload="metadata",则表示只预先加载部分元数据,但如果视频设置了自动播放(autoplay),则该属性无效。

一般用户未点击播放按钮的时候,视频会显示第一帧作为预览图,如果希望显示别的图片作为预览图,则可使用poster属性,例如:

<video src="v1.mp4" width="400" height="300" poster="cover.png"></video>

此时视频默认显示cover.png这张图片作为预览图:

html5-video标签5.png

这里的poster属性可定义视频加载时显示的画面,或者用户未点击播放时显示的预览画面。

如同图片img标签那样,也可以通过width和height属性设置视频的宽度和高度,如:

<video src="v1.mp4" width="400" height="300" controls="controls"></video>

宽度和高度属性很少用,一般都习惯通过CSS定义视频的尺寸,和其他html标签一样,video也可通过CSS改变它的各种样式,例如:

video {
 width:500px;height:400px;
 border:3px solid #49e;border-radius:15px;
 background-color:#f6f6f6;padding:5px 10px;
 box-shadow:5px 5px 5px #ccc;
}

此时,这个视频所展示的样式是这样的:

html5-video标签4.png

视频标签video支持IE9+,Chrome,Firefox,Opera等“高端”浏览器,在不支持该标签的浏览器可以显示文字描述,例如:

<video src="v1.mp4" autoplay="autoplay">您的浏览器不支持视频标签</video>

如果是上述“高端”浏览器,则会正常显示视频,标签中的文字会被忽略,如果是“低端”浏览器(如IE8等),则会显示这段替代文字。

站长Colin Gao,85后自由职业者,爱钻研,爱学习网页设计。建立本站的目的是整理学习笔记,分享学习经验,认识更多的朋友。感谢您阅读本站的文章,部分内容参考了网上的一些教程,但我会尽量根据自己的理解写更多原创的东西,本站网址如下,欢迎转载:
如果方便的话,转载请注明来自:http://www.cssaaa.com/website/155.html