video标签使用原生javascript监听事件

HTML5 DOM 为video元素提供了方法、属性和事件。这些方法、属性和事件允许您使用 JavaScript 来操作video 元素
例如在html中使用video标签：

/**
* poster            贴图
* controls         自动播放
* muted            静音
* loop               循环播放
* preload          预加载
* controls         自动播放
*/
<video id="_video" src="test.mp4" poster="poster.jpg" controls muted loop preload>

1. 音量控制

var v = document.getElementById('_video');
v.volume = 0.5;

2. 播放时间控制

var t = document.getElementById('_video');
t.currentTime = 60; //秒

3. 播放地址切换

var s = document.getElementById('_src');
   setTimeout(()=>{
      s.src = 'test-2.mp4'
   },1000)

具体参数可以参考：HTML 音频/视频 DOM 参考手册

以下简单介绍事件：

var video = document.getElementById('_video');
//视频在创立初期时，duration是NaN  需要加载完视频元数据之后才能获取到视频时长（有可能只获取一部分）
console.log(video.duration,'duration')
video.paused     //播放是否暂停
video.play()        //开始播放
video.pause()     //暂停播放

//视频开始加载   第一个执行的事件
video.addEventListener('loadstart',function(e){
  console.log(e,'loadstart')
})

//视频时长发生变化
video.addEventListener('durationchange',function(e){
   //此时可以获取到视频时长
  console.log(e,'durationchange')
})

//视频元数据加载完毕
video.addEventListener('loadedmetadata',function(e){
  console.log(e,'loadedmetadata')
})

//没有足够的数据，来播放下一个视频片段
video.addEventListener('loadeddata',function(e){
  console.log(e,'loadeddata')
})

//正在加载数据  会多次触发
video.addEventListener('progress',function(e){
  console.log(e,'progress')
})

//通常视频播放需要canplay,canplaythrough事件
//播放视频有部分帧准备完毕，可以播放
video.addEventListener('canplay',function(e){
  console.log(e,'canplay')
})

//已经可以流畅的播放
video.addEventListener('canplaythrough',function(e){
  console.log(e,'canplaythrough')
})

//监听视频播放   （暂停到播放状态的改变）
video.addEventListener('play',function(e){
  console.log(e,'play')
})

//监听视频暂停   （播放到暂停状态的改变）
video.addEventListener('pause',function(e){
  console.log(e,'pause')
})

//跳转到指定地方时触发
video.addEventListener('seeking',function(e){
  console.log(e,'seeking')
})

//跳转到指定地方后触发
video.addEventListener('seeked',function(e){
  console.log(e,'seeked')
})

//无法解码，视频无法更新  （缓冲）
video.addEventListener('waiting',function(e){
  console.log(e,'waiting')
})

//从waiting状态解码成功后可到playing状态
video.addEventListener('playing',function(e){
  console.log(e,'playing')
})

//视频时间实时更新 (自定义进度条)
video.addEventListener('timeupdate',function(e){
  console.log(e,'timeupdate')
})

//视频播放结束（结束后插入广告）
video.addEventListener('ended',function(e){
  console.log(e,'ended')
})

//视频播放报错 （测试时 重试大概31次触发error事件）
video.addEventListener('error',function(e){
  console.log(e,'error')
})