video自定义播放条
<!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; } .playSource{ -webkit-box-flex: 5; } .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; } .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; } .sourceDiv{ height:7px; background:#2d2e2f; float:left; margin-top:19px; margin-left: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"> </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>
/** * 可应用于倒计时 * 该函数求我们已知秒数求小时，分钟，秒的具体时间， * 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]))+ '%'; } } };
现在还没有写声音，有新项目，很快补上。现在能实现视频的缓冲进度显示，代码很简单，欢迎指教。
