HTML5 video

video 视频

1. video介绍

HTML5中提到最多的是视频处理,视频也是互联网中的重要应用.在HTML5中,增加了一个元素,以便在HTML文档中插入和播放视频,这个元素机试video元素.video元素提供了 播放,暂停和音量控件来控制视频.也提供了 width 和 height 属性 控制视频的尺寸.
注意:IE8或者更早的IE版本不支持video元素

2. video支持格式

使用video元素至少要提供两种视频格式的文件:OGG和MP4
OGG:包含Theora视频和Vorbis音频解码器
MP4:采用H.264视频和AAC音频解码器
WebM:采用VP8视频和Ogg Vorbis音频解码器

3. video的简单使用

<video width="360" height="240" controls="controls"
	src="./22.mp4"
>
	视频不能播放
</video>

4.video备选使用

video元素可以提供source元素向浏览器提供备选视频格式
注意:使用source元素读取流媒体,video元素不需要使用src属性

<video height="300" width="800" controls="controls">
	<source src="videos/1.mp4" type="video/mp4"/>
	<source src="videos/1.ogg" type="video/ogg"/>
			视频不能播放
</video>

5.video的属性

属性	值	描述
autoplay	autoplay	如果出现该属性，则视频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
loop	loop	如果出现该属性，则当媒介文件完成播放后再次开始播放。
muted	muted	规定视频的音频输出应该被静音。
preload	preload	如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。
src	url	要播放的视频的 URL。
poster	URL	规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。
height	pixels	设置视频播放器的高度。
width	pixels	设置视频播放器的宽度。

preload有三个值

• none:不缓存视频,为了减少不必要的流量
• metadata:播放前只加载视频的高度,宽度以及其他此类信息
• auto:默认值,要求浏览器尽可能快的下载视频
  注意:autoplay必须配合 muted属性一块使用,才能实现自动播放效果.

---

感谢大家的支持!!

.