HTML | DOM 视频对象

HTML DOM 中的Video 对象代表一个 元素。可以使用 getElementById()方法访问视频元素。

句法：

要访问视频对象：

document.getElementById("videoId");

其中 id 分配给

创建视频对象：

document.createElement("VIDEO");

属性值：

Value	Description
audioTracks	It returns an AudioTrackList object represents the available audio tracks.
autoplay	It is used to set or return if the video should start playing as soon as it is ready.
buffered	It returns the TimeRanges object that represents the buffered parts of a video.
controller	It returns the MediaController object that represents the current media controller of a video.
controls	It is used to set or returns whether a video should have play and pause controls are to be displayed.
crossOrigin	It sets or returns the CORS settings of a video.
currentSrc	It returns the URL of the current video.
currentTime	It set or return the current playback position in a video.
defaultMuted	It set or return whether the video should be muted by default.
defaultPlaybackRate	It set or return whether the default playback speed of the video.
duration	It returns the length of a video.
ended	It is used to return whether the playback of the video has ended.
error	It returns a MediaError object represents the error state of the video.
height	It is used to set or return the value of the height attribute of a video.
loop	It is used to set or return whether the video should start playing over again, every time it is finished
mediagroup/td>	It is used to set or return the name of the media group of that video.
muted	It is used to set or return whether the sound of the video should be turned off.
networkState	It returns the current network state of a video.
paused	It returns whether a video is paused or not.
playbackRate	It is used to set or return the speed of the video playback.
played	It returns a TimeRanges object represents the played parts of the video.
poster	It is used to set or return the value of the poster attribute of a video.
preload	It is used to set or return the value of the preload attribute of a video.
readyState	It is used to return the current ready state of a video.
seekable	It is used to return the TimeRanges object representing the seekable parts of a video.
seeking	It returns whether the user is currently seeking in the video.
src	It is used to set or return the value of the src attribute of a video.
startDate	It is used to set or return the value of the src attribute of a video.
textTracks	It is used to return the TextTrackList object representing the available text tracks.
videoTracks	It is used to return the VideoTrackList object representing the available video tracks.
volume	It is used to set or return the audio volume of a video.
width	It is used to set or return the value of the width attribute of a video.

视频对象方法：

• pause：用于暂停当前播放的视频。
• load：用于重新加载视频元素。
• play：用于开始播放视频。
• addTextTrack：用于为视频添加新的文本轨道。
• canPlayType：用于检查浏览器是否可以播放指定的视频类型。

示例 1：

  

    
        DOM Input Video Object
    

  

    
         
                GeeksForGeeks 
            
  
        DOM Video Object
  
        
            
        
  
        
  
        
            Click
        
        
        
        
            function geeks() {
                
              // get the duration of video 
              var r =
              document.getElementById(
                "gfg").duration;
                
              document.getElementById(
                "rk").innerHTML = r;
            }
        
    

  

输出：

• 点击按钮前：
  
• 点击按钮后：
  

示例 2：

  

    
        DOM Input Video Object
    

  

    
         
                GeeksForGeeks 
            
  
        DOM Video Object
  
        
            
            
        
  
        
  
        
            Click
        
        
        
        
        
            function geeks() {
                
                // Return width
                var r =
                    document.getElementById(
                      "gfg").width;
                
                document.getElementById(
                  "rk").innerHTML = r;
            }
        
    

  

输出：

• 点击按钮前：
  
• 点击按钮后：
  

支持的浏览器： HTML支持的浏览器 |下面列出了DOM 视频对象：

• 谷歌浏览器
• 边缘
• 火狐浏览器
• 歌剧
• 苹果浏览器