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。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。