2021-8-12 添加的视频预览

最新推荐文章于 2021-09-18 19:36:17 发布

步入中年的狗

最新推荐文章于 2021-09-18 19:36:17 发布

阅读量1.6k

点赞数

本文链接：https://blog.csdn.net/m0_52458664/article/details/119830198

版权

96

本来只是想解析一下上传的视频时长，然后发现这个也可以预览

getVideoDuration (file) {
      const binaryData = []
      let duration = null
      binaryData.push(file.getNative())
      this.videoSrc = window.URL.createObjectURL(
        new Blob(binaryData, { type: 'video/mp4' })
      )
      const audio = new Audio(this.videoSrc)
      audio.addEventListener('loadedmetadata', () => {
        duration = audio.duration
      })
      setTimeout(() => {
        this.$emit('duration', duration)
        this.duration = duration
      }, 1000)
    },

<video v-if="duration" :src="videoSrc" loop autoplay muted style="margin-top:10px" width="300"/>

事件监听会导致duration在外面因为还没有load完而拿不到，所以用异步处理，或者里面写一个别的函数，在函数里面赋值。createURL里面只能是Blob，File或MediaSource对象，然后这个对象还得是原生的文件。