video标签常用的api你都知道哪些?

212 阅读2分钟

前言

最近接到一个需求,需要把视频的下载功能在页面上关闭下载功能和右键下载功能。 先贴上代码

<video oncontextmenu="return false;" 
       src="https://files.test.mp4" 
       controls="controls" 
       controlslist="nodownload">
</video>

其中oncontextmenu控制右键点击该元素是否展示右键菜单,controlscontrolslist关闭控制台的下载功能。 注: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地址。