音频视频

音频

音频格式

• MP3
• WAV
• AAC
• OGG
• WMA

音频编码

• AAC
• MP3
• OGG
• WMA

视频

视频格式

• MP4
• AVI
• MOV
• WMV
• FLV
• MKV
• 3GP

视频编码

• H.264
• H.265
• VP8
• VP9

视频事件

• onplay: 当开始播放时触发

• onpause: 当暂停播放时触发

• onemptied: 当目前的播放列表为空时触发

• oncanplay: 当浏览器可以开始播放视频时触发

• oncanplaythrough: 当浏览器预计可以在不停下来进行缓冲的情况下持续播放视频时触发

• ondurationchange: 当视频的时长发生变化时触发

• onended: 当目前的播放列表已结束时触发

• onerror: 当在加载视频期间发生错误时触发

• onloadeddata: 当浏览器已加载音频/视频的当前帧时触发

• ontimeupdate: 当目前的播放位置发生改变时触发

• onloadedmetadata: 当浏览器已加载音频/视频的元数据时触发

• onseeked: 当用户已移动/跳跃到音频/视频中的新位置时触发

• onseeking: 当用户开始移动/跳跃到音频/视频中的新位置时触发

• onvolumechange: 当音量发生变化时触发

页面打开，可以记录上一次的视频播放位置

思路:

1.在ontimeupdate事件触发的时候，每隔1秒钟，就记录当前时间到本地存储

2.下次打开页面， onloadeddata 事件触发，就可以从本地存储取出时间，让视频从取出的时间播放，如果没有就默认为0s

获得当前时间 video.currentTime

 <video src="https://www.w3schools.com/html/mov_bbb.mp4" controls  width="320" height="240"></video>

<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
  <script>
    const video = document.querySelector('video');
    video.ontimeupdate =_.throttle(() =>{
      console.log(11);
      console.log(video.currentTime);
      localStorage.setItem('currentTime', video.currentTime);
      console.log(localStorage.getItem('currentTime'),'localStorage');
    }, 1000)
</script>

接下来我们要实现的是，当用户点击播放按钮的时候，视频从上次播放的位置开始播放

video.onloadeddata = () => {
      console.log('获取时间');
      video.currentTime = localStorage.getItem('currentTime') || 0;
}

视频播放器

• HTML5 video
• Video.js