H5新特性视频和音频
H5新特性—视频
<video src=”x.mp4”></video>
<video>
<source src=”x.mp4”></source>
<source src=”x.ogg”></source>
<source src=”x.webm”></source>
您的浏览器版本太低，请升级
</video>
它本身是一个300*150的inline-block元素
1.<video> 元素提供了 播放、暂停和音量控件来控制视频。
2.同时<video> 元素元素也提供了 width 和 height 属性控制视频的尺寸.如果设置的高度和宽度，所需的视频空间会在页面加载时保留。如果没有设置这些属性，浏览器不知道大小的视频，浏览器就不能再加载时保留特定的空间，页面就会根据原始视频的大小而改变。
3.<video> 与</video> 标签之间插入的内容是提供给不支持 video 元素的浏览器显示的。
4.<video> 元素支持多个 <source> 元素. <source> 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式。
以下属性可以直接写在video标签中
成员属性
autoplay 是否自动播放
controls 是否显示控件
muted 是否静音
loop 是否循环播放
poster 在播放第一帧画面之前广告(图片)
preload 视频加载策略
1.auto: 预加载一定时长视频和元数据
2.metadata: 仅预加载元素数(尺寸，时长，第一帧画面)
3.none: 不加载任何内容
以下属性需要借助js才能使用
对象属性
currentTime 当前播放时长
duration 总时长
paused: 当前视频是否处理暂停状态
volume（0~1） 音量
playbackRate: 回放速率: 大于1快播 小于1慢放
成员方法
play() 播放视频
pause() 暂停视频播放
事件
onplay 当视频开始播放触发事件
onpause 当视频暂停播放触发事件
H5新特性—音频
<audio src=”x.mp3”></audio>
<audio>
<source src=”x.mp3” />
<source src=”x.wav” />
</audio>
它默认300*30的inline-block元素，但是没有controls属性，
则display:none;
1. control 属性供添加播放、暂停和音量控件。
2. 在<audio> 与 </audio> 之间你需要插入浏览器不支持的<audio>元素的提示文本 。
3. <audio> 元素允许使用多个 <source> 元素. <source> 元素可以链接不同的音频文件，浏览器将使用第一个支持的音频文件
以下属性可以直接写在audio标签中
成员属性
autoplay 是否自动播放
controls 是否显示控件
muted 是否静音
loop 是否循环播放
preload 视频加载策略
auto: 预加载一定时长视频和元数据
metadata: 仅预加载元素数(尺寸，时长，第一帧画面)
none: 不加载任何内容
以下属性需要借助js才能使用
##js对象属性
currentTime 当前播放时长
duration 总时长
paused: 当前视频是否处理暂停状态
volume（0~1） 音量
playbackRate: 回放速率: 大于1快播 小于1慢放
#js 成员方法
play() 播放音频
pause() 暂停音频播放
#js 事件
onplay 当音频开始播放触发事件
onpause 当音频暂停播放触发事件
用复选框来控制音频播放