HTML5 新元素之VIDEO标签的js操作
本文参考w3school的HTML DOM Video 对象。
Video 对象属性
属性 | 描述 |
---|---|
audioTracks | 返回表示可用音频轨道的 AudioTrackList 对象。 |
autoplay | 设置或返回是否在就绪(加载完成)后随即播放视频。 |
buffered | 返回表示视频已缓冲部分的 TimeRanges 对象。 |
controller | 返回表示视频当前媒体控制器的 MediaController 对象。 |
controls | 设置或返回视频是否应该显示控件(比如播放/暂停等)。 |
crossOrigin | 设置或返回视频的 CORS 设置。 |
currentSrc | 返回当前视频的 URL。 |
currentTime | 设置或返回视频中的当前播放位置(以秒计)。 |
defaultMuted | 设置或返回视频默认是否静音。 |
defaultPlaybackRate | 设置或返回视频的默认播放速度。 |
duration | 返回视频的长度(以秒计)。 |
ended | 返回视频的播放是否已结束。 |
error | 返回表示视频错误状态的 MediaError 对象。 |
height | 设置或返回视频的 height 属性的值。 |
loop | 设置或返回视频是否应在结束时再次播放。 |
mediaGroup | 设置或返回视频所属媒介组合的名称。 |
muted | 设置或返回是否关闭声音。(true或false) |
networkState | 返回视频的当前网络状态。 |
paused | 设置或返回视频是否暂停。 |
playbackRate | 设置或返回视频播放的速度。 |
played | 返回表示视频已播放部分的 TimeRanges 对象。 |
poster | 设置或返回视频的 poster 属性的值。 |
preload | 设置或返回视频的 preload 属性的值。 |
readyState | 返回视频当前的就绪状态。 |
seekable | 返回表示视频可寻址部分的 TimeRanges 对象。 |
seeking | 返回用户当前是否正在视频中进行查找。 |
src | 设置或返回视频的 src 属性的值。 |
startDate | 返回表示当前时间偏移的 Date 对象。 |
textTracks | 返回表示可用文本轨道的 TextTrackList 对象。 |
videoTracks | 返回表示可用视频轨道的 VideoTrackList 对象。 |
volume | 设置或返回视频的音量。(0-1之间) |
width | 设置或返回视频的 width 属性的值。 |
Video 对象方法
方法 | 描述 |
---|---|
addTextTrack() | 向视频添加新的文本轨道。 |
canPlayType() | 检查浏览器是否能够播放指定的视频类型。 |
load() | 重新加载视频元素。 |
play() | 开始播放视频。 |
pause() | 暂停当前播放的视频。 |
Video 对象方法补充:
在video的方法中没有涉及到视频的全屏js方法;经过查询资料,发现这个需要调用一些基础的js API来实现全屏的切换,
启动全屏模式
全屏API requestFullscreen方法在一些老的浏览器里面依然使用带前缀形式的方法名,因此可能需要进行检测判断:
(带前缀,意思就是各个浏览器内核不通用.)
// 找到支持的方法, 使用需要全屏的 element 调用 function launchFullScreen(element) { if(element.requestFullscreen) { element.requestFullscreen(); } else if(element.mozRequestFullScreen) { element.mozRequestFullScreen(); } else if(element.webkitRequestFullscreen) { element.webkitRequestFullscreen(); } else if(element.msRequestFullscreen) { element.msRequestFullscreen(); } } // 在支持全屏的浏览器中启动全屏 // 整个页面 launchFullScreen(document.documentElement); // 某个元素 launchFullScreen(document.getElementById("videoElement"));
将需要全屏显示的DOM元素作为参数,调用此方法即可让window进入全屏状态,有时候可能需要用户同意(浏览器自己和用户交互),假若用户拒绝,则可能出现各种不完全的全屏.
如果用户同意进入全屏,那么工具栏以及其他浏览器组件会隐藏起来,使document框架的宽度和高度横跨整个屏幕.
退出全屏模式
使用 exitFullscreen 方法可以使浏览器退出全屏,返回原先的布局. 该方法在一些老的浏览器上也是支持前缀方法.
// 退出 fullscreen function exitFullscreen() { if(document.exitFullscreen) { document.exitFullscreen(); } else if(document.mozExitFullScreen) { document.mozExitFullScreen(); } else if(document.webkitExitFullscreen) { document.webkitExitFullscreen(); } } //请注意: exitFullscreen 只能通过 document 对象调用 —— 而不是使用普通的 DOM element. // 调用退出全屏方法! exitFullscreen();
Fullscreen 属性与事件
一个坏消息,到目前为止,全屏事件和方法依然是带前缀的,好消息就是很快主流浏览器就会都支持。
- document.fullscreenElement: 当前处于全屏状态的元素 element.
- document.fullscreenEnabled: 标记 fullscreen 当前是否可用.
当进入/退出 全屏模式时,会触发 fullscreenchange 事件:
var fullscreenElement = document.fullscreenEnabled || document.mozFullscreenElement || document.webkitFullscreenElement; var fullscreenEnabled = document.fullscreenEnabled || document.mozFullscreenEnabled || document.webkitFullscreenEnabled;
另外,当元素处于全屏的时候,浏览器相应的会有一些全屏样式,如需修改,可以重写一下全屏的样式;
/* html */ :-webkit-full-screen { /* properties */ } :-moz-fullscreen { /* properties */ } :fullscreen { /* properties */ } /* deeper elements */ :-webkit-full-screen video { width: 100%; height: 100%; } /* styling the backdrop */ ::backdrop { /* properties */ }