1、音量调节：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <style>
  8.         *{
  9.             margin: 0px;
  10.             padding: 0px;
  11.         }
  12.        .video_player{
  13.         position: relative;
  14.         width: 1000px;
  15.         height: 500px;
  16.         margin: 0px auto;
  17.        }
  18.        video{
  19.         position: absolute;
  20.         width: 1000px;
  21.         height: 500px;
  22.         left: 0px;
  23.         top: 0px;
  24.        }
  25.        .menu{
  26.            position: absolute;
  27.            width: 100%;
  28.            height: 50px;
  29.            background-color: rgba(0,0,0,0.5);
  30.            bottom: 0px;
  31.            display: none;
  32.        }
  33.        .play{
  34.            position: absolute;
  35.            width: 60px;
  36.            height: 30px;
  37.            border: 1px solid white;
  38.            text-align: center;
  39.            line-height: 30px;
  40.            color: white;
  41.            border-radius: 10px;
  42.            margin-left: 20px;
  43.            top: 50%;
  44.            margin-top: -15px;
  45.            cursor: pointer;
  46.        }
  47.        .time{
  48.            position: absolute;
  49.            width: 100px;
  50.            height: 30px;
  51.            text-align: center;
  52.            line-height: 30px;
  53.            color: white;
  54.            border-radius: 10px;
  55.            margin-left: 120px;
  56.            top: 50%;
  57.            margin-top: -15px;
  58.            cursor: pointer;
  59.        }
  60.        .progress_bar{
  61.            position: absolute;
  62.            width: 100%;
  63.            height: 2px;
  64.            background: grey;
  65.            left: 0px;
  66.            top: -2px;
  67.        }
  68.        .progress_bar div{
  69.            position: absolute;
  70.            width: 0px;
  71.            height: 2px;
  72.            background: orange;
  73.            left: 0px;
  74.            top: 0px;
  75.        }
  76.        .progress_bar i{
  77.            position: absolute;
  78.            width: 6px;
  79.            height: 6px;
  80.            border-radius: 3px;
  81.            background: white;
  82.            left: 120px;
  83.            top: -2px;
  84.        }
  85.        .quick{
  86.            position: absolute;
  87.            width: 60px;
  88.            height: 30px;
  89.            border: 1px solid white;
  90.            text-align: center;
  91.            line-height: 30px;
  92.            color: white;
  93.            border-radius: 10px;
  94.            left: 400px;
  95.            top: 50%;
  96.            margin-top: -15px;
  97.            cursor: pointer;
  98.        }
  99.        .quick_list{
  100.            position: absolute;
  101.            width: 100px;
  102.            height: 120px;
  103.            background-color: rgba(0,0,0,0.5);
  104.            left: 400px;
  105.            top: -120px;
  106.            color: white;
  107.            display: none;
  108.        }
  109.        .quick_list li{
  110.            position: relative;
  111.            width: 100%;
  112.            height: 30px;
  113.            text-align: center;
  114.            line-height: 30px;
  115.            list-style: none;
  116.            cursor: pointer;
  117.        }
  118.        .quick_list li:hover{
  119.            color: green;
  120.        }
  121.        .vol_add{
  122.            position: absolute;
  123.            width: 60px;
  124.            height: 30px;
  125.            border: 1px solid white;
  126.            text-align: center;
  127.            line-height: 30px;
  128.            color: white;
  129.            border-radius: 10px;
  130.            left: 500px;
  131.            top: 50%;
  132.            margin-top: -15px;
  133.            cursor: pointer;
  134.        }
  135.        .vol_ins{
  136.            position: absolute;
  137.            width: 60px;
  138.            height: 30px;
  139.            border: 1px solid white;
  140.            text-align: center;
  141.            line-height: 30px;
  142.            color: white;
  143.            border-radius: 10px;
  144.            left: 580px;
  145.            top: 50%;
  146.            margin-top: -15px;
  147.            cursor: pointer;
  148.        }
  149.     </style>
  150. </head>
  152. <body>
  153.     <div class="video_player">
  154.     <!--video与audio是一样的，只比audio多一个视频，方法都一样  -->
  155.     <video src="体育视频.mp4" controls></video><!-- 加controls才能有播放栏 -->
  156.     <div class="menu">
  157.         <div class="play">播放</div>
  158.         <div class="time">0：00/0：00</div>
  159.         <div class="progress_bar">
  160.             <div></div>
  161.             <i></i>
  162.         </div>
  163.         <div class="quick">倍速</div>
  164.         <div class="quick_list">
  165.             <ul>
  166.                 <li>正常</li>
  167.                 <li>X1.25</li>
  168.                 <li>X1.5</li>
  169.                 <li>X2</li>
  170.             </ul>
  171.         </div>
  172.         <div class="vol_add">音量加</div>
  173.         <div class="vol_ins">音量减</div>
  174.     </div>
  175.     </div>
  177.     <script>
  178.         var videoPlayer = document.getElementsByClassName("video_player")[0];
  179.         var video = videoPlayer.getElementsByTagName("video")[0];
  180.         var menu = document.getElementsByClassName('menu')[0];
  181.         var play = document.getElementsByClassName("play")[0];
  182.         var time = document.getElementsByClassName("time")[0];
  183.         var quick = document.getElementsByClassName("quick")[0];
  184.         var quickList = document.getElementsByClassName("quick_list")[0];
  185.         var progress_bar = document.getElementsByClassName("progress_bar")[0];
  186.         var vol_add = document.getElementsByClassName("vol_add")[0];
  187.         var vol_ins = document.getElementsByClassName("vol_ins")[0];
  189.         videoPlayer.onmouseenter = function() {
  190.             menu.style.display = "block";
  191.         }
  192.         videoPlayer.onmouseleave = function(){
  193.             menu.style.display = "none";
  194.         }
  195.         play.onclick = function(){
  196.            if(video.paused){
  197.             video.play();
  198.             play.innerHTML = "暂停";
  199.            }else{
  200.                video.pause();
  201.                play.innerHTML = "播放";
  202.            }
  203.         }
  204.         progress_bar.onmouseenter = function(){
  205.             progress_bar.style.height = "14px";
  206.             progress_bar.style.top = "-14px";
  207.             progress_bar.getElementsByTagName("div")[0].style.height = "14px";
  208.             progress_bar.getElementsByTagName("i")[0].style.height = "18px";
  210.         }
  211.         progress_bar.onmouseleave = function() {
  212.             progress_bar.style.height = "2px";
  213.             progress_bar.style.top = "-2px";
  214.             progress_bar.getElementsByTagName("div")[0].style.height = "2px";
  215.             progress_bar.getElementsByTagName("i")[0].style.height = "6px";
  217.         }
  218.         progress_bar.onclick = function(e){
  219.             var location = e.layerX;
  220.             var width = progress_bar.clientWidth;
  221.             var targetTime = location / width * video.duration;
  222.             video.currentTime = targetTime;
  223.         }
  225.         quick.onclick=function(){
  226.             quickList.style.display = "block";
  227.         }
  228.         quickList.onmouseleave = function(){
  229.             quickList.style.display = "none";
  230.         }
  231.         var liList = quickList.getElementsByTagName("ul")[0].getElementsByTagName("li");
  232.         for(var i = 0;i < liList.length;i++){
  233.             liList[i].index = i;
  234.             liList[i].onclick = function () {
  235.                 if(this.index == 0) {//正常
  236.                     video.playbackRate = 1;
  237.                     quick.innerHTML = "倍速"
  238.                 }else if(this.index == 1){//1.25
  239.                     video.playbackRate = 1.25;
  240.                     quick.innerHTML = "x1.25";
  241.                 }else if(this.index == 2){//1.5
  242.                     video.playbackRate = 1.5;
  243.                     quick.innerHTML = "x1.5";
  244.                 }else{//2
  245.                     video.playbackRate = 2;
  246.                     quick.innerHTML = "x2";
  247.                 }
  248.         }
  250.         //音量加音量减
  251.         vol_add.onclick = function(){
  252.             //三目运算符
  253.             video.volume = video.volume + 0.1 >= 1 ? 1: video.volume + 0.1;
  254.         }
  255.         vol_ins.onclick = function(){
  256.             //三目运算符
  257.             video.volume = video.volume - 0.1 <= 0 ? 0: video.volume - 0.1;
  258.         }
  260.         setInterval(function(){
  261.             var total = video.duration;//一共的时间
  262.             var nowtime = video.currentTime;//当前的时间
  263.             time.innerHTML = parseInt(nowtime / 60) + ":" + parseInt(nowtime % 60) + "/" + parseInt(total / 60) + ":" + parseInt(total % 60) ;
  265.             var width = nowtime / total * progress_bar.clientWidth;//进度条慢慢变成橙色
  266.             progress_bar.getElementsByTagName("div")[0].style.width = width + "px";
  267.             progress_bar.getElementsByTagName("i")[0].style.left = width + "px";
  268.             //Content-Range:只有http协议中带有这个属性，视频时间才能跳转
  269.         },1000)
  270.     }
  271.     </script>
  272. </body>
  274. </html>