一、最近项目中有用到这个功能，遇到了两三次了，当时都是云里雾里的，因此后面决定好好研究一下，省得之后用的时候又什么都不知道
javascript
1、兼容性css
Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari 支持 <video> 标签。html
注释：Internet Explorer 8 以及更早的版本不支持 <video> 标签。 -------摘自w3chtml5
解决video兼容的方案是使用video.js 开源项目地址 http://www.oschina.net/p/video-jsjava
一、引入相应的样式和js
jquery
<link href="http://vjs.zencdn.net/4.12/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.12/video.js"></script>ios
二、引入相应的类，使用默认样式web
<video id="example_video_1" class="video-js vjs-default-skin vjs-big-play-centered"
controls preload="auto" width="640" height="264"
poster="http://video-js.zencoder.com/oceans-clip.png"
data-setup='{"example_option":true}'>
<source src="video.mp4" type='video/mp4' />
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
</video>
浏览器
vjs-big-play-centered播放开关在中间，通常放左边避免遮挡视频
网络
2、方法属性
preload: （预加载）iPhone支持，Android不必定支持;
poster: （封面图片）iPhone支持，Android不必定支持;
autoplay: （自动播放）iPhone中的Safari不支持，webview可能被开启。Android不必定支持；
loop: （循环播放）iPhone支持，Android不必定支持;
controls: （控制条）iPhone支持，大师须要开始播放了才显示，Android基本支持;
width: （宽度）;
height: （高度）;
3、Media方法和属性： 摘自http://www.jb51.net/html5/317406.html
Media.error; //null:正常
Media.error.code; //1.用户终止 2.网络错误 3.解码错误 4.URL无效
<strong>//网络状态</strong>
- 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:</p><p><strong>//准备状态</strong>
- Media.readyState;//1:HAVE_NOTHING 2:HAVE_METADATA 3.HAVE_CURRENT_DATA 4.HAVE_FUTURE_DATA 5.HAVE_ENOUGH_DATA
- Media.seeking; //是否正在seeking</p><p><strong>//回放状态</strong></p><p>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(); //暂停
<strong>//视频控制</strong></p><p>Media.controls;//是否有默认控制条
Media.volume = value; //音量
Media.muted = value; //静音
TimeRanges(区域)对象
TimeRanges.length; //区域段数
TimeRanges.start(index) //第index段区域的开始位置
TimeRanges.end(index) //第index段区域的结束位置
<strong>//相关事件</strong></p><p> 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"); //音量改变
4、隐藏contorl经过点击固有模块和视频自身控制视频的播放和显示和src的路径
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>h5video处理</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<link href="css/common.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery-1.11.3.min.js" ></script>
<script src='http//cdn.bootcss.com/html5shiv/r29/html5.min.js'></script>
<!-- <link href="http://vjs.zencdn.net/4.12/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.12/video.js"></script>-->
<style>
.videotest{width:100%;height:7.5rem;margin:auto;position:fixed;top:0;left:0;right:0;bottom:0;}
.vplay{position:fixed;top:50%;left:50%;width:40px;height:40px;border-radius: 50%;background: red;margin-left:-20px;margin-top:-20px;text-align: center;line-height: 1.5;}
.box{}
.alert{width:100%;height:100%;background: rgba(0,0,0,.5);position:fixed;top:0;left:0;}
.hidden{display: none;;}
</style>
</head>
<body>
<div class='alert hidden'></div>
<div class='box pos_relative'>
<!-- <video poster="img/cheng1_02.jpg" class='videotest' src="video.mp4" controls="controls"></video>-->
<video poster="img/cheng1_02.jpg" class='videotest' src="video.mp4">你的浏览器版本过低，请及时更新</video>
<a class='vplay' href='javascript:void(0);'>播放按钮</a>
<!-- 这里用javascript:;会报错在ie里面，而后点击事件 不起做用，用javascript:void 0，javascript:void(0)或#都行，void是个操做符不是一个函数 可是ie11仍是不会显示video,是因为编码问题？-->
</div>
<script type="text/javascript">
/* console.log($(".videotest")[0].paused) //true
console.log($(".videotest")[0].payed) //undifinded*/
//点击a标签实现对视频的管控
$(".vplay").click(function(){
if($(".videotest")[0].paused){
$(".videotest").attr('src','video.mp4');
$(".videotest").get(0).play();
$('.vplay').hide();
}else{
$(".videotest")[0].pause();
$('.vplay').show();
}
})
//点击视频自己实现视频的播放和暂停
$('.videotest').click(function(){
$(".alert").show();
if($(this)[0].paused){
$(this).attr('src','video.mp4');
$(this)[0].play();
$('.vplay').hide();
}else{
$(this)[0].pause();
$('.vplay').show();
}
})
//实现蒙层弹窗的出现和消失,而且关闭后也将src的路径改成空这样的话实现视频的转换或者是视频的关闭后利于从新播放
$(function(){
$(".alert").click(function(){
$(".videotest").attr('src','');
$(this).hide();
$('.vplay').hide();
})
})
</script>
</body>
</html>
扩展知识 -----摘自-http://www.h5cn.com/html5/rumen/20157474.html
1、视频的格式
目前比较主流和使用比较的的视频格式主要有：avi、rmvb、wmv、mpeg四、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、MP三、PCM |
| Apple Safari |
MP4 |
H.264 |
|
| Google Android(pre v.3) |
-- |
-- |
-- |
| Google Chrome |
MP四、OGG、WebM |
Theora、VP8 |
ACC、MP三、Vorbis |
| Microsoft Internet Explorer |
MP4 |
H.264 |
ACC、MP3 |
| Mozilla Firefox |
OGG、WebM |
Theora、VP8 |
PCM、Vorbis |
| Opera |
OGG、WebM |
Theora、VP8 |
PCM、Vorbis |