HTML DOM Video用法及代碼示例

HTML DOM中的Video對象表示<video>元素。可以使用getElementById()方法訪問視頻元素。

用法:

要訪問視頻對象：
```
 document.getElementById("videoId");
```
將id分配給<video>標簽的位置。
要創建視頻對象：
```
 document.createElement("VIDEO");
```

屬性值：

值	描述
audioTracks	它返回一個AudioTrackList對象，該對象表示可用的音軌。
autoplay	它用於設置或返回視頻是否應在準備就緒後立即開始播放。
buffered	它返回TimeRanges對象，該對象代表視頻的緩衝部分。
controller	它返回MediaController對象，該對象表示視頻的當前媒體控製器。
controls	它用於設置或返回是否應顯示視頻的播放和暫停控件。
crossOrigin	它設置或返回視頻的CORS設置。
currentSrc	它返回當前視頻的URL。
currentTime	它設置或返回視頻中的當前播放位置。
defaultMuted	它設置或返回是否默認情況下將視頻靜音。
defaultPlaybackRate	它設置或返回是否為視頻的默認播放速度。
duration	它返回視頻的長度。
ended	它用於返回視頻的播放是否結束。
error	它返回一個MediaError對象，該對象表示視頻的錯誤狀態。
height	它用於設置或返回視頻的height屬性的值。
loop	用於設置或返回每次播放完視頻是否應重新開始播放
媒體組	它用於設置或返回該視頻的媒體組的名稱。
muted	它用於設置或返回是否應關閉視頻聲音。
networkState	它返回視頻的當前網絡狀態。
paused	它返回視頻是否暫停。
playbackRate	它用於設置或返回視頻播放的速度。
played	它返回一個TimeRanges對象，該對象表示視頻的播放部分。
poster	它用於設置或返回視頻的海報屬性的值。
preload	它用於設置或返回視頻的preload屬性的值。
readyState	它用於返回視頻的當前就緒狀態。
seekable	它用於返回表示視頻可搜索部分的TimeRanges對象。
seeking	它返回用戶當前是否在視頻中尋找。
src	它用於設置或返回視頻的src屬性的值。
startDate	它用於設置或返回視頻的src屬性的值。
textTracks	它用於返回代表可用文本軌道的TextTrackList對象。
videoTracks	它用於返回表示可用視頻軌道的VideoTrackList對象。
volume	它用於設置或返回視頻的音頻音量。
width	它用於設置或返回視頻的width屬性的值。

視頻對象方法：

pause:用於暫停當前播放的視頻。
load:它用於重新加載視頻元素。
play:它用於開始播放視頻。
addTextTrack:它用於向視頻添加新的文本軌道。
canPlayType:用於檢查瀏覽器是否可以播放指定的視頻類型。

示例1：

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        DOM Input Video Object 
    </title> 
</head> 
  
<body> 
    <center> 
        <h1 style="color:green;">  
                GeeksForGeeks  
            </h1> 
  
        <h2>DOM Video Object</h2> 
  
        <video id="gfg"
               width="320"
               height="240" 
               controls> 
            <source src= 
"https://media.geeksforgeeks.org/wp-content/uploads/project.mp4" 
                    type="video/mp4"> 
        </video> 
  
        <br> 
  
        <button type="button" onclick="geeks()"> 
            Click 
        </button> 
        
        <p id="rk"></p> 
        <script> 
            function geeks() { 
                
              // get the duration of video  
              var r = 
              document.getElementById( 
                "gfg").duration; 
                
              document.getElementById( 
                "rk").innerHTML = r; 
            } 
        </script> 
    </center> 
</body> 
  
</html>

輸出：

之前單擊按鈕：
單擊按鈕後：

示例-2：

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        DOM Input Video Object 
    </title> 
</head> 
  
<body> 
    <center> 
        <h1 style="color:green;">  
                GeeksForGeeks  
            </h1> 
  
        <h2>DOM Video Object</h2> 
  
        <video id="gfg" 
               width="320" 
               height="240" 
               controls> 
            
            <source src= 
"https://media.geeksforgeeks.org/wp-content/uploads/project.mp4" 
                    type="video/mp4"> 
        </video> 
  
        <br> 
  
        <button type="button" onclick="geeks()"> 
            Click 
        </button> 
        
        <p id="rk"></p> 
        
        <script> 
            function geeks() { 
                
                // Return width 
                var r = 
                    document.getElementById( 
                      "gfg").width; 
                
                document.getElementById( 
                  "rk").innerHTML = r; 
            } 
        </script> 
    </center> 
</body> 
  
</html>

輸出：

之前單擊按鈕：
單擊按鈕後：

支持的瀏覽器：HTML | DOM視頻對象在下麵列出：

穀歌瀏覽器
Edge
火狐瀏覽器
Opera
Safari

相關用法

注：本文由純淨天空篩選整理自bestharadhakrishna大神的英文原創作品 HTML | DOM Video Object。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。