html video标签控制栏组件显示操作 是否显示进度条、是否显示全屏按钮、是否显示下载、是否显示视频总时间、setting按钮

video标签控制栏组件显示操作 

在css中设置相关属性隐藏

video默认setting按钮,更改是否显示播放秒数,更改是否显示进度条,更改是否显示视频总时间,更改是否显示播放暂停按钮,更改是否显示下载按钮,更改是否显示全屏按钮,更改是否显示声音,更改是否显示音量的控制条,整个控制栏都隐藏掉,重置audio和video的边框和圆角样式

<style>
  /*video默认setting按钮*/
  video::-internal-media-controls-overflow-button{ display: none !important;}
  
  /*更改是否显示播放秒数*/
  video::-webkit-media-controls-current-time-display{display: none; !important;}
  
  /*更改是否显示进度条*/
  video::-webkit-media-controls-timeline {display: none; !important;}
  
  /*更改是否显示视频总时间*/
  video::-webkit-media-controls-time-remaining-display {display: none; !important;}
  
  /*更改是否显示播放暂停按钮 */
  video::-webkit-media-controls-play-button {display: none; !important;}
  
  /*更改是否显示下载按钮 */
  video::-internal-media-controls-download-button { display:none; !important;}
  
  /*更改是否显示全屏按钮*/
  video::-webkit-media-controls-fullscreen-button { display: none; }
  
  /*更改是否显示声音*/
  video::-webkit-media-controls-mute-button { display: none;}
  video::-webkit-media-controls-toggle-closed-captions-button {display: none;}
  
  /*更改是否显示音量的控制条*/
  video::-webkit-media-controls-volume-slider {display: none;}
  
  /*整个控制栏都隐藏掉*/
  video::-webkit-media-controls-enclosure{ overflow: hidden; }
  
  /*重置audio和video的边框和圆角样式*/
  video::-webkit-media-controls-panel{ width: calc(100% + 30px); }
</style>