video tag (get the total length of the video, the current time of the video, the method of playing and pausing, the cover of the video,)

Below is the content of the HTML

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

1. The @canplay method means that the function executed after the video is loaded can be directly written in methods. After the video is loaded, the method is automatically executed and does not need to be executed again in the life cycle. You can add start playback, pause playback, and end playback to the video And other events, all below, take it yourself. The total length of the video, the current playing length of the video

  //获取视频播放时间
     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. The :controls attribute needs to be added, otherwise the display is just a picture without a play button

3. The poster attribute sets the default cover, and the video tag takes the first frame as the cover by default. For some videos, this attribute is needed if the first frame of the video cannot be displayed. There are the following methods.
(1) This method takes the second of the video

 //获取封面
 //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) This method takes the first few frames of the video. The last 3 means to take the third frame of the video, which can be directly written in the video tag, where item.url is the video address.

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