如何隐藏HTML视频进度条？使用webkit方法无效求助

你当前使用的::-webkit-progress-value和::-webkit-progress-bar是针对<progress>元素的伪元素，和HTML5视频控件的进度条不匹配，所以无法生效。

要隐藏视频的进度条（实现类似YouTube广告的效果），需要使用webkit内核浏览器针对视频控件的专属伪元素：

/* 隐藏视频进度条 */
#videoP::-webkit-media-controls-timeline {
    display: none !important;
}

/* 可选：隐藏进度条的背景容器，确保彻底无痕迹 */
#videoP::-webkit-media-controls-progress-bar {
    display: none !important;
}

补充说明： #

• 上述代码仅在webkit内核浏览器（Chrome、Safari、Edge）中生效；如果需要兼容Firefox，可使用::-moz-media-controls-timeline伪元素，但Firefox对视频控件的样式限制较多，部分场景可能需要自定义控制栏。
• 如果要彻底禁止用户拖动进度条（类似YouTube广告无法跳转的效果），仅靠CSS不够，还需配合JavaScript限制视频的currentTime修改，示例代码如下：

const video = document.getElementById('videoP');
let lastValidTime = 0;

video.addEventListener('loadedmetadata', () => {
    lastValidTime = video.currentTime;
});

video.addEventListener('seeked', () => {
    if (video.currentTime > lastValidTime + 0.1) { // 过滤正常播放的微小时间差
        video.currentTime = lastValidTime;
    }
    lastValidTime = video.currentTime;
});

内容的提问来源于stack exchange，提问作者Nwp _