HTML DOM Video 物件

HTML 中的 HTML DOM Video 物件表示 <video> 元素。

建立 <video> 元素

var videoObject = document.createElement(“VIDEO”)

這裡，“videoObject” 可以具有以下屬性：

屬性	描述
audioTracks	它返回一個 AudioTrackList 物件，表示可用的音訊軌道。
autoplay	它設定/返回影片是否應該在準備好後立即開始播放。
buffered	它返回一個 TimeRanges 物件，表示影片已緩衝的部分。
controller	它返回一個 MediaController 物件，表示影片當前的媒體控制器。
controls	它設定/返回影片是否應該顯示控制元件（播放/暫停等）。
crossOrigin	它設定/返回影片的 CORS 設定。
currentSrc	它返回當前影片的 URL。
currentTime	它設定/返回影片中的當前播放位置（以秒為單位）。
defaultMuted	它設定/返回影片是否應該預設靜音。
defaultPlaybackRate	它設定/返回影片的預設播放速度。
duration	它返回影片的長度（以秒為單位）。
ended	它返回影片的播放是否已結束。
error	它返回一個 MediaError 物件，表示影片的錯誤狀態。
height	它設定/返回影片高度屬性的值。
loop	它設定/返回影片是否應該每次播放完後重新開始播放。
mediaGroup	它設定/返回影片所屬的媒體組的名稱。
muted	它設定/返回影片的聲音是否應該關閉。
networkState	它返回影片的當前網路狀態。
paused	它返回影片是否已暫停。
playbackRate	它設定/返回影片播放的速度。
played	它返回一個 TimeRanges 物件，表示影片已播放的部分。
poster	它設定/返回影片海報屬性的值。
preload	它設定/返回影片預載入屬性的值。
readyState	它返回影片的當前就緒狀態。
seekable	它返回一個 TimeRanges 物件，表示影片可搜尋的部分。
seeking	它返回使用者是否正在影片中進行搜尋。
src	它設定/返回影片 src 屬性的值。
startDate	它返回一個 Date 物件，表示當前時間偏移量。
textTracks	它返回一個 TextTrackList 物件，表示可用的文字軌道。
videoTracks	它返回一個 VideoTrackList 物件，表示可用的影片軌道。
volume	它設定/返回影片的音訊音量。
width	它設定/返回影片寬度屬性的值。

讓我們來看一個屬性的示例，即 HTML DOM Video networkState 屬性：

示例

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Video networkState</title>
<style>
   * {
      padding: 2px;
      margin:5px;
   }
   form {
      width:70%;
      margin: 0 auto;
      text-align: center;
   }
   input[type="button"] {
      border-radius: 10px;
   }
</style>
</head>
<body>
   <form>
      <fieldset>
         <legend>HTML-DOM-Video-networkState</legend>
         <video id="demo" width="320" controls><source    src="https://tutorialspoint.tw/html5/foo.mp4" type="video/mp4"></video><br>
         <input type="button" onclick="setTrackDetails()" value="Set Source">
         <input type="button" onclick="getTrackDetails()" value="Get Network State">
         <div id="divDisplay"></div>
      </fieldset>
   </form>
<script>
   var divDisplay = document.getElementById("divDisplay");
   var demo = document.getElementById("demo");
   var srcOfMedia = 'https://tutorialspoint.tw/html5/foo.mp4';
   function getTrackDetails() {
      divDisplay.textContent = 'Network State: '+demo.networkState;
   }
   function setTrackDetails() {
      demo.src = srcOfMedia;
      demo.load();
   }
</script>
</body>
</html>

輸出

單擊未定義源時的 “獲取網路狀態” 按鈕 &inus;

單擊已定義源但瀏覽器正在下載資料的 “獲取網路狀態” 按鈕：

此外，“videoObject” 還可以具有以下方法：

方法	描述
addTextTrack()	它向影片新增一個新的文字軌道。
canPlayType()	它檢查瀏覽器是否可以播放指定的影片型別。
load()	它重新渲染影片元素。
play()	它用於啟動影片播放。
pause()	它用於暫停正在播放的影片。

讓我們來看一個 Video canPlayType() 屬性的示例：

示例

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Video canPlayType()</title>
<style>
   * {
      padding: 2px;
      margin:5px;
   }
   form {
      width:70%;
      margin: 0 auto;
      text-align: center;
   }
   input[type="button"] {
      border-radius: 10px;
   }
</style>
</head>
<body>
   <form>
      <fieldset>
         <legend>HTML-DOM-Video-canPlayType( )</legend>
         <video id="demo" width="320" controls><source src="" type="video/mp4"></video><br>
         <input type="button" onclick="getTrackDetails()" value="Does Browser Supports video/mp4?">
         <div id="divDisplay"></div>
      </fieldset>
   </form>
<script>
   var divDisplay = document.getElementById("divDisplay");
   var demo = document.getElementById("demo");
   var srcOfMedia = 'https://tutorialspoint.tw/html5/foo.mp4';
   function getTrackDetails() {
      var ans = demo.canPlayType('video/mp4');
      if(ans !== ''){
         divDisplay.textContent = 'Browser supports mp4';
         demo.src = srcOfMedia;
         demo.load();
      }
      else
         divDisplay.textContent = 'Browser does not supports mp4';
   }
</script>
</body>
</html>