Html入门教程:20.html5多媒体-video元素



video元素

video元素

用于设置视频播放。
目前,由于商业原因,各个浏览器对视频的支持格式各不相同,甚至部分浏览器不支持video元素。video元素支持的视频格式为Ogg格式,mp4格式,WebM格式。

元素属性:

src属性
设置要播放的视频的URL地址

controls属性
添加播放,音量等控件(无属性值)

width,height属性
控制视频播放的宽度,高度

autoplay,loop属性
设置视频自动播放,循环(无属性值)

poster属性
设置在播放前海报url

autoplay属性
自动播放。注意,高版本浏览器必须要设置静音(muted)之后才能支持自动播放。

    <video src="水仙花.mp4" controls>当前浏览器不支持该视频</video>

video元素间的文字内容是在浏览时不支持视频时的显示内容。

兼容:

source元素是video和audio元素的子元素,能通过指定多个文件来源,解决浏览器的兼容问题。当然,这种方式也是需要浏览器支持video元素以及元素中的一种视频格式。
如果使用了source元素,就不能在video和audio中设置src属性。

<video controls>
	<source src="水仙花.mp4" type="video/mp4">
	<source src="水仙花.webm" type="video/webm">
    当前浏览器不支持该视频
</video>

type属性的值需要和前面对应。这样,就可以在支持MP4以及webm格式的浏览器下运行。

下面是video元素支持的视频格式以及浏览器支持情况:
| 格式 | IE | firefox | opera | chrome | safari |
| -------- | -----: | :----: |
| Ogg | no | 3.5+ |10.5+ |5.0+|no
| mp4 | 9.0+ | no |no | 5.0+|3.0+
| webm |no | 4.0+ |10.6+ | 6.0+|no

embed元素

embed既可以播放视频文件,还可以加载其他的插件,一般用于放置flash文件。

对象方法和事件

方法
play() 播放
pause() 暂停
load() 重新加载

事件
canplay 当浏览器可以播放音频/视频时
pause 当音频/视频已暂停时
play 当音频/视频已开始或不再暂停时
seeked 当用户已移动/跳跃到音频/视频中的新位置时
timeupdate 当目前的播放位置已更改时
progress 当浏览器正在下载音频/视频时


上一篇: 19.html5表单-textarea元素与fieldset元素 下一篇: 21.html5多媒体-audio元素