一个支持倍速播放的视频播放器

最新推荐文章于 2022-07-24 08:46:29 发布

zxb89757

最新推荐文章于 2022-07-24 08:46:29 发布

阅读量1.2k

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/zxb89757/article/details/109019038

版权

笔记专栏收录该内容

18 篇文章 0 订阅

订阅专栏

视频倍速

视频倍速主要是通过video的playbackRate属性来控制
直接上代码，后期找时间加上进度条控制等功能

获取视频真实宽高

video.addEventListener('canplay', function () {
    this.width = this.videoWidth;
    this.height = this.videoHeight;
});

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    div.video-wrapper{
      position: relative;
      width: 720px;
      height: 405px;
    }
    video{
      display: block;
      position: absolute;
      margin: auto;
      z-index: 888;
      width: 100%;
    }
    .btn-ctrl{
      position: absolute;
      bottom: 0;
      left: 0;
      height: 50px;
      width: 100%;
      background: rgba(255,255,255,0.3);
      z-index: 999;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 20px;
      color: #fff;
      box-sizing: border-box;
    }
    .speed-wrapper span{
      padding: 10px;
    }
  </style>
</head>
<body>
  <div class="video-wrapper">
    <video id="video" src="https://v.mifile.cn/b2c-mimall-media/53fc775dd6b29ecd8df3e2ea35129766.mp4" ></video>
    <div class="btn-ctrl">
      <p id="play">播放</p>
      <div class="speed-wrapper">
        <span>1.0</span>
        <span>1.5</span>
        <span>2</span>
        <span>2.5</span>
        <span>3</span>
      </div>
    </div>
  </div>
</body>
<script>
  (function(doc){
    let video = doc.getElementById('video')
    let playBtn = doc.getElementById('play')
    let isPlay = true
    let playSpeed = 1.0

    doc.getElementsByClassName('speed-wrapper')[0].onclick = (e)=>{
      console.log(playSpeed == e.target.innerHTML)
      if(playSpeed == e.target.innerHTML) {
        return
      }else{
        playSpeed = e.target.innerHTML
        video.playbackRate = playSpeed
      }
    }

    playBtn.onclick = (e) => {
      if(isPlay){
        video.play()
        playBtn.innerHTML = '暂停'
      } else {
        video.pause()
        playBtn.innerHTML = '播放'
      }
      isPlay = !isPlay
    }
  })(document)
  
</script>
</html>