需要注意的地方，基于html vedio 标准使用期去了解一下
1.想去掉视频默认的播放条，去掉controls属性。
2.需要预加载视频加上preload="auto"属性。
第一个为JS部分，第二个为html部分，第三个为CSS部分。
$(function(){ init(); }); var init = function(){ initVideo();//初始化播放进度条 } //视频播放条 var flag = false; var initTimeLength = function(timeLength){//根据秒数格式化时间 timeLength = parseInt(timeLength); var second = timeLength%60; var minute = (timeLength-second)/60; return (minute<10?"0"+minute:minute)+":"+(second<10?"0"+second:second); } var initVideo = function(player){ flag = true; var main_div = $("#wap_video_play_main_div");//播放进度div对象 var vedio_class =$(".picbox");//视频dom对象 main_div.on("click","a[name='pause']",function(){ //暂停 继续 var video = $("video",vedio_class); video.css("top","0px") video.css("top","50%") if(video[0].paused) {//页面上多个视频同时播放 video[0].play(); video[1].play(); video[2].play(); $("img",$(this)).attr("src","/truck-web/resource/static/images/pause.png"); }else { video[0].pause(); video[1].pause(); video[2].pause(); $("img",$(this)).attr("src","/truck-web/resource/static/images/play.png"); } return false; }); $("video",vedio_class).on('loadedmetadata', function() { //获取全部视频长度 var video = $("video",vedio_class); $("i:eq(1)",main_div).html(initTimeLength(video[0].duration)); }); $("video",vedio_class).on('timeupdate', function() { //实时更新播放进度条和时间,以其中一个视频的时长为基准 var video = $("video",vedio_class); var currentPos = video[0].currentTime; //Get currenttime //当前时间 var maxduration = video[0].duration; //Get video duration //总时间 var percentage = 100 * currentPos / maxduration; //in % $("i:eq(0)",main_div).html(initTimeLength(video[0].currentTime)); $("span b:eq(0)",main_div).css("width",percentage+"%") $("i:eq(1)",main_div).html(initTimeLength(video[0].duration)); if(currentPos==maxduration){ $("a[name='pause'] img",main_div).attr("src","/truck-web/resource/static/images/play.png") } }); //$("video",main_div)[0].controls=false; //$("video",main_div).removeAttr("controls"); //$("video",main_div).attr("controls",null); //隐藏控制条 var startBuffer = function() { //预加载视频的 var video = $("video",vedio_class); var maxduration = video[0].duration; var currentBuffer = video[0].buffered.end(0); var percentage = 100 * currentBuffer / maxduration; $("span b:eq(2)").css('width', percentage+'%'); if(currentBuffer < maxduration) { setTimeout(startBuffer, 500); } }; // setTimeout(startBuffer, 500); initProgressBar(); } var initProgressBar = function(){ //进度条相关操作 var main_div = $("#wap_video_play_main_div"); var vedio_class =$(".picbox"); var video = $("video",vedio_class); var timeDrag = false; /* Drag status */ $("span[name='progress']",main_div).mousedown(function(e) { //进度条的按下操作 timeDrag = true; updatebar(e.pageX); }); $(document).mouseup(function(e) { //松开 if(timeDrag) { timeDrag = false; updatebar(e.pageX); } }); $(document).mousemove(function(e) { //鼠标移动事件 if(timeDrag) { updatebar(e.pageX); } }); //update Progress Bar control var updatebar = function(x) { //更新时间与播放条进度 var progress = $("span[name='progress']",main_div); var maxduration = video[0].duration; //Video duraiton var position = x - progress.offset().left; //Click pos var percentage = 100 * position / progress.width(); //Check within range if(percentage > 100) { percentage = 100; } if(percentage < 0) { percentage = 0; } //Update progress bar and video currenttime $("span b:eq(0)",main_div).css('width', percentage+'%'); video[0].currentTime = maxduration * percentage / 100; if(percentage==100){ $("a[name='pause'] img",main_div).attr("src","/truck-web/resource/static/images/play.png") } }; $('u img',main_div).unbind().bind('click', function() { //控制视频全屏与退出全屏 //For Webkit video[0].webkitEnterFullscreen(); //For Firefox video[0].mozRequestFullScreen(); video[0].controls=false; return false; }); }
<body> <div class="conter-body-info-right"> <div class="right-top"> <!-- 左右滚动部分 begin --> <div class="scroll"> <div class="picbox"> <ul class="piclist mainlist"> <li> <div class="goodlist"> <video controls="controls" oncontextmenu="return false;" preload="auto" x-webkit-airplay="true" webkit-playsinline="true" id="video_id_1464329192793" width="100%" height="100%" style="z-index: 1; overflow: hidden; box-sizing: border-box;"> <source src="http://nettuts.s3.amazonaws.com/763_sammyJSIntro/trailer_test.mp4" type="video/mp4"> </video> </div> <div class="goodlist"> <video controls="controls" oncontextmenu="return false;" preload="auto" x-webkit-airplay="true" webkit-playsinline="true" id="video_id_1464329192793" width="100%" height="100%" style="z-index: 1; overflow: hidden; box-sizing: border-box;"> <source src="http://nettuts.s3.amazonaws.com/763_sammyJSIntro/trailer_test.mp4" type="video/mp4"> </video> </div> <div class="goodlist"> <video controls="controls" oncontextmenu="return false;" preload="auto" x-webkit-airplay="true" webkit-playsinline="true" id="video_id_1464329192793" width="100%" height="100%" style="z-index: 1; overflow: hidden; box-sizing: border-box;"> <source src="http://nettuts.s3.amazonaws.com/763_sammyJSIntro/trailer_test.mp4" type="video/mp4"> </video> </div> </li> </ul> </div> </div> <!-- 左右滚动部分 end --> </div> <div class="right-bottom"> <div class="video_play_main_div" id="wap_video_play_main_div"> <div class="the3ctv_video_control"> <a name="pause"> <img src="/truck-web/resource/static/images/play.png"/> </a> <span name="progress"> <b></b> <b></b> <b></b> </span> <em><i name="time">00:00</i> | <i>01:21</i></em> <u><img alt="" src="/truck-web/resource/static/images/allscreen.png"/></u> </div> </div> <div class="export-btn"> <button>导出证据</button> </div> </div> </div> </body>
/**视频播放条样式**/ .video_play_main_div{background-color:#f2f2f2; width:80%; float:left;} .video_play_main_div .header{height:45px;} .video_play_main_div .header a:nth-child(1){display: block;float: left;} .video_play_main_div .header a:nth-child(1) img{height: 20px;margin-top: 12.5px;margin-left: 12.5px;} .video_play_main_div .header a:nth-child(2){display: block;float: right;} .video_play_main_div .header a:nth-child(2) img{height: 35px;margin-top: 5px;margin-right: 7px;} .video_play_main_div .play_video{width:100%;position:absolute;top:50%;} .video_play_main_div .play_video .preview{display:none;top: 50%;position: relative;height: 20px;text-align: center;background-color: white;border-radius: 20px;width: auto;} .video_play_main_div .replay_name{color: white;position: absolute;bottom: 0px;margin-bottom: 20%;width: 100%;text-align: center;} .the3ctv_video_control{margin-left:50px; width:auto;top: 61%;z-index: 3;height: 32px;} .the3ctv_video_control a:nth-child(1){position: relative;float: left;} .the3ctv_video_control a:nth-child(1) img{width: 25px;margin-left: 10px;} .the3ctv_video_control em{float:left;margin-top:4px;} .the3ctv_video_control em i:nth-child(1){} .the3ctv_video_control em i:nth-child(2){color:#b4b4b4;} .the3ctv_video_control span{display: block;height: 4px;width: 52%;margin-left: 2%;background-color: #505050;border-radius: 4px;margin-top: 11px;float:left;} .the3ctv_video_control span b:nth-child(1){z-index:1;float:left;position:relative;width: 0%;background-color: #b4b4b4;display: block;height: 100%;border-radius: 4px;} .the3ctv_video_control span b:nth-child(2){z-index:2;position:relative;float: left;width: 8px;height: 8px;background-color: white;border-radius: 8px;margin-top: -2px;margin-left: -8px;} .the3ctv_video_control span b:nth-child(3){position: relative;background-color: white;display: block;height: 4px;border-radius: 4px;} .the3ctv_video_control u{float:left;} .the3ctv_video_control u img{display: block;width: 25px;margin-left: 5px;} .trump-control-bottom,.trump-control-bottom-flow{display:none;} video::-webkit-media-controls-enclosure { /*禁用播放器控制栏的样式*/ /*display: none !important;*/ } .export-btn{ width:20%; float:left; } .export-btn button{ background: #008aff; border-radius: 4px; border: 0; color: white; font-size:10px; height: 20px; width:80px; }