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 当浏览器正在下载音频/视频时