video 直播 视频播放

video.js
拥有丰富的插件，使用简单

hls.js
小巧，适合直播推流

video标签属性及事件

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

<!-- 音量控制 -->
<video src="test.mp4" id="_volume"></video>
<script type="text/javascript">
   var v = document.getElementById('_volume');
   v.volume = 0.5;
</script>

<!--播放时间控制 -->
<video src="test.mp4" id="_time"></video>
<script type="text/javascript">
   var t = document.getElementById('_time');
   t.currentTime = 60; //秒
</script>

<!--播放地址切换 -->
<video src="test.mp4" id="_src"></video>
<script type="text/javascript">
   var s = document.getElementById('_src');
   setTimeout(()=>{
      s.src = 'test-2.mp4'
   },1000)
</script>

<!--备用地址切换 -->
<video  id="_source">
  <source src="test-1.mp4" type="video/mp4"> 
  <source src="test-2.mp4" type="video/mp4"> 
  <source src="test-3.mp4" type="video/mp4"> 
</video>
<script type="text/javascript">
  //播放失败时，切换下一个
   var s = document.getElementById('_source');
   setTimeout(()=>{
     console.log('src',s.currentSrc)
   },1000)
</script>

以下简单介绍事件

<video src="text.mp4" id="video">

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')
})