<video>标签，隐藏“播放”、“进度条”、“三个点”等

Hyyy2024-01-09 11:57

背景

在上课软件中，教师与学生在直播间共看一个视频时，只有教师有权控制视频的播放，学生只能控制自己这边视频的音量、全屏播放。

则需要在学生端去掉播放、控制条、下载、播放速度、等功能

html解决部分

隐藏"三个点"

隐藏"下载"、"播放速度"和"画中画"，即可把"三个点"隐藏

隐藏下载、播放速度

html 复制代码

<video
    controlslist="nodownload noplaybackrate"
></video>

隐藏画中画

html 复制代码

 <video
    disablePictureInPicture
></video>

js解决部分

禁用右键

js 复制代码

<video
    @contextmenu="contextmenu"
></video>

// script中
const contextmenu = (e) => {
  e.returnValue = false
}

css解决部分(播放、进度条等)

css 复制代码

// 播放
video::-webkit-media-controls-play-button {
    display: none;
}
// 进度条
video::-webkit-media-controls-timeline {
    display: none;
}
//全屏按钮
video::-webkit-media-controls-fullscreen-button {
    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;
}