HTML5-音频和视频

音频和视频

基本使用

只有在浏览器使用video和audio就可以开始使用了

<video src="video.webm" controls>

</video>
<audio src="audio.ogg" controls>

</audio>

当浏览器不支持时可以在标签之间使用其他替代的媒体方案

source

使用source可以指定多个资源，但是video和audio都不支持跨域

<audio controls autoplay>
    <source src="" type="">
</audio>

autoplay将使资源自动播放，sorce指定多个源，type指定媒体类型的特性值

媒体控制

先特别提醒个坑：使用可爱的jQuery获得audio或video时应该使用$(‘video’)[0]，不管是使用元素选择还是id选择后面那个0一定要的，不然肯定出错。

• 控制函数

函数	动作
load()	动态生成的媒体资源，在播放前进行预加载
play()	播放媒体资源
pause()	暂停媒体资源
canPlayType()	测试video是否支持特定的MIME类型

* 只读属性属性说明

属性	说明
duration	获取媒体文件的播放时长，以s为单位，如果无法获取，则为NaN
paused	如果媒体文件被暂停，则返回true，否则返回false
ended	如果媒体文件播放完毕，则返回true
startTime	返回起始播放时间，一般是0.0，除非是缓冲过的媒体文件，并一部分内容已经不在缓冲区
error	在发生了错误后返回的错误代码
currentSrc	以字符串形式返回正在播放或已加载的文件，对应于浏览器在source元素中选择的文件

* audio可脚本控制的特性值：

属性	说明
autoplay	自动播放已经加载的的媒体文件，或查询是否已设置为autoplay
loop	将媒体文件设置为循环播放，或查询是否已设置为loop
currentTime	以s为单位返回从开始播放到目前所花的时间，也可设置currentTime的值来跳转到特定位置
controls	显示或者隐藏用户控制界面
volume	在0.0到1.0间设置音量值,或查询当前音量值
muted	设置是否静音
autobuffer	媒体文件播放前是否进行缓冲加载，如果设置了autoplay，则忽略此特性

video特性

属性	说明
poster	提供一张封面照片
width、height	播放位置的宽和高
videoWidth、videoHeight	视频源宽和高

当资源能被播放时会触发 oncanplay
当资源播放结束会触发 onended