音视频-Video标签整理（属性、方法、事件）

前言

啊嘞啊嘞，没想到哎，video原生标签可以在手机端进行hls流直播（电脑端不可以，需要使用播放器），神奇

使用

<video
      id="video"
      :poster="imgurl"
      :src="url"
      autoplay
      controls="controls"
    ></video>

1. 标签可设置属性

   	 src ：视频的属性
   	poster：视频封面，没有播放时显示的图片
   	preload：预加载
   	autoplay：自动播放
   	loop：循环播放
   	controls：浏览器自带的控制条
   	width：视频宽度
   	height：视频高度

2. 对象的属性和方法
   获取dom对象

	this.video=document.getElementById('video')

基础属性

- this.video.currentSrc; //返回当前资源的URL
- this.video.src = value; //返回或设置当前资源的URL
- this.video.buffered; //返回已缓冲区域，TimeRanges
- this.video.preload; //none:不预载 metadata:预载资源信息 auto:
- //准备状态 
- this.video.readyState;//1:HAVE_NOTHING 2:HAVE_METADATA 3.HAVE_CURRENT_DATA 4.HAVE_FUTURE_DATA 5.HAVE_ENOUGH_DATA
- this.video.seeking; //是否正在seeking

回放状态

this.video.currentTime = value; //当前播放的位置，赋值可改变位置
this.video.startTime; //一般为0，如果为流媒体或者不从0开始的资源，则不为0
this.video.duration; //当前资源长度 流返回无限
this.video.paused; //是否暂停
this.video.defaultPlaybackRate = value;//默认的回放速度，可以设置
this.video.playbackRate = value;//当前播放速度，设置后马上改变
this.video.played; //返回已经播放的区域，TimeRanges，关于此对象见下文
this.video.seekable; //返回可以seek的区域 TimeRanges
this.video.ended; //是否结束
this.video.autoPlay; //是否自动播放
this.video.loop; //是否循环播放

//视频控制

this.video.controls;//是否有默认控制条
this.video.volume = value; //音量
this.video.muted = value; //静音

TimeRanges(区域)对象
TimeRanges.length; //区域段数
TimeRanges.start(index) //第index段区域的开始位置
TimeRanges.end(index) //第index段区域的结束位置

网络资源状况(重要)

 1. this.video.networkState; //0.此元素未初始化 1.正常但没有使用网络 2.正在下载数据 3.没有找到资源
-this.video.error; //null:正常
-this.video.code; //1.用户终止 2.网络错误 3.解码错误 4.URL无效

方法

2. this.video.load(); //重新加载src指定的资源
3. this.video.canPlayType(type); //是否能播放某种格式的资源 
-this.video.play(); //播放
-this.video.pause(); //暂停

4. 事件监听

    //视频开始加载   第一个执行的事件
    this.video.addEventListener('loadstart',function(e){
      // console.log(e,'loadstart')
    })
    //视频时长发生变化
    this.video.addEventListener('durationchange',function(e){
      //此时可以获取到视频时长
      // console.log(e,'durationchange')
    })
    //视频元数据加载完毕
    this.video.addEventListener('loadedmetadata',function(e){
      // console.log(e,'loadedmetadata')
    })
    //没有足够的数据，来播放下一个视频片段
    this.video.addEventListener('loadeddata',function(e){
      // console.log(e,'loadeddata')
    })
    //正在加载数据  会多次触发
    this.video.addEventListener('progress',function(e){
      // console.log(e,'progress')
    })
    //通常视频播放需要canplay,canplaythrough事件
    //播放视频有部分帧准备完毕，可以播放
    this.video.addEventListener('canplay',function(e){
      // console.log(e,'canplay')
    })
    //已经可以流畅的播放
    this.video.addEventListener('canplaythrough',function(e){
      // console.log(e,'canplaythrough')
    })
    //监听视频播放   （暂停到播放状态的改变）
    this.video.addEventListener('play',function(e){
      // console.log(e,'play')
      
    })
    //监听视频暂停   （播放到暂停状态的改变）
    this.video.addEventListener('pause',function(e){
      // console.log(e,'pause')
    })
    //跳转到指定地方时触发
    this.video.addEventListener('seeking',function(e){
      // console.log(e,'seeking')
    })
    //跳转到指定地方后触发
    this.video.addEventListener('seeked',function(e){
      // console.log(e,'seeked')
    })
    //无法解码，视频无法更新  （缓冲）
    this.video.addEventListener('waiting',(e)=>{
      console.log(e,'waiting')
      Toast({
        type: 'html',
        message: '<span>当前网络不稳定</span>',
        position: 'top',
        duration: 2000,
        className:'cctoast',
      });
    })
    //从waiting状态解码成功后可到playing状态
    this.video.addEventListener('playing',function(e){
      console.log(e,'playing')
      console.log('111',TimeRanges.length)
    })
    //视频时间实时更新 (自定义进度条)
    this.video.addEventListener('timeupdate',function(e){
      // console.log(e,'timeupdate')
    })
    //视频播放结束（结束后插入广告）
    this.video.addEventListener('ended',(e)=>{
      console.log(e,'ended')
      this.video.src=this.url1
      // setTimeout(()=>{

      //   this.video.load();
      // },1000)
    })
    //视频播放报错 （测试时 重试大概31次触发error事件）
    this.video.addEventListener('error',(e)=>{
      console.log(e,'error')
      console.log(this.video.error)
      console.log(this.video.error.code) // //1.用户终止 2.网络错误 3.解码错误 4.URL无效
      console.log(this.video.networkState) // //0.此元素未初始化 1.正常但没有使用网络 2.正在下载数据 3.没有找到资源
      // setInterval(()=>{
      //   this.video.preload = true
      //   setTimeout(()=>{
      //     // this.video.preload = false
      //   },500)
      // },1000)
      // this.video.load();
    })

5. 参考
   HTML5的Video标签的属性,方法和事件汇总