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.     </style>
  122. </head>
  124. <body>
  125.     <div class="video_player">
  126.     <!--video与audio是一样的，只比audio多一个视频，方法都一样  -->
  127.     <video src="体育视频.mp4" controls></video><!-- 加controls才能有播放栏 -->
  128.     <div class="menu">
  129.         <div class="play">播放</div>
  130.         <div class="time">0：00/0：00</div>
  131.         <div class="progress_bar">
  132.             <div></div>
  133.             <i></i>
  134.         </div>
  135.         <div class="quick">倍速</div>
  136.         <div class="quick_list">
  137.             <ul>
  138.                 <li>正常</li>
  139.                 <li>X1.25</li>
  140.                 <li>X1.5</li>
  141.                 <li>X2</li>
  142.             </ul>
  143.         </div>
  144.     </div>
  145.     </div>
  147.     <script>
  148.         var videoPlayer = document.getElementsByClassName("video_player")[0];
  149.         var video = videoPlayer.getElementsByTagName("video")[0];
  150.         var menu = document.getElementsByClassName('menu')[0];
  151.         var play = document.getElementsByClassName("play")[0];
  152.         var time = document.getElementsByClassName("time")[0];
  153.         var quick = document.getElementsByClassName("quick")[0];
  154.         var quickList = document.getElementsByClassName("quick_list")[0];
  155.         var progress_bar = document.getElementsByClassName("progress_bar")[0];
  156.         videoPlayer.onmouseenter = function() {
  157.             menu.style.display = "block";
  158.         }
  159.         videoPlayer.onmouseleave = function(){
  160.             menu.style.display = "none";
  161.         }
  162.         play.onclick = function(){
  163.            if(video.paused){
  164.             video.play();
  165.             play.innerHTML = "暂停";
  166.            }else{
  167.                video.pause();
  168.                play.innerHTML = "播放";
  169.            }
  170.         }
  171.         progress_bar.onmouseenter = function(){
  172.             progress_bar.style.height = "14px";
  173.             progress_bar.style.top = "-14px";
  174.             progress_bar.getElementsByTagName("div")[0].style.height = "14px";
  175.             progress_bar.getElementsByTagName("i")[0].style.height = "18px";
  177.         }
  178.         progress_bar.onmouseleave = function() {
  179.             progress_bar.style.height = "2px";
  180.             progress_bar.style.top = "-2px";
  181.             progress_bar.getElementsByTagName("div")[0].style.height = "2px";
  182.             progress_bar.getElementsByTagName("i")[0].style.height = "6px";
  184.         }
  185.         progress_bar.onclick = function(e){
  186.             var location = e.layerX;
  187.             var width = progress_bar.clientWidth;
  188.             var targetTime = location / width * video.duration;
  189.             video.currentTime = targetTime;
  190.         }
  191.         //调节倍速
  192.         quick.onclick=function(){
  193.             quickList.style.display = "block";
  194.         }
  195.         quickList.onmouseleave = function(){
  196.             quickList.style.display = "none";
  197.         }
  198.         var liList = quickList.getElementsByTagName("ul")[0].getElementsByTagName("li");
  199.         for(var i = 0;i < liList.length;i++){//用索引的思想，做调节速率
  200.             liList[i].index = i;
  201.             liList[i].onclick = function () {
  202.                 if(this.index == 0) {//正常
  203.                     video.playbackRate = 1;
  204.                     quick.innerHTML = "倍速"
  205.                 }else if(this.index == 1){//1.25
  206.                     video.playbackRate = 1.25;
  207.                     quick.innerHTML = "x1.25";
  208.                 }else if(this.index == 2){//1.5
  209.                     video.playbackRate = 1.5;
  210.                     quick.innerHTML = "x1.5";
  211.                 }else{//2
  212.                     video.playbackRate = 2;
  213.                     quick.innerHTML = "x2";
  214.                 }
  215.         }
  217.         setInterval(function(){
  218.             var total = video.duration;//一共的时间
  219.             var nowtime = video.currentTime;//当前的时间
  220.             time.innerHTML = parseInt(nowtime / 60) + ":" + parseInt(nowtime % 60) + "/" + parseInt(total / 60) + ":" + parseInt(total % 60) ;
  222.             var width = nowtime / total * progress_bar.clientWidth;//进度条慢慢变成橙色
  223.             progress_bar.getElementsByTagName("div")[0].style.width = width + "px";
  224.             progress_bar.getElementsByTagName("i")[0].style.left = width + "px";
  225.             //Content-Range:只有http协议中带有这个属性，视频时间才能跳转
  226.         },1000)
  227.     }
  228.     </script>
  229. </body>
  231. </html>