某个HTML5视频中，老师布置的作业……
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> figcaption{ text-align: center; font-size: 2em; font-family: cursive; font-weight: bolder; } .player{ width: 710px; height: 420px; margin:0 auto; padding: 20px; background: black; border-radius: 5px; position: relative; } video{ height: 400px; } .switch.fa-play{ /* 几级写的三角形 padding: 0px; display: inline-block; border-left:15px solid #ffffff; border-right: 10px solid transparent; border-top: 10px solid transparent; border-bottom: 10px solid transparent; margin-top: 8px; margin-left: -15px; */ height: 20px; width: 20px; margin-left: -15px; margin-top: 5px; display: inline-block; } img{ width: 18px; height: 18px; } .expand.fa-expand{ float: right; margin-top: 6px; margin-right: -18px; } .expand.fa-expand img{ width: 14px; height: 14px; } .progress{ width: 80%; margin-top: -18px; margin-left: 10px; } .progress div{ border-radius: 5px; } .progressBG{ background: gray; height: 10px; width: 100%; } .loaded{ background: lightgray; height: 10px; width: 0px; margin-top: -10px; } .line{ height: 10px; background: #ff9999; width: 0%; z-index: 20; margin-top: -10px; } .bar{ background: transparent; height: 10px; width: 100%; z-index: 20; margin-top: -10px; } .timer{ float: right; margin-top: -12px; color: white; font-size: 12px; margin-right: 24px; } .voice{ float: right; margin-right: -122px; margin-top: -12px; } </style> <script> /** figure 标签规定独立的流内容（图像、图表、图片、代码等等） figure 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。 请使用figcaption元素为figure添加标题 **/ </script> </head> <body> <figure> <figcaption>视频播放器</figcaption> <div class="player"> <video src="1.mp4"></video> <!-- <video src="//vdse.bdstatic.com//a0f03cd8fdac820e38415ebbc1b22e80.mp4?authorization=bce-auth-v1/40f207e648424f47b2e3dfbb1014b1a5/2017-05-11T09:02:31Z/-1//648b2365f868d010992d4f5b82f24561599b47d194bb987113a06b559dc616e1"></video> <div class="controls"> --> <!-- 播放/暂停 --> <a href="javascript:;" class="switch fa fa-play"> <img src="images/播放.svg"> </a> <!-- 全屏 --> <a href="javascript:;" class="expand fa fa-expand"> <img src="images/全屏.svg"> </a> <!-- 进度条 --> <div class="progress"> <div class="progressBG"></div> <div class="loaded"></div> <div class="line"></div> <div class="bar"></div> </div> <!-- 时间 --> <div class="timer"> <span class="current">00:00:00</span> <span class="total">00:00:00</span> </div> <!-- 声音 --> <a href="javascript:;" class="voice"> <img src="images/声音.svg"> </a> </div> </div> </figure> <!-- 引入jquery文件 --> <script type="text/javascript" src="jquery-2.2.3.min.js"></script> <script> $(function(){ var video=$('video')[0], line=$('.line');//获取视频播放时的进度条 //播放和暂停视频 $('a.switch').on('click',function(){ if(video.paused){ video.play(); $(this).find('img').attr('src','images/暂停.svg'); }else{ video.pause(); $(this).find('img').attr('src','images/播放.svg'); } }); //视频可以播放的时候的事件 video.oncanplay=function(){ video.style.display="block"; //video.duration 返回视频的长度已秒计 h=Math.floor(video.duration/3600); m=Math.floor(video.duration/60); s=Math.floor(video.duration%60); h=h<10?"0"+h:h; m=m<10?"0"+m:m; s=s<10?"0"+s:s; //显示总时长 $(".total").text(h+":"+m+":"+s); } //更新播放进度条的效果实现 video.ontimeupdate=function(){ //video.ontimeupdate当播放位置改变时（比如当用户快进到媒介中一个不同的位置时）运行的脚本 //两件事 //进度条走起来 //时间不停的更新 var value=0;//进度条默认的宽度 if(video.currentTime>0){ //计算进度条的长度 value=video.currentTime/video.duration*100; } line.css('width',value+"%"); //显示当前的进度时间 h=Math.floor(video.currentTime/3600); m=Math.floor(video.currentTime/60); s=Math.floor(video.currentTime%60); h=h<10?"0"+h:h; m=m<10?"0"+m:m; s=s<10?"0"+s:s; $('.current').text(h+":"+m+":"+s); //缓存 var timeRange=video.buffered; console.log(timeRange); console.log('start'+timeRange.start(0)); console.log('end'+timeRange.end(0)); value2=timeRange.end(0)/155.518*100; $('.loaded').css('width',(value2>100?100:value2)+"%"); } //跳跃 $('.bar').on('click',function(e){ //获取的是鼠标点击的位置的横坐标 video.currentTime=(e.offsetX/$(".bar").width())*video.duration; // $('.switch').find('img').attr('src','images/播放.svg'); }) //视频播放结束事件 video.onended=function(){ //播放按钮的类样式还原 $('.switch').find('img').attr('src','images/暂停.svg'); line.css("width",0); video.currentTime=0; } //全屏 $('.expand').on("click",function(){ video.webkitRequestFullScreen(); }) //声音 $('.voice').on('click',function(){ if(video.muted){ video.muted=false;//不静音 $(this).find('img').attr('src','images/声音.svg'); }else{ video.muted=true;//静音 $(this).find('img').attr('src','images/静音.svg'); } }) }) </script> </body> </html>
图片来自阿里图标库
效果如下：
实现，全屏，暂停，播放，静音，跳跃播放功能