video标签（获取视频时间总长度，视频当前时间，播放暂停方法，视频封面，）

下面是HTML的内容

  		<video
            id="video"
            @canplay="getVidDur()"
            ref="vueMiniPlayer"
            :controls="controls"
            :src="video_obj.video_url"
            :poster="imgUrl"
          ></video>

1.@canplay方法 表示视频加载完成之后执行的函数可以直接写在methods中，视频加载完成，自动执行方法，不需要在生命周期中再次执行,可以给视频加上开始播放，暂停播放，结束播放等事件，都在下面，自取。视频总长度，视频当前播放长度

  //获取视频播放时间
     getVidDur() {
    
    
      let _this=this
      var elevideo = document.getElementById("video");
//   console.log(elevideo.duration); //获取视频时长
//   console.log(elevideo.currentTime); //获取视频当前播放时间
    	elevideo.addEventListener('play', function () {
    
     //播放
        // console.log("开始播放");
        _this.getsetInterval()
    });
    // elevideo.addEventListener('playing', function () { //播放中
    //    console.log("播放中");
       
    // });
    // elevideo.addEventListener('waiting', function () { //加载
    //     console.log("加载中");
    // });
    elevideo.addEventListener('pause', function () {
    
     //暂停
        // console.log("暂停");
        clearInterval(_this.videotime)
    });
     elevideo.addEventListener('ended', function () {
    
     //结束
        // console.log("播放结束");
        clearInterval(_this.videotime)
    }, false);
    },

2.:controls属性需要加上，不然展示的就是就是一个图片，没有播放按钮

3.poster属性设置默认封面，video标签默认取第一帧为封面，有的视频第一帧显示不出视频就需要用到这个属性。有如下方法。
（1）此方法取视频的秒

 //获取封面
 //url参数传入视频的线上地址
      getVideoBase64(url) {
    
    
        let dataURL = '';
        let video = document.createElement("video");
        video.setAttribute('crossOrigin', 'anonymous');//处理跨域
        video.setAttribute('src', url);
        video.setAttribute('width', 610);//图片宽
        video.setAttribute('height', 340);//图片高
        video.currentTime = 0.5;//截取视频的秒
        video.addEventListener('loadeddata', () => {
    
    
          let canvas = document.createElement("canvas");
            let width = video.width; //canvas的尺寸和图片一样
            let height = video.height;
          canvas.width = width;
          canvas.height = height;
          canvas.getContext("2d").drawImage(video, 1, 1, width, height); //绘制canvas
          dataURL = canvas.toDataURL('image/jpeg'); //转换为base64
          this.imgUrl = dataURL;
          // 使用箭头函数就没必要使用this.$refs
          // this.$refs.myimg.src = dataURL;
          // this.$refs.myvideo.poster = dataURL;
        });
      },

（2）此方法取视频的第几帧。最后的3表示取视频的第三帧，可直接写在video标签里，其中item.url是视频地址。

:poster="item.url + '?vframe/jpg/offset/3'"