vue 自定义video视频控制条 vue项目中自定义video视频控制条的实现代码

<div class="clickL video-box" @mouseover="play(item3.images_id)" @mouseout="pause(item3.images_id)">
   <img v-lazy="item3.picture" width="268" alt="" v-show="id != item3.images_id">
   <video class="video-hover" ref="videoAll" onMouseOver="this.play()" :src="item3.short_video" @timeupdate="commonVideoUpdata(index)" width="268px" height="176px" onMouseOut="this.pause()" muted loop="loop">
   </video>
  </div>
  <div class="process-slider common-progress" v-show="id == item3.images_id">
   <el-slider v-model="currentTimeProgress" :show-tooltip="false" input-size="small"></el-slider>
  </div>

.video-box {
  position: relative;
  height: 176px;

  &>img {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  }

  &>video {
  object-fit: fill; //拉伸填充盒子，保证和图片一样大
  }

 }

data() {
 return {
 id:0, //保存当前播放的视频id
 currentTimeVal:0 //进度条
 }
},
methods:{
 //开始播放
 play(val) {
 this.id = val
 },
 // 停止播放,显示图片清零进度条
 pause(val) {
 this.id = 0
 this.currentTimeVal = 0
 },
 // 公共video获取时间
 commonVideoUpdata(id) {
  let videoObj = this.$refs.videoAll
  console.log(videoObj);
  let currTime = videoObj[id].currentTime //当前时间
  let duration = videoObj[id].duration //总时间
  let pre = currTime / duration
  this.currentTimeProgress = pre * 100;
 },
}

<div class="detali_box_img video-media">
  <div class="video-example">
   <video :src="item.video_file" width="100%" height="100%" loop="loop" preload="auto" @timeupdate="videoTimeUpdate" @click="controlVideo" ref="videoCon">
   您的浏览器不支持 video 标签。
   </video>
  </div>
  //视频中的暂停按钮
  <div class="play-btn" @click="controlVideo" :style="[opcityVal]"></div>
  // 控制条的播放和暂停按钮
  <div class="control-play">
   <p class="control-play-btn" @click="controlVideo">
   <span class="el-icon-video-play" v-show="!vcIsPlay"></span>
   <span class="el-icon-video-pause" v-show="vcIsPlay"></span>
   </p>
   //播放进度条
   <div class="control-progress common-progress">
   <div>
   <el-slider v-model="vcProgress" :show-tooltip="false" :max="durationProgress" input-size="small" @change="getNewTime"></el-slider>
   </div>
   <!-- <p class="control-progress-item"></p> -->
   </div>
   //当前播放时间
   <div class="current-time">{{vcCurrentTime}}</div>
   //视频总时长
   <div class="duration">{{item.duration_time}}</div>
   //倍速控制
   <div class="video-speed-box" @click="getPlayBackRate">
   <el-dropdown placement="bottom" @command="handleCommand">
   <!-- <span class="el-dropdown-link"> -->
   <span class="video-speed-show">{{speedTime}}</span>
   <!-- </span> -->
   <el-dropdown-menu slot="dropdown">
   <el-dropdown-item command="1">0.5x</el-dropdown-item>
   <el-dropdown-item command="2">1x</el-dropdown-item>
   <el-dropdown-item command="3">1.5x</el-dropdown-item>
   <el-dropdown-item command="4">2x</el-dropdown-item>
   <el-dropdown-item command="5">3x</el-dropdown-item>

   </el-dropdown-menu>
   </el-dropdown>

   </div>
   //音量控制
   <div class="control-voice common-progress">
   <span class="voice-icon"></span>
   <div class="voice-slider">
   <el-slider v-model="voiceProgress" input-size="small" @change="getNewVoice"></el-slider>
   </div>
   </div>
   //全屏播放
   <p class="fullscreen" title="全屏" @click="getFullSceen">
   <span class="el-icon-full-screen"></span>
   </p>
  </div>
  </div>

vcIsPlay: false, //是否播放
 opcityVal: {
 opacity: '1'
 },
 currentTimeVal: 0, // 当前时间
 vcCurrentTime: '00:00:00', //当前时间格式化
 vcProgress: 0, //进度条的绑定时间
 durationProgress: 0, //当前视频的总时长
 speedTime: '1x', //倍速
 voiceProgress: 0 //声音

// 播放和暂停视频
 controlVideo() {
 let videoObj = this.$refs.videoCon
 this.durationProgress = videoObj[0].duration //总时间
 if (this.vcIsPlay) {
 videoObj[0].pause()
 } else {
 videoObj[0].play()
 }
 this.vcIsPlay = !this.vcIsPlay
 this.opcityVal.opacity = this.opcityVal.opacity == '1' ? '0' : '1'
 },

// 获取时间
 videoTimeUpdate() {
 let videoObj = this.$refs.videoCon
 let currTime = videoObj[0].currentTime //当前时间
 this.vcProgress = currTime //赋值给进度条
 this.vcCurrentTime = this.getFormatVideoTime(currTime)
 console.log(this.vcCurrentTime) //"00:00:27"
 },
 //格式化时间
 getFormatVideoTime(time) {
 let curtime = time
 let h = parseInt(curtime / 3600)
 let m = parseInt((curtime % 3600) / 60)
 let s = parseInt(curtime % 60)
 h = h < 10 ? '0' + h : h
 m = m < 10 ? '0' + m : m
 s = s < 10 ? '0' + s : s
 return h + ':' + m + ':' + s
 },

@change="getNewTime" //element 的滑动组件有个chang事件
 getNewTime(val) {
 let videoObj = this.$refs.videoCon
 console.log(val)
 videoObj[0].currentTime = val
 },

// 获取当前播放的速度
 handleCommand(val) {
 let videoObj = this.$refs.videoCon
 switch (val) {
 case '1':
  videoObj[0].playbackRate = 0.5
  this.speedTime = '0.5x'
  break
 case '2':
  videoObj[0].playbackRate = 1
  this.speedTime = '1x'
  break
 case '3':
  videoObj[0].playbackRate = 1.5
  this.speedTime = '1.5x'
  break
 case '4':
  videoObj[0].playbackRate = 2
  this.speedTime = '2x'
  break
 case '5':
  videoObj[0].playbackRate = 3
  this.speedTime = '3x'
  break

 default:
  videoObj[0].playbackRate = 1
  this.speedTime = '1x'
  break
 }
 },

// 设置声音

 getNewVoice(val) {
 let videoObj = this.$refs.videoCon
 let newVc = val / 100 //h5规定,volume的值必须再0-1之间,比如0.5就是50%的音量,但是进度条的值为100,因此这里做个除法
 videoObj[0].volume = newVc //赋值
 },

// 全屏播放
 getFullSceen() {
 let videoObj = this.$refs.videoCon
 videoObj[0].webkitRequestFullScreen()
 },