vue 中 自定义视频video

自定义视频进度条、音量、选集、全屏功能
利用HTML5 Audio/Video 事件给出的事件

<video :src= videoingurl ref="myvideo" @canplay="getTotal" @timeupdate="timeupdate"></video>

timeupdate：监控视频当前播放的时间控制进度条

timeupdate() {
   
  if(this.myvideo.currentTime == this.myvideo.duration){
   
    this.isPaused = !this.isPaused
    this.myvideo.pause()
  }
  this.currentTime = this.timeFormat(this.myvideo.currentTime)
  this.currentTimeVal = this.myvideo.currentTime
},

canplay：获取视频的总时长、进度条最大值

getTotal() {
   
   this.totalTime = this.timeFormat(this.myvideo.duration)
   this.durationProgress = this.myvideo.duration
 },

成品如下：

完整代码如下：

<div class="video-box" class="video-info-height">
 <video :src= videoingurl ref="myvideo" @canplay="getTotal" @timeupdate="timeupdate"></video>
  <div class="progress">
    <el-slider v-model="currentTimeVal" :max="durationProgress" :show-tooltip="false" @change="getNewTime"> </el-slider>
  </div>
  <div class="control">
    <i class="iconfonts" :class="isPaused ? 'iconzanting1' : 'iconicon_play'" @click="play()"></i>
    <span class="time">{
   {
   currentTime}} / {
   {
   totalTime}}</span>
    <i class="iconfonts iconyinliang-gao"></i>
    <el-slider v-model="volume" @change="getNewVoice"></el-slider>
    <span class="anthology">选集</span>
    <el-select v-model="videoingurl"  placeholder="请选择" @change="changevideo">
      <el-option
        v-for="item in videoinglist"
        :key="item.url"
        :label="item.channelDesc"
        :value=