当前位置：首页 > news >正文

CSS 控制 video 标签的控制栏组件的显隐

news 来源：原创 2024/5/20 15:31:09

隐藏下载功能

<video src="" controlsList="nodownload" />controlslist 取值如下(设定多个值则使用空格进行间隔)
如：controlslist="nodownload nofullscreen noremoteplayback"nodownload：取消更多控件弹窗的下载功能nofullscreen：取消全屏功能noremoteplayback：取消远程播放视频

隐藏画中画功能

<video src="" disablePictureInPicture />

控制组件的显隐

当 video 标签添加上 controls 属性时，页面上会显示出所有的控制组件。若有些组件不需要展示，只需在 css 中设置相关属性把它隐藏掉即可

<video src="" controls />

全屏按钮

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

播放按钮

/* 播放按钮 */
video::-webkit-media-controls-play-button {display: none;
}

进度条

/* 进度条 */
video::-webkit-media-controls-timeline {display: none;
}

观看的当前时间

/* 观看的当前时间 */
video::-webkit-media-controls-current-time-display {display: none;
}

剩余时间

/* 剩余时间 */
video::-webkit-media-controls-time-remaining-display {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 {display: none;
}

合并后的全部代码

/* 全屏按钮 */
video::-webkit-media-controls-fullscreen-button {display: none;
}
/* 播放按钮 */
video::-webkit-media-controls-play-button {display: none;
}
/* 进度条 */
video::-webkit-media-controls-timeline {display: none;
}
/* 观看的当前时间 */
video::-webkit-media-controls-current-time-display {display: none;
}
/* 剩余时间 */
video::-webkit-media-controls-time-remaining-display {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 {display: none;
}