video-03-video事件汇总

太过爱你忘了你带给我的痛 2023-10-12 23:23 48阅读 0赞

**目录**

一、参考资料

二、事件汇总

三、使用方法（推荐方法二，简单方便）

3.1 方法1 事件监听

3.2 方法2 JavaScript脚本

四、到这里你可以写一个video视频播放器功能是自定义的，可以发散思维实现功能

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

## 一、参考资料 ##

[HTML 音频/视频 | 菜鸟教程][HTML _ _]

## 二、事件汇总 ##

<table> 
 <tbody> 
  <tr> 
   <th>事件</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/tags/av-event-abort.html" title="abort" rel="nofollow">abort</a></td> 
   <td>当音频/视频的加载已放弃时触发。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/tags/av-event-canplay.html" title="canplay" rel="nofollow">canplay</a></td> 
   <td>当浏览器可以开始播放音频/视频时触发。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/tags/av-event-canplaythrough.html" title="canplaythrough" rel="nofollow">canplaythrough</a></td> 
   <td>当浏览器可在不因缓冲而停顿的情况下进行播放时触发。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/tags/av-event-durationchange.html" title="durationchange" rel="nofollow">durationchange</a></td> 
   <td>当音频/视频的时长已更改时触发。</td> 
  </tr> 
  <tr> 
   <td>emptied</td> 
   <td>当目前的播放列表为空时触发。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/tags/av-event-ended.html" title="ended" rel="nofollow">ended</a></td> 
   <td>当目前的播放列表已结束时触发。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/tags/av-event-error.html" title="error" rel="nofollow">error</a></td> 
   <td>当在音频/视频加载期间发生错误时触发。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/tags/av-event-loadeddata.html" title="loadeddata" rel="nofollow">loadeddata</a></td> 
   <td>当浏览器已加载音频/视频的当前帧时触发。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/tags/av-event-loadedmetadata.html" title="loadedmetadata" rel="nofollow">loadedmetadata</a></td> 
   <td>当浏览器已加载音频/视频的元数据时触发。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/tags/av-event-loadstart.html" title="loadstart" rel="nofollow">loadstart</a></td> 
   <td>当浏览器开始查找音频/视频时触发。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/tags/av-event-pause.html" title="pause" rel="nofollow">pause</a></td> 
   <td>当音频/视频已暂停时触发。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/tags/av-event-play.html" title="play" rel="nofollow">play</a></td> 
   <td>当音频/视频已开始或不再暂停时触发。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/tags/av-event-playing.html" title="playing" rel="nofollow">playing</a></td> 
   <td>当音频/视频在因缓冲而暂停或停止后已就绪时触发。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/tags/av-event-progress.html" title="progress" rel="nofollow">progress</a></td> 
   <td>当浏览器正在下载音频/视频时触发。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/tags/av-event-ratechange.html" title="ratechange" rel="nofollow">ratechange</a></td> 
   <td>当音频/视频的播放速度已更改时触发。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/tags/av-event-seeked.html" title="seeked" rel="nofollow">seeked</a></td> 
   <td>当用户已移动/跳跃到音频/视频中的新位置时触发。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/tags/av-event-seeking.html" title="seeking" rel="nofollow">seeking</a></td> 
   <td>当用户开始移动/跳跃到音频/视频中的新位置时触发。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/tags/av-event-stalled.html" title="stalled" rel="nofollow">stalled</a></td> 
   <td>当浏览器尝试获取媒体数据，但数据不可用时触发。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/tags/av-event-suspend.html" title="suspend" rel="nofollow">suspend</a></td> 
   <td>当浏览器刻意不获取媒体数据时触发。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/tags/av-event-timeupdate.html" title="timeupdate" rel="nofollow">timeupdate</a></td> 
   <td>当目前的播放位置已更改时触发。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/tags/av-event-volumechange.html" title="volumechange" rel="nofollow">volumechange</a></td> 
   <td>当音量已更改时触发。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/tags/av-event-waiting.html" title="waiting" rel="nofollow">waiting</a></td> 
   <td>当视频由于需要缓冲下一帧而停止时触发。</td> 
  </tr> 
 </tbody> 
</table>

## 三、使用方法（推荐方法二，简单方便） ##

### 3.1 方法1 事件监听 ###

const video = document.getElementById("video")
    video.addEventListener("error",function(){
     /******代码段******/
    });

### 3.2 方法2 **JavaScript脚本** ###

<video id="myVideo" autoplay="true"
            src="https://jf360videos.peopletech.cn/production/464f2fe20b1211ee83bef3d9bb3dfecd_1_video.mp4" width="320"
            height="240" controls onplay="begin_playing()">
        </video>
    
    function begin_playing() {
            console.log("视频播放啦")
            /******代码段******/
        }

## 四、到这里你可以写一个video视频播放器功能是自定义的，可以发散思维实现功能 ##

实现监听视频播放进度，并且判断是否快播放完毕等等

**思路**：利用timeupdate事件，及获取当前视频播放事件的属性，即可实现！！！

[HTML _ _]: https://www.runoob.com/tags/ref-av-dom.html