完美解決video標籤控件的隱藏與使用

        <video
          ref="video"
          playsinline="true"
          x-webkit-airplay="true"
          x5-playsinline="true"
          webkit-playsinline="true"
          x5-video-player-type="h5"
          width="100%"
          controls
          :poster="detail.pictureUrl"
          controlslist="nofullscreen nodownload noremoteplayback"
        >
          <source :src="videoSrc" type="video/mp4" />
        </video>

1.我自己的需求是隻保留進度條

需求：  未處理：    處理後： 

解決方案1：controls爲false   自定義功能控件     我想了下需要自己做播放暫停，拖動進度條展示視頻  （去看看有沒有直接隱藏控件的）

解決方案2：直接css隱藏部分控件，試了一下可行，完美解決

//隱藏viedo 三個點

 this.$refs.video["disablePictureInPicture"] = true;

 

  // 隱藏video 音量按鈕
  video::-webkit-media-controls-mute-button {
    display: none !important;
  }

  // 隱藏video 當前按鈕
  video::-webkit-media-controls-current-time-display {
    display: none !important;
  }

  // 隱藏video 總時間
  video::-webkit-media-controls-time-remaining-display {
    display: none !important;
  }

  // 隱藏video 全屏按鈕
  video::-webkit-media-controls-fullscreen-button {
    display: none !important;
  }