支持全屏，缓冲进度显示，兼容火狐谷歌。
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><link rel="stylesheet" type="text/css" href="css/common.css"/><style>span{font-size: 10px;font-weight: 600;color: #eee;}img{cursor: pointer;}.container { position: relative; width: 640px; height: 275px; background-color: #000; overflow: hidden; margin:50px auto;}.container video { position: absolute; top: 0; left: 0; cursor: pointer;}.container .playimg{display: block;position: absolute;top:50%;left:50%;transform: translate(-50%,-50%);display: none;}.container .controls { position: absolute; left: 0; bottom: 0; width: 100%; height: 43px; z-index: 9999; background-color: rgba(57, 57, 57, 0.8); display: -webkit-box; display: -moz-box; color: #fff;}.conIsplay,.playTimes,.playAlltime,.isFullscreen{-webkit-box-flex: 1;text-align: center;line-height: 41px;}.playTags{-webkit-box-flex: 15;}.playTags{position: relative;height:30px;margin-top: 13px;cursor: pointer;overflow: hidden;}.playTags .progressWrap{position: absolute;left:0;top:6px;height:7px;width:100%;background:#2d2e2f;z-index:1;-webkit-border-radius: 8px;-moz-border-radius: 8px;border-radius: 8px;}.playTags .progressBuffer{position: absolute;left:0;top:6px;height:7px;width:100%;z-index:2;}.playTags .progressBuffer span{display: block;height: 7px;width:0;background:#4b4c4d;float:left;}.playTags .progressPass{position: absolute;left:0;top:6px;height:7px;width:0;background:#6cd935;z-index:3;}.playTags .progressPass:after{content: "";display: block;width:13px;height:13px;position: absolute;top:-3px;right:-12px;background: url(prigress.png) no-repeat;z-index:9;}.sourceImg{display: block;margin-top:15px;float: left;width:9px;}.sourceDiv{height:7px;background:#2d2e2f;float:left;margin-top:19px;margin-left:8px;width:80px;-webkit-border-radius: 8px;-moz-border-radius: 8px;border-radius: 8px;}.sourceDiv span{display: block;width:100%;height:7px;background: #6ad534;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;}.spinner { width: 100%; height: 100%; text-align: center; font-size: 10px; position: absolute; top:0; left:0; background: #333; display: none; z-index: 999;} .spinner .react { background-color: #67CF22; margin-top:18%; height: 10%; width: 6px; display: inline-block; -webkit-animation: stretchdelay 1.2s infinite ease-in-out; animation: stretchdelay 1.2s infinite ease-in-out;} .spinner .rect2 { -webkit-animation-delay: -1.1s; animation-delay: -1.1s;} .spinner .rect3 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s;} .spinner .rect4 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s;} .spinner .rect5 { -webkit-animation-delay: -0.8s; animation-delay: -0.8s;} @-webkit-keyframes stretchdelay { 0%, 40%, 100% { -webkit-transform: scaleY(0.4) } 20% { -webkit-transform: scaleY(1.0) }} @keyframes stretchdelay { 0%, 40%, 100% { transform: scaleY(0.4); -webkit-transform: scaleY(0.4); } 20% { transform: scaleY(1.0); -webkit-transform: scaleY(1.0); }}</style></head><body><div class="container"><div class="spinner"><div class="rect1 react"></div><div class="rect2 react"></div><div class="rect3 react"></div><div class="rect4 react"></div><div class="rect5 react"></div></div><!--不启用预加载--><video width="100%" height="100%" poster="poster.png" id="vdo"><source src="http://wow.techbrood.com/uploads/141102/chrome_japan.mp4" type="video/mp4" /></video><img class="playimg" src="play.png" /><div class="controls"><div class="conIsplay"><img class="isplay" src="isplay.png"/></div><div class="playTimes"><span class="currentTime">00:00</span></div><div class="playTags" id = "playTags"><div class="progressWrap" id = "progressWrap"> </div><div class="progressBuffer"> <span></span></div><div class="progressPass"> </div></div><div class="playAlltime"><span class="alltimes"></span></div><div class="playSource"><img class="sourceImg" src="source.png"/><div class="sourceDiv"><span class="sourceSpan"></span></div></div><div class="isFullscreen"><img class="fullScreen" src="full.png"/></div></div></div></body></html><script type="text/javascript" src = "js/jquery-1.11.0.js"></script><script type="text/javascript" src = "video.js"></script>js部分：
/** * 可应用于倒计时 * 该函数求我们已知秒数求小时，分钟，秒的具体时间， * h---小时 * m---分钟 * s---秒数 * 如果h，m,s小于10，显示的样式为 01 * 如果计算没有小时，那么将不显示小时 * @param {Object} val */function getShowTime(val){var h = Math.floor(val/3600);var m = Math.floor((val - h*3600)/60);var s = Math.floor(val - h*3600 - m*60);h = h<10?"0"+h:h;m = m<10?"0"+m:m;s = s<10?"0"+s:s;//判断为00,是因为上面进行了字符串的拼接if(h == "00"){return m+":"+s;}else{return h+":"+m+":"+s;}}/** * 获取浏览器内核 * 火狐和谷歌的全屏事件不一致 */function getBrowser() { var ua = window.navigator.userAgent; var isIE = window.ActiveXObject != undefined && ua.indexOf("MSIE") != -1; var isFirefox = ua.indexOf("Firefox") != -1; var isOpera = window.opr != undefined; var isChrome = ua.indexOf("Chrome") && window.chrome; var isSafari = ua.indexOf("Safari") != -1 && ua.indexOf("Version") != -1; if (isIE) { return "IE"; } else if (isFirefox) { return "Firefox"; } else if (isOpera) { return "Opera"; } else if (isChrome) { return "Chrome"; } else if (isSafari) { return "Safari"; } else { return "Unkown"; }}/** * 判断火狐谷歌浏览器下是否全屏事件 * 返回值 true false */function IsFullScreen(){if(getBrowser() == "Chrome"){return document.webkitIsFullScreen}else{return document.mozFullScreen}}//控制视频播放(只有使用window.onload这个才能获取播放总时长)window.onload = function(){var medias = $("#vdo").get(0);var duration = $("#vdo").get(0).duration; //获取总时间$(".alltimes").html(getShowTime(duration)); //显示总时长var vw = $("#vdo").width(); //视频宽高var vh = $("#vdo").height();var sw = screen.width; //浏览器宽高var sh = screen.height;//点击视频区域的播放暂停$("video,.playimg,.isplay").on("click",function(){if(medias.paused){$(".playimg").fadeOut(500);$(".isplay").attr("src","yesplay.png");medias.play();}else{$(".playimg").fadeIn(500);$(".isplay").attr("src","isplay.png");medias.pause();}});//鼠标拖动进度条$(".playTags").bind("mousedown",function(e){var _event = window.event||e;var that = $(this);var left = _event.offsetX;var progressLen = $(".playTags").width(); $(".progressPass").width(left-10);var progresstimes = parseInt(duration*left/progressLen); //判断缓冲medias.currentTime = progresstimes;//鼠标按下后绑定鼠标滑动事件that.bind("mousemove",function(e){var _event = window.event||e;var x = _event.offsetX;$(".progressPass").width(x-10);moveTimes = parseInt(duration*x/progressLen); //判断缓冲medias.currentTime = moveTimes;});//鼠标弹起后取消滑动事件that.mouseup(function(e){that.unbind("mousemove"); });that.mouseleave(function(e){that.unbind("mousemove");});});//全屏$(".fullScreen").on("click",function(){if(IsFullScreen() == false){ //非全屏状态变全屏if(getBrowser() == "Firefox"){$(".container").get(0).mozRequestFullScreen(); //火狐}else{videoWidthandHeight(sw,sh);$(".container").get(0).webkitRequestFullScreen(); //谷歌}}else{ //全屏状态变非全屏if(getBrowser() == "Firefox"){document.mozCancelFullScreen(); //火狐 }else{videoWidthandHeight(vw,vh);document.webkitCancelFullScreen(); //谷歌}}});//esc键盘退出全屏恢复video宽高(针对谷歌)$(document).keyup(function(event){if(IsFullScreen() == false){videoWidthandHeight(vw,vh);}});//一直执行的一个（timeupdate 事件在音频/视频（audio/video）的播放位置发生改变时触发。）medias.addEventListener("timeupdate",updateData,true);//计算当前播放的时间、进度条控制function updateData(){//获取进度条总宽度onprogress();//缓冲var progressBar = $(".playTags").width(); var curTime = medias.currentTime;//计算已播放与未播放的比值var percent = parseInt(progressBar*curTime/duration);//控制进度条$(".progressPass").width(percent);//获取到当前播放的时间var goWhere = parseInt($(".progressPass").width()-(-10)); //判断缓冲var goPercent = parseInt(duration*goWhere/progressBar);for(var n = 0; n < medias.buffered.length; n++){ if(goPercent-0.05>medias.buffered.end(n)){ //正在缓冲$(".spinner").show();}else{ //缓冲完毕$(".spinner").hide();var curTime = medias.currentTime;}}//显示当前播放的时间$(".currentTime").html(getShowTime(curTime));isEndvideo(); //是否结束播放}/** * 控制video的宽高 * */function videoWidthandHeight(width,height){$(".container").width(width);$(".container").height(height);$("#vdo").width(width);$("#vdo").height(height);}/** * 是否播放结束 * 控制播放按钮 进度条 */function isEndvideo(){//播放完毕恢复初始状态if(medias.ended){$(".spinner").hide();$(".playimg").fadeIn(500);$(".isplay").attr("src","isplay.png");$(".progressPass").width("0");$(".currentTime").html("00:00");}}//获取缓冲的进度条function onprogress(){ //获得buffered数据 var ranges = []; for(var k = 0; k < medias.buffered.length; k++){ ranges.push([ medias.buffered.start(k), medias.buffered.end(k) ]); } //获得在容器中的当前缓冲进度 var playtag = $('.progressBuffer'); var spans = playtag.find("span"); if(spans.length < medias.buffered.length) { playtag.append('<span></span>'); } if(spans.length > medias.buffered.length) { playtag.children("span:last-child").remove(); } for(var j = 0; j < medias.buffered.length; j++){ spans[j].style.left = Math.round((100 / medias.duration)*ranges[j][0])+ '%'; spans[j].style.width = Math.round((100 / medias.duration)*(ranges[j][1] - ranges[j][0]))+ '%'; } }/** * 声音控制 */$(".sourceImg").on("click",function(){source("issource");});$(".sourceDiv").on("mousedown",function(e){source();var _event = window.event||e;var that = $(this);var left = _event.offsetX;$(".sourceSpan").width(left);medias.volume = Math.round(100*left/80)/100; })function source(issource){if(medias.muted){medias.muted=false;$(".sourceImg").attr("src","source.png")$(".sourceSpan").show();return medias.muted}if(issource){if(!medias.muted){medias.muted=true;$(".sourceImg").attr("src","nosource.png");$(".sourceSpan").hide();return medias.muted}}}};
3 0
