HTML<video>标签的进度条属性

what's the -webkit-media-controls

　　修改<video>标签的进度条属性可以通过调整 -webkit-media-controls 对应的值来实现，需要注意的是：-webkit-media-controls 是 WebKit 浏览器（如Chrome和Safari）特有的伪元素，用于自定义视频播放器的控制条。不过，直接通过 CSS 修改 -webkit-media-controls 的某些属性（如直接设置 display 属性）可能不会直接生效，因为这些控件是由浏览器内部处理的，而不是普通的 DOM 元素。

    /* 消除video底部整体播放条 */
    video::-webkit-media-controls {
        display: none;
    }
    /* 消除video底部播放按钮 */
    video::-webkit-media-controls-play-button{
        display: none;
    }
    /* 消除video底部观看的当前时间 */
    video::-webkit-media-controls-current-time-display{
        display: none;
    }
     /* 消除video底部视频剩余时间 */
    video::-webkit-media-controls-time-remaining-display{
        display: none;
    }
    /* 消除video底部全屏按钮 */
    video::-webkit-media-controls-fullscreen-button {
        display: none !important;
    }
    /* 消除video底部声音按钮 */
    video::-webkit-media-controls-mute-button {
        display: none !important;
    }
    /* 消除video声音滑动 */
    video::-webkit-media-controls-volume-slider {
        display: none !important;
    }
    /* 消除video进度条 */
    video::-webkit-media-controls-timeline{
        display: none !important;
    }
    /* 消除video底部 */
    video::-webkit-media-controls-toggle-closed-captions-button {
        display: none !important;
    }