前言
最近接到一个需求,需要把视频的下载功能在页面上关闭下载功能和右键下载功能。 先贴上代码
<video oncontextmenu="return false;"
src="https://files.test.mp4"
controls="controls"
controlslist="nodownload">
</video>
其中oncontextmenu控制右键点击该元素是否展示右键菜单,controls和controlslist关闭控制台的下载功能。
注:oncontextmenu 是一个事件属性,用于在元素上定义鼠标右键点击时触发的事件。在触发事件时,会将一个事件对象作为参数传递给事件处理函数,该事件对象包含了关于右键点击的信息,如鼠标位置等。
video标签的操作
由上面可以延伸到对video标签的常用api的整理: 如有遗漏,欢迎大家评论区补充
-
src: 指定视频文件的URL地址。 -
controls: 控制视频播放器的控制条是否显示。 -
autoplay: 设置视频是否自动播放。 -
loop: 设置视频是否循环播放。 -
muted: 设置视频是否静音。 -
poster: 设置视频封面图片的URL地址。 -
currentTime: 获取或设置当前视频播放的时间。 -
duration: 获取视频的总时长。 -
play(): 开始播放视频。 -
pause(): 暂停视频播放。 -
preload: 指定视频文件的预加载行为,可以设置为"auto"、"metadata"、"none"。 -
paused: 返回一个布尔值,表示当前视频是否暂停播放。 -
volume: 设置视频的音量大小。 -
fullScreen: 视频全屏显示。 -
ended: 事件在视频播放结束时触发。 -
buffered: 返回一个TimeRanges对象,用来表示视频已经加载的缓冲范围。 -
played: 返回一个TimeRanges对象,用来表示视频已经播放的时间范围。 -
seekable: 返回一个TimeRanges对象,用来表示视频可以被快进的时间范围。 -
currentSrc: 获取当前视频播放的URL地址。