video标签展示视频第一帧~

    <!-- 视频第一帧做封面的 demo -->
    <video id="video" ref="myvideo" :poster="imgUrl" controls :src="videoUrl"></video>
    <img ref="myimg" :src="imgUrl" alt="" style="width: 640px;height: 368px;">

 data () {
    return {
      videoUrl: '****.mp4',
      imgUrl: ''
    }
  },

  created () {
    this.getVideoBase64(this.videoUrl)
  },

getVideoBase64 (url) {
      let dataURL = ''
      let video = document.createElement('video')
      video.setAttribute('crossOrigin', 'anonymous') //处理跨域
      video.setAttribute('src', url)
      video.setAttribute('width', 375)
      video.setAttribute('height', 513)
      video.currentTime = 1
      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, 0, 0, width, height) //绘制canvas
        dataURL = canvas.toDataURL('image/jpeg') //转换为base64
        this.imgUrl = dataURL
        console.log('===========预览接口=====this.videoSrc=====', this.videoSrc, '==============poster', this.imgUrl)
      })
    }

还有更简单的方法，一句代码实现第一帧，请参照别的文章~谢谢~

H5，移动端，video标签截取视频第一帧，做为poster视频封面，找了很多方法，看了很多，最后发现这个办法真的，绝_h5video显示视频封面_前端小趴菜一枚的博客-CSDN博客