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