web端video常用控制配置

最新推荐文章于 2025-03-18 13:29:03 发布

super码王

最新推荐文章于 2025-03-18 13:29:03 发布

阅读量2.5k

点赞数 1

分类专栏： HTML/CSS 文章标签：前端

本文链接：https://blog.youkuaiyun.com/qq_41885673/article/details/127344487

版权

HTML/CSS 专栏收录该内容

13 篇文章

订阅专栏

本文介绍如何使用JavaScript阻止HTML视频标签的默认点击行为，并通过CSS隐藏视频播放器的所有控件，包括播放、暂停按钮、进度条等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、阻止视频video标签点击视频区域播放暂停

<video controls id="video1" autoplay muted playsinline></video>

myVid = document.getElementById("video1");
 
myVid.addEventListener("click", mouseHandler, false);
 
function mouseHandler(event) {
      // 阻止视频默认点击事件
      event.preventDefault()
}

二、隐藏video的各种控件

<video controls class="video"/>

/* 隐藏video 全屏按钮 */
.video::-webkit-media-controls-fullscreen-button {
		display: none;
}
/* 隐藏video 播放按钮 */
.video::-webkit-media-controls-play-button {
		display: none;
}
/* 隐藏video 进度条 */
.video::-webkit-media-controls-timeline {
		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-mute-button {
		display: none;            
}
.video::-webkit-media-controls-toggle-closed-captions-button {
		display: none;            
}
/* 隐藏video 音量的控制条 */
.video::-webkit-media-controls-volume-slider {
		display: none;            
}
/* 隐藏video 所有控件 */
.video::-webkit-media-controls-enclosure{ 
		display: none;
}