会有那样的一天,你活成了你最想要的样子,过去所有的伤痕都变成了勋章。
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节点的属性方法
媒体元素节点包含的事件