HTML5中video元素事件汇总

心已赠人 2023-03-01 09:11 21阅读 0赞

html5的video标签播放视频，其中涉及的不同的应用场景以及开发需求，下面是涉及到的事件和参数。
    
    <video id="myVideo" 
           controls="controls"
           poster='预览图' 
           preload="auto" 
           x5-playsinline=""
           playsinline=""
           webkit-playsinline="">
        <source src="" type="video/mp4">
    </video>

*  src ：视频的属性
 *  poster：视频封面，没有播放时显示的图片
 *  preload：预加载，如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
 *  autoplay：自动播放
 *  loop：循环播放
 *  controls：浏览器自带的控制条
 *  width：视频宽度
 *  height：视频高度
 *  muted：规定视频的音频输出应该被静音。  
      
      
    <script>

</script>

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

## 事件 ##

<table> 
 <tbody> 
  <tr> 
   <th>事件</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td>loadstart</td> 
   <td>浏览器开始在网上寻找媒体数据</td> 
  </tr> 
  <tr> 
   <td>progress</td> 
   <td>浏览器正在获取媒体数据</td> 
  </tr> 
  <tr> 
   <td>suspend</td> 
   <td>浏览器暂停获取媒体数据，但是下载过程并滑正常结束</td> 
  </tr> 
  <tr> 
   <td>abort</td> 
   <td>浏览器在下载完全部媒体数据之前中止获取媒体数据，但是并不是由错误引起的</td> 
  </tr> 
  <tr> 
   <td>error</td> 
   <td>获取媒体数据过程中出错</td> 
  </tr> 
  <tr> 
   <td>emptied</td> 
   <td>video元素或audio元素所在网络突然变为未初始化状态可能原因有两个:1.载入媒体过程中突然发生一个致命错误 <p>&nbsp;</p> <p>2.在浏览器正在选择支持的播放格式时，又调用 了load方法重新载入媒体</p> </td> 
  </tr> 
  <tr> 
   <td>stalled</td> 
   <td>浏览器尝试获取媒体数据失败</td> 
  </tr> 
  <tr> 
   <td>play</td> 
   <td>即将开始播放，当执行了play方法时触发，或数据下载后元素被设为autoplay属性</td> 
  </tr> 
  <tr> 
   <td>pause</td> 
   <td>播放暂停，当执行了pause方式时触发</td> 
  </tr> 
  <tr> 
   <td>loadedmetadata</td> 
   <td>浏览器获取完毕媒体的时间长和字节数</td> 
  </tr> 
  <tr> 
   <td>waiting</td> 
   <td>播放过程由于得不到下一帧而暂停播放（例如下一帧尚未加载完毕），但很快就能够得到下一帧</td> 
  </tr> 
  <tr> 
   <td>canplay</td> 
   <td>浏览器能够播放媒体，但估计以当前的播放速率不能直接播放完毕，播放期间需要缓冲</td> 
  </tr> 
  <tr> 
   <td>canplaythrough</td> 
   <td>浏览器能够播放媒体，而且以当前播放速率能够将媒体播放完毕，不再需要进行缓冲</td> 
  </tr> 
  <tr> 
   <td>seeking</td> 
   <td>seeking属性变为true，浏览器正在请求数据</td> 
  </tr> 
  <tr> 
   <td>seeked</td> 
   <td>seeking属性变为false，浏览器停止请求数据</td> 
  </tr> 
  <tr> 
   <td>timeupdate</td> 
   <td>由于播放位置被改变，可能是播放过程中的自然改变，也可能是被人为的改变，或由于播放不能连续而发生的跳变</td> 
  </tr> 
  <tr> 
   <td>ended</td> 
   <td>播放结束后停止播放</td> 
  </tr> 
  <tr> 
   <td>ratechange</td> 
   <td>defaultplaybackRate属性（默认播放速率）或playbackRate属性（当前播放速率）被改变</td> 
  </tr> 
  <tr> 
   <td>druationchange</td> 
   <td>播放时长被改变</td> 
  </tr> 
  <tr> 
   <td>volumechange</td> 
   <td>volume属性（音量）被改变或muted属性（静音状态）被改变</td> 
  </tr> 
 </tbody> 
</table>

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

![20191229112121499.png][]

想要整理更多的碎片知识，扫码关注下面的公众号，让我们在哪里接着唠！

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZWh1ODM3NzY5NDc0_size_16_color_FFFFFF_t_70][]

[20191229112121499.png]: /images/20230209/78034f598eca43369baa958065052cc7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZWh1ODM3NzY5NDc0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191229112346758.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZWh1ODM3NzY5NDc0,size_16,color_FFFFFF,t_70