1、进度条处有点难

  1. <style>
  2.     *{
  3.         margin: 0px;
  4.         padding: 0px;
  5.     }
  6.    .video_player{
  7.     position: relative;
  8.     width: 1000px;
  9.     height: 500px;
  10.     margin: 0px auto;
  11.    }
  12.    video{
  13.     position: absolute;
  14.     width: 1000px;
  15.     height: 500px;
  16.     left: 0px;
  17.     top: 0px;
  18.    }
  19.    .menu{
  20.        position: absolute;
  21.        width: 100%;
  22.        height: 50px;
  23.        background-color: rgba(0,0,0,0.5);
  24.        bottom: 0px;
  25.        display: none;
  26.    }
  27.    .play{
  28.        position: absolute;
  29.        width: 60px;
  30.        height: 30px;
  31.        border: 1px solid white;
  32.        text-align: center;
  33.        line-height: 30px;
  34.        color: white;
  35.        border-radius: 10px;
  36.        margin-left: 20px;
  37.        top: 50%;
  38.        margin-top: -15px;
  39.        cursor: pointer;
  40.    }
  41.    .time{
  42.        position: absolute;
  43.        width: 100px;
  44.        height: 30px;
  45.        text-align: center;
  46.        line-height: 30px;
  47.        color: white;
  48.        border-radius: 10px;
  49.        margin-left: 120px;
  50.        top: 50%;
  51.        margin-top: -15px;
  52.        cursor: pointer;
  53.    }
  54.    .progress_bar{
  55.        position: absolute;
  56.        width: 100%;
  57.        height: 2px;
  58.        background: grey;
  59.        left: 0px;
  60.        top: -2px;
  61.    }
  62.    .progress_bar div{
  63.        position: absolute;
  64.        width: 0px;
  65.        height: 2px;
  66.        background: orange;
  67.        left: 0px;
  68.        top: 0px;
  69.    }
  70.    .progress_bar i{
  71.        position: absolute;
  72.        width: 6px;
  73.        height: 6px;
  74.        border-radius: 3px;
  75.        background: white;
  76.        left: 120px;
  77.        top: -2px;
  78.    }
  79. </style>
  80. </head>
  82. <body>
  83. <div class="video_player">
  84. <!--video与audio是一样的，只比audio多一个视频，方法都一样  -->
  85. <video src="体育视频.mp4" controls></video><!-- 加controls才能有播放栏 -->
  86. <div class="menu">
  87.     <div class="play">播放</div>
  88.     <div class="time">0：00/0：00</div>
  89.     <div class="progress_bar">
  90.         <div></div>
  91.         <i></i>
  92.     </div>
  93. </div>
  94. </div>
  96. <script>
  97.     var videoPlayer = document.getElementsByClassName("video_player")[0];
  98.     var video = videoPlayer.getElementsByTagName("video")[0];
  99.     var menu = document.getElementsByClassName('menu')[0];
  100.     var play = document.getElementsByClassName("play")[0];
  101.     var time = document.getElementsByClassName("time")[0];
  102.     var progress_bar = document.getElementsByClassName("progress_bar")[0];
  103.     videoPlayer.onmouseenter = function() {
  104.         menu.style.display = "block";
  105.     }
  106.     videoPlayer.onmouseleave = function(){
  107.         menu.style.display = "none";
  108.     }
  109.     play.onclick = function(){
  110.        if(video.paused){
  111.         video.play();
  112.         play.innerHTML = "暂停";
  113.        }else{
  114.            video.pause();
  115.            play.innerHTML = "播放";
  116.        }
  117.     }
  118.     progress_bar.onmouseenter = function(){
  119.         progress_bar.style.height = "14px";
  120.         progress_bar.style.top = "-14px";
  121.         progress_bar.getElementsByTagName("div")[0].style.height = "14px";
  122.         progress_bar.getElementsByTagName("i")[0].style.height = "18px";
  124.     }
  125.     progress_bar.onmouseleave = function() {
  126.         progress_bar.style.height = "2px";
  127.         progress_bar.style.top = "-2px";
  128.         progress_bar.getElementsByTagName("div")[0].style.height = "2px";
  129.         progress_bar.getElementsByTagName("i")[0].style.height = "6px";
  131.     }
  132.     progress_bar.onclick = function(e){
  133.         var location = e.layerX;
  134.         var width = progress_bar.clientWidth;
  135.         var targetTime = location / width * video.duration;
  136.         video.currentTime = targetTime;
  137.     }
  139.     setInterval(function(){
  140.         var total = video.duration;//一共的时间
  141.         var nowtime = video.currentTime;//当前的时间
  142.         time.innerHTML = parseInt(nowtime / 60) + ":" + parseInt(nowtime % 60) + "/" + parseInt(total / 60) + ":" + parseInt(total % 60) ;
  144.         var width = nowtime / total * progress_bar.clientWidth;//进度条慢慢变成橙色
  145.         progress_bar.getElementsByTagName("div")[0].style.width = width + "px";
  146.         progress_bar.getElementsByTagName("i")[0].style.left = width + "px";
  147.         //Content-Range:只有http协议中带有这个属性，视频时间才能跳转
  148.     },1000)
  150. </script>
  151. </body>