<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;
}
相关推荐
小小小小宇1 小时前
虚拟列表兼容老DOM操作
前端
悦悦子a啊1 小时前
Python之--基本知识
开发语言·前端·python
安全系统学习2 小时前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖3 小时前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖3 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水3 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐3 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06273 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
灿灿121384 小时前
CSS 文字浮雕效果:巧用 text-shadow 实现 3D 立体文字
前端·css
烛阴4 小时前
Babel 完全上手指南:从零开始解锁现代 JavaScript 开发的超能力!
前端·javascript