一线大厂高级前端编写,前端初中阶面试题,帮助初学者应聘,需要联系微信:javadudu

背景

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

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

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

html解决部分

隐藏“三个点”

隐藏“下载”、“播放速度”和“画中画”,即可把“三个点”隐藏

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

隐藏下载、播放速度

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

隐藏画中画

 <video
    disablePictureInPicture
></video>

js解决部分

禁用右键

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

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

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;
}

原文链接:https://juejin.cn/post/7321643424951599119 作者:Hyyy

(0)
上一篇 2024年1月9日 下午4:42
下一篇 2024年1月9日 下午4:52

相关推荐

发表评论

登录后才能评论