vue 视频隐藏controls功能按钮

 /*video默认全屏按钮*/
 video::-webkit-media-controls-fullscreen-button{ display: none !important; }

  /*video默认aduio音量按钮*/
 video::-webkit-media-controls-mute-button { display: none !important;}

 /*video默认setting按钮*/
 video::-internal-media-controls-overflow-button{ display: none !important;}

 /*隐藏controls中的音量控制*/
video::-webkit-media-controls-volume-slider, video::-webkit-media-controls-mute-button { //隐藏android端video标签自带的音量调节按钮
  display: none;
}

/*其实这倒不是什么大问题，但是为了样式统一，以及方便监控事件，可以在css中取消这个按钮*/
video::-webkit-media-controls-start-playback-button { //video视频不显示默认的中心的play icon
  opacity: 0;
}

/*禁用video的controls（要慎重！不要轻易隐藏掉，会导致点击视频不能播放）*/
video::-webkit-media-controls {
  display:none !important;
}

video::-webkit-media-controls-panel
video::-webkit-media-controls-play-button
video::-webkit-media-controls-volume-slider-container
video::-webkit-media-controls-volume-slider
video::-webkit-media-controls-mute-button
video::-webkit-media-controls-timeline
video::-webkit-media-controls-current-time-display
video::-webkit-full-page-media::-webkit-media-controls-panel
video::-webkit-media-controls-timeline-container
video::-webkit-media-controls-time-remaining-display
video::-webkit-media-controls-seek-back-button
video::-webkit-media-controls-seek-forward-button
video::-webkit-media-controls-fullscreen-button
video::-webkit-media-controls-rewind-button
video::-webkit-media-controls-return-to-realtime-button
video::-webkit-media-controls-toggle-closed-captions-button