MP4 文件前端获取视频封面

本文主要在vue中的写法,原生可以参考编写.

1.使用input选择视频.

 <input type="file" style="display:none;" ref="vExampleFile" @change="vExampleUpload" capture="camcorder" accept="video/*"/>

2.使用video标签接收视频并读取视频

<video id="video" ref="videos" type="video/mp4"
                   style=" 100%;height: 100%"
                   controls="controls"
                   preload="auto" :src="bvideoUrl"
                   @loadeddata="loadeddata"
                   webkit-playsinline="true"
                   autoplay
                   playsinline="true"
                   x5-video-player-type="h5"
                   x5-playsinline="true"
                   x5-video-player-fullscreen='true'
                   x-webkit-airplay="allow"
                   x5-video-orientation="portraint">
              您的浏览器暂不支持播放该视频，请升级至最新版浏览器。
</video>

3. 读取视频信息后执行

loadeddata: function() {
      let that = this
      let video = that.$refs.videos
      let scale = 0.3 // 压缩比率 0.1~1
      let canvas = document.createElement('canvas')
      let width = video.videoWidth*scale
      let height = video.videoHeight*scale
      console.log(width, height)
      const MIN_WIDTH = 375
      if (width < MIN_WIDTH) {
        // 做最小值处理
        height = height*MIN_WIDTH/width
        width = MIN_WIDTH
      }
      canvas.width = width
      canvas.height = height
      canvas.getContext('2d').drawImage(video, 0, 0, width, height)
      let image = canvas
        .toDataURL('image/png')
        .replace('image/png', 'image/octet-stream')
      // 输出视频封面
      this.speedImgUrl = image
    }