HTML5多媒体

视频处理

video元素：

<video id="media" width="300" controls>
    <source src="xxx.mp4"/>
    <source src="xxx.ogg"/>
</vodeo>

controls属性：视频控件按钮

<video id="media" controls>
    <source src="video/video001.mp4"/>
</video>

• autoplay：加载后自动播放
• loop：循环播放
• poster：在视频等待播放时显示一幅画像
• preload：可以设置三个值（none：不缓存视频，metadata：推荐浏览器抓取一些资源信息，auto：默认值，要求浏览器尽可能快地下载视频）

编程实现视频播放

事件：

• progress：更新媒体的下载速度，会周期性地触发
• conplaythrough：顺利播放时会触发
• canplay：不考虑整体状态，只要下载了一定的可放帧会触发这个事件
• ended：媒体到达末尾时触发
• pause：暂停时触发
• play：开始播放时触发
• error：媒体播放出现错误时触发

方法：

• play()：播放
• pause()：暂停
• load()：加载媒体文件
• CanPlayType(type)：查看浏览器

属性：

• paused：暂停或未播放为true
• ended：已经结束为true
• duration：返回媒体时长，以秒为单位
• currentTime：获取或设置媒体播放位置

音频处理

audio属性：
src，controls，autoplay，loop，preload
其实属性与video相同，事件与方法也一样，只是标签不一样。