完美解决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;
  }