video视频方法、属性和事件

One day

会有那样的一天,你活成了你最想要的样子,过去所有的伤痕都变成了勋章。

Element 与 Document都是节点的统称: HTML页面中的每一个标签(p/h1/a...)就是一个Element节点,与本文对应的就是video标签; Document就是大家所熟悉的document节点

方法:

-进入全屏: Element.requestFullscreen()
-退出全屏: Document.exitFullscreen()
-视频播放: Element.play()
-视频暂停: Element.pause()

属性:

-获取/设置音量: Element.volume 取值范围(0-1)
-获取/设置当前播放位置: Element.currentTime 返回值类型(浮点型, 也就是所谓的小数) 单位(s) 需要在loadedmetadata事件触发后才能获取到
-获取视频是否处于暂停状态**: Element.paused 返回值类型(Boolean)

事件监听:

-loadstart:开始加载资源
-loadedmetadata:元数据加载完成(获取到视频的时长等信息)
-loadeddata:视频第一帧加载完成
-play:视频开始播放, 每次播放时触发一次
-pause:视频暂停, 每次暂停时触发一次
-volumechange:视频音量改变, 每当音量(Element.volume)改变时触发
-timeupdate:视频播放位置改变, 每当播放位置(Element.currentTime)改变时触发
-fullscreenchange:视频进入/退出全屏

事件顺序:loadstart -> loadedmetadata -> loadeddata

在重写video的样式的时候记得要阻止浏览器的默认事件(很重要)

上面只是罗列出了video比较常用的一些方法属性等,如果以上没有你需要的方法属性,请点击下方链接自行查找
Video节点的继承关系: HTMLVideoElement -->(继承自) HTMLMediaElement --> HTMLElement --> Element, 每个节点都有其相对应的属性和方法
HTMLMediaElement节点的属性方法
HTMLVideoElement节点的属性方法
媒体元素节点包含的事件

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。