html5 video 兼容性和使用
1、最近项目中有用到这个功能，遇到了两三次了，当时都是云里雾里的，所以后面决定好好研究一下，免得以后用的时候又什么都不知道
一、兼容性
Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari 支持
注释：Internet Explorer 8 以及更早的版本不支持
解决video兼容的方案是使用video.js 开源项目地址 http://www.oschina.net/p/video-js
1、引入相应的样式和js
2、引入相应的类，使用默认样式
To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video
vjs-big-play-centered播放开关在中间，一般放左边避免遮挡视频
二、方法属性
preload: （预加载）iPhone支持，Android不一定支持;
poster: （封面图片）iPhone支持，Android不一定支持;
autoplay: （自动播放）iPhone中的Safari不支持，webview可能被开启。Android不一定支持；
loop: （循环播放）iPhone支持，Android不一定支持;
controls: （控制条）iPhone支持，大师需要开始播放了才显示，Android基本支持;
width: （宽度）;
height: （高度）;
三、Media方法和属性： 摘自http://www.jb51.net/html5/317406.html
Media.error.code; //1.用户终止 2.网络错误 3.解码错误 4.URL无效
//网络状态
- Media.currentSrc; //返回当前资源的URL
- Media.src = value; //返回或设置当前资源的URL
- Media.canPlayType(type); //是否能播放某种格式的资源
- Media.networkState; //0.此元素未初始化 1.正常但没有使用网络 2.正在下载数据 3.没有找到资源
- Media.load(); //重新加载src指定的资源
- Media.buffered; //返回已缓冲区域，TimeRanges
- Media.preload; //none:不预载 metadata:预载资源信息 auto:
//准备状态
- Media.readyState;//1:HAVE_NOTHING 2:HAVE_METADATA 3.HAVE_CURRENT_DATA 4.HAVE_FUTURE_DATA 5.HAVE_ENOUGH_DATA
- Media.seeking; //是否正在seeking
//回放状态
Media.currentTime = value; //当前播放的位置，赋值可改变位置
Media.startTime; //一般为0，如果为流媒体或者不从0开始的资源，则不为0
Media.duration; //当前资源长度 流返回无限
Media.paused; //是否暂停
Media.defaultPlaybackRate = value;//默认的回放速度，可以设置
Media.playbackRate = value;//当前播放速度，设置后马上改变
Media.played; //返回已经播放的区域，TimeRanges，关于此对象见下文
Media.seekable; //返回可以seek的区域 TimeRanges
Media.ended; //是否结束
Media.autoPlay; //是否自动播放
Media.loop; //是否循环播放
Media.play(); //播放
Media.pause(); //暂停
//视频控制
Media.controls;//是否有默认控制条
Media.volume = value; //音量
Media.muted = value; //静音
TimeRanges(区域)对象
TimeRanges.length; //区域段数
TimeRanges.start(index) //第index段区域的开始位置
TimeRanges.end(index) //第index段区域的结束位置
//相关事件
var eventTester = function(e){
Media.addEventListener(e,function(){
console.log((new Date()).getTime(),e)
},false);
}
eventTester("loadstart"); //客户端开始请求数据
eventTester("progress"); //客户端正在请求数据
eventTester("suspend"); //延迟下载
eventTester("abort"); //客户端主动终止下载（不是因为错误引起）
eventTester("loadstart"); //客户端开始请求数据
eventTester("progress"); //客户端正在请求数据
eventTester("suspend"); //延迟下载
eventTester("abort"); //客户端主动终止下载（不是因为错误引起），
eventTester("error"); //请求数据时遇到错误
eventTester("stalled"); //网速失速
eventTester("play"); //play()和autoplay开始播放时触发
eventTester("pause"); //pause()触发
eventTester("loadedmetadata"); //成功获取资源长度
eventTester("loadeddata"); //
eventTester("waiting"); //等待数据，并非错误
eventTester("playing"); //开始回放
eventTester("canplay"); //可以播放，但中途可能因为加载而暂停
eventTester("canplaythrough"); //可以播放，歌曲全部加载完毕
eventTester("seeking"); //寻找中
eventTester("seeked"); //寻找完毕
eventTester("timeupdate"); //播放时间改变
eventTester("ended"); //播放结束
eventTester("ratechange"); //播放速率改变
eventTester("durationchange"); //资源长度改变
eventTester("volumechange"); //音量改变
四、隐藏contorl通过点击固有模块和视频自身控制视频的播放和显示和src的路径
扩展知识 -----摘自-http://www.h5cn.com/html5/rumen/20157474.html
一、视频的格式
目前比较主流和使用比较的的视频格式主要有：avi、rmvb、wmv、mpeg4、ogg、webm。这些视频都是由视频、音频、编码格式三部分组成的。在HTML5中，根据浏览器的不同，目前拥有多套不同的编码器：
H.264：这个编码器是苹果系统包括苹果手机中的编码器，拥有专利的视频编码器。在编码及传输过程中的任何部分都可能需要收取专利费。因此Safari（苹果的浏览器）和Intenet Explorer支持该编码器，但是在开源已经成为大势的当下，还在浏览器中收取专利费，个人实在是不看好啊。
Theora:这是一个不受专利限制的编码格式，并且对所有等级的编码、传输以及回放免费的视频编码器。Chrome、Firefox以及Opera支持该编码器。
VP8：该视频编码器与Theora相似，但是其拥有者是Google公司，Google公司已经开源，因此不需要专利费。Chrome、Firefox以及Opera支持该编码器。
AAC:音频编码器，与H.264相同，该音频编码器拥有专利限制，Safari、Chrome和Internet Explorer支持该音频编码器。
MP3：也是一个专利技术，Safari、Chrome和Internet Explorer支持该音频编码器。
PCM:存储由模拟数字转换器编码的完整数据，在音频CD上存储数据的一种格式。是以中国无损编码器，它的文件大小一般是AAC和MP3文件的几倍，Safari、Firefox和Internet Explorer支持该音频编码器。
Vorbis:文件扩展名为.ogg，有时候也被称为Ogg Vorbis,该音频编码器不受专利保护，因此版权免费。支持的浏览器包括Chrome、Firefox和Opera.
主流浏览器和设备支持的视频和音频
| 浏览器 | 容器 | 视频 | 音频 |
| Apple ios | MP4 | H.264 | ACC、MP3、PCM |
| Apple Safari | MP4 | H.264 | |
| Google Android(pre v.3) | -- | -- | -- |
| Google Chrome | MP4、OGG、WebM | Theora、VP8 | ACC、MP3、Vorbis |
| Microsoft Internet Explorer | MP4 | H.264 | ACC、MP3 |
| Mozilla Firefox | OGG、WebM | Theora、VP8 | PCM、Vorbis |
| Opera | OGG、WebM | Theora、VP8 | PCM、Vorbis |