js控制video控件禁止快进但是可以后退完美解决

Dear 丶 2022-11-25 04:09 95阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
      <link rel="stylesheet" href="./font_m6b36j857h/demo.css">
      <link rel="stylesheet" href="./font_m6b36j857h/iconfont.css">
    
      <style>
        .container {
          position: relative;
          width: 640px;
          height: 360px;
          border: 1px solid red;
          margin: 100px auto;
        }
    
        .container video {
          width: 100%;
          height: 100%;
        }
        .container  .control {
          position: absolute;
          left: 20px;
          bottom: 10px;
          width: 600px;
          height: 30px;
    
          background: rgba(0, 0, 0, .5)
    
        }
        .control .switch {
          position: absolute;
          left: 10px;
          top: 5px;
    
        }
        .control .icon {
          cursor: pointer;
          color: #fff;
          font-size: 20px;
        }
        .control .process {
          position: absolute;
          left: 36px;
          top: 7px;
          width: 350px;
          height: 18px;
          border-radius: 9px;
          background-color: #555;
          overflow: hidden;
          cursor: pointer;
    
        }
        .control .process .bar {
          position: absolute;
          left: 0;
          top: 0;
          width: 0px;
          height: 100%;
          background-color: #fff;
        }
        .control .time {
          position: absolute;
          right: 60px;
          top: 6px;
          color: #fff;
        }
        .control .sound {
          position: absolute;
          right: 33px;
          top: 6px;
    
        }
        .control .full {
          position: absolute;
          right: 6px;
          top: 6px;
          cursor: pointer;
        }
      </style>
    </head>
    <body>
    <div class="container">
      <video src="https://act.mcake.com/fangli/2018/pc/zhou-nian/video/zhounian-7.mp4" poster="./images/poster.jpg"></video>
      <div class="control">
        <i class="icon icon-play switch" id="switch">123</i>
        <div class="process">
          <div class="bar"></div>
        </div>
        <div class="time">
          <span>00:00:00</span> /
          <span>00:00:00</span>
        </div>
        <i class="icon icon-sound sound">123</i>
        <i class="icon iconfont full" id="full">123</i>
      </div>
    </div>
    <script>
      var btn = document.querySelector('#switch');
      var video = document.querySelector('video');
      var spans = document.querySelectorAll('.control .time span');
      var process = document.querySelector('.process');
      var bar = document.getElementsByClassName('bar')[0];
      var full = document.querySelector('#full');
      // console.log(spans[0]);
      var total = 0;
      var processWidth = process.offsetWidth;
      // console.log(processWidth);
      var currenttime = undefined;
      var endbarwidth = undefined;
    
      var num = 1;
    
      //视频开始和暂停切换
      btn.onclick = function (){
        // console.log(video.paused);
        if(video.paused) {
          video.play();
          this.classList.remove('icon-play');
          this.classList.add('icon-pause');
        } else {
          video.pause();
          this.classList.remove('icon-pause');
          this.classList.add('icon-play');
        }
      }
    
      //获取视频时间
      //当视频可以播放的时候才可以获取不然获取不到
      video.oncanplay = function (){
        total = video.duration;
    
        // console.log(total); //以秒为单位
        spans[1].innerHTML = getTime(total);
        // console.log(spans[1]);
      }
      //当视频播放
      video.ontimeupdate = function(){
        currenttime = video.currentTime;
        spans[0].innerHTML = getTime(currenttime);
        barWidth    = processWidth * currenttime / total; // 当前时间
        endbarwidth = processWidth * currenttime / total; // 记录最长时间
        bar.style.width = barWidth + 'px';
      }
    
      //点击进度条下面的凹槽 也算是障眼法
      process.onclick = function (e) {
        num += 1;
        if ( num == 2) {
          localStorage.setItem('endbarwidth', endbarwidth);
        }
        console.log(e.offsetX);
        var losW = undefined;
        if (localStorage.getItem('endbarwidth')) {
          losW = parseFloat(localStorage.getItem('endbarwidth'))
        }
        console.log(losW);
        if (e.offsetX < losW) { //
          video.currentTime = total * e.offsetX / processWidth;
        } else if (e.offsetX > barWidth) {
          return;
        } else {
          video.currentTime = total * e.offsetX / processWidth;
        }
      }
    
      //视频结束时
      video.onended = function (){
        video.currentTime = 0;
        btn.classList.remove('icon-pause');
        btn.classList.add('icon-play');
      }
    
      //全屏开启
      full.onclick = function(){
        if(video.webkitRequestFullScreen){
          video.webkitRequestFullScreen();
        } else if (video.mozRequestFullScreen){
          video.mozRequestFullScreen();
        } else if (video.msRequestFullScreen) {
          video.msRequestFullScreen();
        } else if (video.oRequestFullScreen){
          video.oRequestFullScreen();
        } else {
          video.requestFullScreen();
        }
    
      }
    
    
      function getTime(time){
        var hours = Math.floor(time%86400/3600);
    
        var minutes = Math.floor(time%86400%3600/60);
    
        var seconds = Math.floor(time%60);
        // console.log(seconds);
    
        hours = hours > 10 ? hours : '0' + hours;
        minutes = minutes > 10 ? minutes : '0' + minutes;
        seconds = seconds > 10 ? seconds : '0' + seconds;
    
        var str = '';
        str = hours + ':' + minutes + ':' + seconds;
        // console.log(str);
        return str;
      }
    </script>
    </body>
    </html>