HTML5中的音视频处理

* 音视频处理
* 视频处理
* 基本内容
* 使用Flash技术处理HTML页面中的视频内容
* 包含音频、动画、网页游戏等
* 特点
* 浏览器原生不支持(IE浏览器要求安装ActiveX组件)
* 性能不好(不能过多地使用)
* 智能移动端并不支持Flash技术
* 命运
* Flash的母公司Adobe公开宣布放弃
* 目前用于替代Flash技术最好的选择 - HTML5
* 几乎所有浏览器原生支持<video>元素
* 性能更高
* 智能移动端支持非常好
* 如何实现视频处理
* <video>元素
* 如果当前浏览器不支持<video>元素
* 在<video>元素内编写提示内容
* 属性
* src - 引入视频文件的路径
* autoplay - 自动播放视频
* 使用<source>元素
<video>
<source src='/images/loading.gif' data-original="一种视频格式" />
<source src='/images/loading.gif' data-original="一种视频格式" />
<source src='/images/loading.gif' data-original="一种视频格式" />
</video>
* <video>支持的视频格式
* MP4格式 - 目前比较主流
* OGG格式 - 多用于移动端
* WebM格式 - 目前唯一支持超高清格式
* 在HTML页面中支持超高清格式(HTML5)
* 由Google公司推出的
* <video>元素的属性
* src - 引入视频文件的路径
* autoplay - 自动播放视频
* controls - 提供控制面板
* loop - 表示循环播放
* poster - 设置播放之前显示的图片
* width和height - 设置显示视频的宽度和高度
* preload - 预加载
* auto - (默认值)自动加载
* none - 不加载
* metadata - 只加载视频的基本信息(不含视频)
* 高级内容
* 方法
* play() - 播放视频
* pause() - 暂停视频
* load() - 加载视频
* canPlayType() - 判断当前浏览器是否支持指定视频格式
* 事件
* play - 当视频播放时被触发
* pause - 当视频暂停时被触发
* ended - 当视频结束时被触发
* error - 当视频错误时被触发
* canplay - 不考虑整体情况下,只要能播放,就播放
* canplaythrough - 考虑整体情况下,只要能播放,就播放
* progress - 表示视频加载的进度
* 属性 - 用于判断
* paused - 表示判断当前视频是否暂停
* 返回Boolean值,true表示暂停,false表示播放
* ended - 表示判断当前视频是否播放完毕
* 返回Boolean值,true表示完毕
* duration - 表示当前视频的时长
* currentTime - 表示当前视频播放的位置
* 音频处理
* <audio>元素
* 第一种 - 只支持一种音频格式
<audio src='/images/loading.gif' data-original="音频文件的路径"></audio>
* 第二种 - 同时引入多个音频格式
<audio>
<source src='/images/loading.gif' data-original="一种音频格式" />
<source src='/images/loading.gif' data-original="一种音频格式" />
<source src='/images/loading.gif' data-original="一种音频格式" />
</audio>
* <audio>元素支持音频格式
* MP3 - 目前最主流
* OGG
* WAV