video-02-对象属性和对象方法

Bertha 。 2023-10-12 23:22 12阅读 0赞

> 下面来到我们video的对象属性和对象方法，在这里，我们可以进行（自由）的操作

**目录**

一、参考资料

二、video对象属性

三、video对象方法

四、对象属性和方法的简单使用

4.1 编写video

4.2 使用video对象属性及方法

五、扩展思路

--------------------

## 一、参考资料 ##

[HTML DOM Video 对象 | 菜鸟教程][HTML DOM Video _ _]

[详解video对象，看完必会，你也能写一个视频播放器(三)\_哔哩哔哩\_bilibili][video_bilibili]

## 二、video对象属性 ##

<table> 
 <tbody> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/prop-video-audiotracks.html" title="audioTracks" rel="nofollow">audioTracks</a></td> 
   <td>返回表示可用音频轨道的 AudioTrackList 对象。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/prop-video-autoplay.html" title="autoplay" rel="nofollow">autoplay</a></td> 
   <td>设置或返回是否在就绪（加载完成）后随即播放视频。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/prop-video-buffered.html" title="buffered" rel="nofollow">buffered</a></td> 
   <td>返回表示视频已缓冲部分的 TimeRanges 对象。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/prop-video-controller.html" title="controller" rel="nofollow">controller</a></td> 
   <td>返回表示视频当前媒体控制器的 MediaController 对象。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/prop-video-controls.html" title="controls" rel="nofollow">controls</a></td> 
   <td>设置或返回视频是否应该显示控件（比如播放/暂停等）。</td> 
  </tr> 
  <tr> 
   <td>crossOrigin</td> 
   <td>设置或返回视频的 CORS 设置。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/prop-video-currentsrc.html" title="currentSrc" rel="nofollow">currentSrc</a></td> 
   <td>返回当前视频的 URL。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/prop-video-currenttime.html" title="currentTime" rel="nofollow">currentTime</a></td> 
   <td>设置或返回视频中的当前播放位置（以秒计）。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/prop-video-defaultmuted.html" title="defaultMuted" rel="nofollow">defaultMuted</a></td> 
   <td>设置或返回视频默认是否静音。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/prop-video-defaultplaybackrate.html" title="defaultPlaybackRate" rel="nofollow">defaultPlaybackRate</a></td> 
   <td>设置或返回视频的默认播放速度。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/prop-video-duration.html" title="duration" rel="nofollow">duration</a></td> 
   <td>返回视频的长度（以秒计）。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/prop-video-ended.html" title="ended" rel="nofollow">ended</a></td> 
   <td>返回视频的播放是否已结束。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/prop-video-error.html" title="error" rel="nofollow">error</a></td> 
   <td>返回表示视频错误状态的 MediaError 对象。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/prop-video-height.html" title="height" rel="nofollow">height</a></td> 
   <td>设置或返回视频的 height 属性的值。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/prop-video-loop.html" title="loop" rel="nofollow">loop</a></td> 
   <td>设置或返回视频是否应在结束时再次播放。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/prop-video-mediagroup.html" title="mediaGroup" rel="nofollow">mediaGroup</a></td> 
   <td>设置或返回视频所属媒介组合的名称。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/prop-video-muted.html" title="muted" rel="nofollow">muted</a></td> 
   <td>设置或返回是否关闭声音。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/prop-video-networkstate.html" title="networkState" rel="nofollow">networkState</a></td> 
   <td>返回视频的当前网络状态。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/prop-video-paused.html" title="paused" rel="nofollow">paused</a></td> 
   <td>设置或返回视频是否暂停。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/prop-video-playbackrate.html" title="playbackRate" rel="nofollow">playbackRate</a></td> 
   <td>设置或返回视频播放的速度。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/prop-video-played.html" title="played" rel="nofollow">played</a></td> 
   <td>返回表示视频已播放部分的 TimeRanges 对象。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/prop-video-poster.html" title="poster" rel="nofollow">poster</a></td> 
   <td>设置或返回视频的 poster 属性的值。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/prop-video-preload.html" title="preload" rel="nofollow">preload</a></td> 
   <td>设置或返回视频的 preload 属性的值。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/prop-video-readystate.html" title="readyState" rel="nofollow">readyState</a></td> 
   <td>返回视频当前的就绪状态。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/prop-video-seekable.html" title="seekable" rel="nofollow">seekable</a></td> 
   <td>返回表示视频可寻址部分的 TimeRanges 对象。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/prop-video-seeking.html" title="seeking" rel="nofollow">seeking</a></td> 
   <td>返回用户当前是否正在视频中进行查找。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/prop-video-src.html" title="src" rel="nofollow">src</a></td> 
   <td>设置或返回视频的 src 属性的值。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/prop-video-startdate.html" title="startDate" rel="nofollow">startDate</a></td> 
   <td>返回表示当前时间偏移的 Date 对象。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/prop-video-texttracks.html" title="textTracks" rel="nofollow">textTracks</a></td> 
   <td>返回表示可用文本轨道的 TextTrackList 对象。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/prop-video-videotracks.html" title="videoTracks" rel="nofollow">videoTracks</a></td> 
   <td>返回表示可用视频轨道的 VideoTrackList 对象。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/prop-video-volume.html" title="volume" rel="nofollow">volume</a></td> 
   <td>设置或返回视频的音量。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/prop-video-width.html" title="width" rel="nofollow">width</a></td> 
   <td>设置或返回视频的 width 属性的值。</td> 
  </tr> 
 </tbody> 
</table>

## 三、video对象方法 ##

<table> 
 <tbody> 
  <tr> 
   <th>Method</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/met-video-addtexttrack.html" title="addTextTrack()" rel="nofollow">addTextTrack()</a></td> 
   <td>向视频添加新的文本轨道。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/met-video-canplaytype.html" title="canPlayType()" rel="nofollow">canPlayType()</a></td> 
   <td>检查浏览器是否能够播放指定的视频类型。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/met-video-load.html" title="load()" rel="nofollow">load()</a></td> 
   <td>重新加载视频元素。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/met-video-play.html" title="play()" rel="nofollow">play()</a></td> 
   <td>开始播放视频。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/met-video-pause.html" title="pause()" rel="nofollow">pause()</a></td> 
   <td>暂停当前播放的视频。</td> 
  </tr> 
 </tbody> 
</table>

## 四、对象属性和方法的简单使用 ##

### 4.1 编写video ###

![76eb6cd529ba49ab8aa7d2d7441113f9.png][]

### 4.2 使用video对象属性及方法 ###

![5d624f05af2146ae9d3698c0ed7d5add.png][]

## 五、扩展思路 ##

看到这里你可以自己写几个按钮来分别控制video的播放暂停，快进n秒，修改音量等功能

![9326d1fae2f6447c8c00a63325337253.png][]

[详解video对象，看完必会，你也能写一个视频播放器(三)\_哔哩哔哩\_bilibili][video_bilibili]

[HTML DOM Video _ _]: https://www.runoob.com/jsref/dom-obj-video.html
[video_bilibili]: https://www.bilibili.com/video/BV1qb4y1p7Mo/?spm_id_from=333.976.top_right_bar_window_history.content.click&vd_source=9497a07b4c66a69fcd28375760bc991e
[76eb6cd529ba49ab8aa7d2d7441113f9.png]: https://img-blog.csdnimg.cn/76eb6cd529ba49ab8aa7d2d7441113f9.png
[5d624f05af2146ae9d3698c0ed7d5add.png]: https://img-blog.csdnimg.cn/5d624f05af2146ae9d3698c0ed7d5add.png
[9326d1fae2f6447c8c00a63325337253.png]: https://img-blog.csdnimg.cn/9326d1fae2f6447c8c00a63325337253.png