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 */  
}  

 

 

 

 

 

转载于:https://www.cnblogs.com/wwlhome/p/5855866.html