vue 获取任意视频时长 和 视频任意时间动画帧

1.获取时长

function  getVideoTime(fileInput, callback) {
	var file = fileInput.files[0];
	//获取视频或者音频时长
	var fileurl = URL.createObjectURL(file);
	//经测试，发现audio也可获取视频的时长
	var audioElement = new Audio(fileurl);
	// loadedmetadata 视频源数据加载成功
	audioElement.addEventListener("loadedmetadata",  (_event) => {
		var duration = audioElement.duration; // 视频时长
	  	callback && callback(duration )
	});
}

2.获取任意帧图片

setVideoImg(url) {
      this.$nextTick(() => {
      	// 创建视频
        let video = document.createElement('video')
        video.controls = 'controls'
        video.crossOrigin = 'anonymous'
        // 播放地址
        let source = document.createElement('source')
        source.src = url
        source.type = 'video/mp4'
        video.appendChild(source)
        // 这很重要
        video.currentTime = 0.100 
        // 当前帧的数据已加载
        video.addEventListener('loadeddata', () => {
          // 创建画布
          var canvas = document.createElement('canvas')
          canvas.width = video.videoWidth * 0.5
          canvas.height = video.videoHeight * 0.5
          canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height)
          // 转码添加
          var img = document.createElement('img')
          let src = canvas.toDataURL('image/png')
          img.src = src
          // 给特定vue节点添加
          this.$refs['video-img-xxx'].appendChild(img)
        })
      })
    }

loadstart：当浏览器开始寻找指定的音频/视频时
durationchange：当指定音频/视频的时长数据发生变化时
loadedmetadata：当指定的音频/视频的元数据已加载时
loadeddata：当当前帧的数据已加载，但没有足够的数据来播放指定音频/视频的下一帧时
progress：当浏览器正在下载指定的音频/视频时
canplay：当浏览器能够开始播放指定的音频/视频时
canplaythrough：当浏览器预计能够在不停下来进行缓冲的情况下持续播放指定的音频/视频时