当 video 标签添加上 controls 属性时,页面上会显示出所有的控制组件。若有些组件不需要只需要在css中设置相关属性把它隐藏掉即可。
<video controls></video>
//全屏按钮
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;
1.官方地址(使用官方的compile 'cn.jzvd:jiaozi
videoplayer:7.0.1'可能会编译不了)
https://github.com/lipangit/JiaoZi
VideoPlayer/blob/develop/README-ZH.md
2.添加依赖改为
implementation 'fm.jiecao:jiecao
videoplayer:5.5.4'
要设置video标签的工具栏,可以使用controls属性来显示所有的控制组件。如果想隐藏其中某些组件,可以在CSS中设置相关属性。例如,要隐藏全屏按钮,可以使用以下代码:
video::-webkit-media-controls-fullscreen-button { display: none; }
类似地,可以使用其他属性来隐藏播放按钮、进度条、观看的当前时间、剩余时间、音量按钮、关闭字幕按钮、音量的控制条以及所有控件。可以根据需要选择隐藏相关的控件。
另外,还有一个名为“用于HTML5视频和音频标签的音量控制”的Chrome扩展程序,可以在工具栏上放置一个简单的控制面板,以快速暂停或调整音量。这可能是另一种设置video标签工具栏的方式。<span class="em">1</span><span class="em">2</span><span class="em">3</span>