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

背景

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

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

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;
}
相关推荐
comelong1 分钟前
Docker容器启动postgres端口映射失败问题
前端
花海如潮淹3 分钟前
硬件产品研发管理工具实战指南
前端·python
用户3802258598243 分钟前
vue3源码解析:依赖收集
前端·vue.js
WaiterL4 分钟前
一文读懂 MCP 与 Agent
前端·人工智能·cursor
gzzeason6 分钟前
使用Vite创建React初始化项目
前端·javascript·react.js
又双叒叕7787 分钟前
React19 新增Hooks:useOptimistic
前端·javascript·react.js
归于尽26 分钟前
V8 引擎是如何给 JS"打扫房间"的 ?
前端·javascript
小old弟26 分钟前
让对象保持定义的顺序来排列
前端
漫天星梦27 分钟前
前端列表页大数据内存优化的思考
前端·面试
爱学习的茄子28 分钟前
从0到1:揭秘前端网络请求的进化之路
前端·javascript·面试