vue 播放器原生播放器、进度条 未使用ui库

基于vue2、vue-cli3,可根据项目需求定制进度条，有需要自拿

html：

<div class="btns_wrap" @click="playAll">

        <!-- <div class="btn_play_wrap"   @click="playAll" > -->

          <div class="btn_play" v-if="isplay">

            <img src="./images/播放@2x.png" alt="">

          </div>

        <!-- </div> -->

        <!-- <div class="btn_pause"  @click="playAll" v-if="!isplay"> -->

        <!-- </div> -->

      </div>

      <div class="play_time">

        <span class="current_time" ref="currentime">00:00</span>

        <span class="time_line duration_time">/</span>

        <span class="duration_time">

          {{opusinfo.firstchapterduration}}

        </span>

      </div>

      <audio id="myAudio" ref="myAudio" preload="auto"></audio>

      <div class="player_progress">

        <div class="progress" @click="progress($event)" ref=progress>

          <div class="smallGrey" ref="smallGrey">

            <div class="smallWhite" style="transform: translateX(0)" ref="smallWhite" @touchstart = "touchStart"></div>

            <div class="smallPink" ref="smallPink"></div>

          </div>

        </div>

      </div>

script:

data () {

    return {

      isplay: true,

      muted: true,

    }

  },

  methods:{

    playAll(){

      // console.log(1)

      if (this.$refs.myAudio.paused) {

        this.start()

      } else {

        this.stop();

      }

    },

    start(){

      clearInterval(this.timer);

      this.isplay = false

      this.$refs.myAudio.play();

      this.timer = setInterval( ()=> {

        this.move();

      },1000);

    },

    stop(){

      this.isplay = true

      this.$refs.myAudio.pause();

      clearInterval(this.timer)

    },

    //进度条

    move() {

        this.scale = this.$refs.myAudio.currentTime/this.$refs.myAudio.duration

        this.$refs.smallWhite.style.transform = 'translateX('+this.scale*(this.$refs.smallGrey.offsetWidth-this.$refs.smallWhite.offsetWidth)+'px)'

        this.$refs.smallPink.style.width =  this.scale*(this.$refs.smallGrey.offsetWidth-this.$refs.smallWhite.offsetWidth)+'px';

        //更新当前时间

        this.$refs.currentime.innerHTML = this.changeTime(this.$refs.myAudio.currentTime) ;

        if(this.$refs.myAudio.currentTime === this.$refs.myAudio.duration){

            this.stop();

            this.curtain = false;

        }

    },

    //时间转换格式

    changeTime(time){

      time = parseInt(time);

      this.top_msg = time;

      let m=this.toZero(Math.floor(time%3600/60));

      let s=this.toZero(Math.floor(time%60));

      return m+":"+s;

    },

    toZero(mun){

        if(mun<10){

            mun = "0"+mun;

        }else{

            mun = ""+mun;

        }

        return mun;

    },

    //点击进度条

    progress(event){

      clearInterval(this.timer);

      let x = event.clientX - this.$refs.progress.getBoundingClientRect().left -10 ;

      this.$refs.smallWhite.style.transform = 'translateX('+x+'px)'

      this.$refs.smallPink.style.width =  x+'px';

      this.$refs.myAudio.currentTime = this.$refs.myAudio.duration*x/(this.$refs.smallGrey.offsetWidth-this.$refs.smallWhite.offsetWidth);

      //更新当前时间

      this.$refs.currentime.innerHTML = this.changeTime(this.$refs.myAudio.currentTime);

      this.timer = setInterval( ()=> {

          this.move();

      },1000);

    },

    //拖拽

    touchStart(event){

        this.whiteMove(event.changedTouches[0]);

        let smallWhite = this.$refs.smallWhite;

        smallWhite.addEventListener("touchmove", this.touchMove);

        smallWhite.addEventListener("touchEnd", this.touchEnd);

        smallWhite.addEventListener("touchStart", this.touchStart);

        this.start()

    },

    touchMove(event){

        this.whiteMove(event.changedTouches[0]);

    },

    touchEnd(event){

        let smallWhite = this.$refs.smallWhite;

        smallWhite.addEventListener("touchmove", this.touchMove);

        smallWhite.addEventListener("touchEnd", this.touchEnd);

        smallWhite.addEventListener("touchStart", this.touchStart);

        this.whiteMove(event.changedTouches[0]);

    },

    //拖动进度条

    whiteMove(event) {

        event.cancelBubble=true;

        let scale = event.clientX - this.$refs.progress.getBoundingClientRect().left - 10;

        // console.log(scale)

        if (scale < 0){

            scale = 0;

        }else if(scale > this.$refs.myAudio.duration){

            scale = this.$refs.myAudio.duration - 1;

        }

        this.$refs.smallWhite.style.transform = 'translateX('+scale+'px)'

        this.$refs.smallPink.style.width =  scale +'px';

        // this.$refs.smallPink.style.width = this.$refs.smallWhite.style.left = scale + 'px';

        //视频进度 = 当前时间/总时间 = 小粉宽（小白left）/(小灰宽-小白宽)

        this.$refs.myAudio.currentTime = this.$refs.myAudio.duration*scale/(this.$refs.smallGrey.offsetWidth-this.$refs.smallWhite.offsetWidth);

        //更新当前时间

        this.$refs.currentime.innerHTML = this.changeTime(this.$refs.myAudio.currentTime);

        this.start();

    },

}

style:

<style lang="less">

  .btns_wrap{

    height: 64vh;

  }

  .btn_play{

    width: 16vw;

    height: 8.3vh;

    transform: translate(38vw,28vh);

  }

  .btn_play img{

    width: 16vw;

    height: 8.3vh;

  }

  .btn_pause{

    height: 100%;

  }

  .play_time{

    height: 3vh;

    display: flex;

    align-items: center;

  }

  .current_time{

    height: 3vh;

    font-size: 4.3vw;

    font-family: PingFangSC-Regular, PingFang SC;

    font-weight: 400;

    color: #FFFFFF;

    line-height: 3vh;

  }

  .time_line{

    margin-left: 1.6vw;

  }

  .duration_time{

    height: 2.3vh;

    font-size: 3.2vw;

    font-family: PingFangSC-Regular, PingFang SC;

    font-weight: 400;

    color: rgba(255,255,255,0.8);

    line-height: 2.3vh;

  }

  .player_progress{

    width: 100%;

    margin-top: 1.8vh;

    height: 1.1vh;

    position: relative;

    // display: flex;

    // align-items: center;

  }

  .progress{

    width: 100%;

    height: 1.1vh;

    position: absolute;

    // display: flex;

    // align-items: center;

  }

  .progress div{

    margin-top: auto;

    margin-bottom: auto;

    position: absolute;

    top: 0;

    left: 0;

  }

  .smallGrey{

    width: 100%;

    border-radius: 2px;

    background: rgba(255,255,255,0.19);

    transform: translateY(14px);

    height: 0.2vh;

  }

  .smallWhite{

    width: 2.1vw;

    height: 1.1vh;

    // left: -2px;

    background: #FFFFFF;

    // float left

    position: absolute;

    border-radius: 50%;

    top: -0.4vh !important;

  }

  .smallPink{

    float: left;

    height: 0.3vh;

    border-top-left-radius: 3px;

    border-bottom-left-radius: 3px;

    background: rgba(255,255,255,0.79);

    // background: red;

  }

</style>