一、<video>
1、<video>是H5的新标签,用来处理视频,在此之前,各网站用来处理视频一直使用flash技术
flash的缺点有以下几方面,首先原生浏览器原生不支持,需要插件,其次过多的使用会导致网站性能变差,最后就是智能移动端并不支持Flash技术
与flash相比,<video>的优势,几乎所有浏览器原生支持<video>元素,性能更高,开发更容易,并且移动端支持非常好,
2、<video>支持的视频格式
MP4格式 - 目前比较主流
OGG格式 - 多用于移动端
WebM格式 - 目前唯一支持超高清格式, 在HTML页面中支持超高清格式(HTML5)
3、如何使用<video>
如果当前浏览器不支持<video>元素,在<video>元素内编写提示内容
使用<source>元素
<video>
<strong>抱歉,你的浏览器不支持播放</strong>
<source src="一种视频格式" />
<source src="一种视频格式" />
<source src="一种视频格式" />
</video>
4、<video>元素的属性
src - 引入视频文件的路径
autoplay - 自动播放视频
controls - 提供控制面板
loop - 表示循环播放
poster - 设置播放之前显示的图片
width和height - 设置显示视频的宽度和高度
preload - 预加载
auto - (默认值)自动加载
none - 不加载
metadata - 只加载视频的基本信息(不含视频)
例、<video src="1.mp4" controls poster="2.png" width="640" height="400" style="background:black"></video>
5、高级使用内容
①方法
play() - 播放视频
pause() - 暂停视频
load() - 加载视频
canPlayType() - 判断当前浏览器是否支持指定视频格式
② 事件
play - 当视频播放时被触发
pause - 当视频暂停时被触发
ended - 当视频结束时被触发
error - 当视频错误时被触发
canplay - 不考虑整体情况下,只要能播放,就播放
canplaythrough - 考虑整体情况下,只要能播放,就播放
progress - 表示视频加载的进度
③ 属性 - 用于判断
paused - 表示判断当前视频是否暂停
返回Boolean值,true表示暂停,false表示播放
ended - 表示判断当前视频是否播放完毕
返回Boolean值,true表示完毕
duration - 表示当前视频的时长
currentTime - 表示当前视频播放的位置
二、<audio>
1、<audio>元素支持音频格式
MP3 - 目前最主流 OGG WAV
2、使用<audio>元素
第一种 - 只支持一种音频格式
<audio src="音频文件的路径"></audio>
第二种 - 同时引入多个音频格式
<audio>
<source src="一种音频格式" />
<source src="一种音频格式" />
<source src="一种音频格式" />
</audio>
3、属性与和方法与<video>基本相同,不做累述