用于同步微信浏览器视频自定义进度条与底部control不同步隐藏的问题

First if all ,这个问题出于一个直播教育项目（移动端），由于需求，所以需要一进入页面就将视频横屏播放，但是横屏之后，Tcplayer的视频进度条，监听方式依旧是监听左右滑动，所以进度条在手机横屏状态下，依旧是需要左右滑动改变进度，上图

基于此，引入了移动框架的滑块功能（并且是竖向的），

<van-slider
        v-model="progress"
        vertical
        @change="timeChange"
        bar-height="5px"
        button-size="20"
      />
      <videoPlayer
        id="player"
        v-if="videoUrl"
        :teacher-btn-click="teacherBtnClick"
        :teacher-btn-txt="isShowTeacherTxt"
        :video-type="VideoType"
        :show-teacher-btn="showTeacherBtn"
        :video-url="videoUrl"
        :isShowTeacher="isShowTeacher"
        :set-seek-time="currentTime"
        :watermark="$auth.user().userExtend.userNo"
        :player-fun="playerFun"
        style="object-fit:fill"
        class="player"
        webkit-playsinline="true"
        playsinline="true"
        x5-playsinline="true"
        x-webkit-airplay="true"
        x5-video-player-type="h5"
        x5-video-player-fullscreen="true"
        x5-video-ignore-metadata="true"
        x5-video-orientation="landscape"
        height="100%"
        width="100%"
      >

data() {
    return {
    Intervaltimer:null,//计时器
      progress: 1,
  },

  //进度
    timeChange() {
      // this.progress=this.current
      //这里的currentTime是需要传入组件的值，激素当前秒数 
      //视频总时长*（滑块进度条的值/100）  滑块的值是百分制
      this.currentTime = this.duration * (this.progress / 100);
      
    },

在mounted生命周期里，监听control的显示隐藏样式，并且同步复制给滑块进度条

mounted() {
    setTimeout(() => {
    this.Intervaltimer=setInterval(() => {
      var airDom = document.getElementsByClassName("vcp-panel-bg")[0];
      var progressDom = document.getElementsByClassName("van-slider")[0];
      var showDom = document.getElementsByClassName("vcp-controls-panel")[0];
      progressDom.style.opacity=getComputedStyle(showDom).opacity//获取CSS属性值将获取到的css属性赋值给进度条 同步样式
      // console.log(showDom.className.indexOf('show') !== -1) //为-1不包含
    }, 200);
    },500)

destoryed里清掉Intervaltimer

destroyed(){
    clearInterval(this.Intervaltimer)
  }