首页 新闻 赞助 找找看

浏览器如何读取本地视频,然后在网页上播放?

0
悬赏园豆:30 [已关闭问题] 关闭于 2022-09-20 17:13

前端:Vue

现在所用技术:

FileReader

// 利用element-ui的上传组件,读取视频文件
export function readMediaFile(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.readAsArrayBuffer(file.raw)
    reader.onloadend = (e) => {
      const buffer = e.target.result
      const videoBlob = new Blob([new Uint8Array(buffer)], { type: 'video/mp4' })
      const url = window.URL.createObjectURL(videoBlob)// 此处url内容形如 blob:http://localhost:9528/9018e430-d6f4-4c8a-95a7-2ea0f255a906
      const realUrl = url.slice(5)//截取并保留http开头的内容
      resolve(realUrl)
    }
    reader.onerror = (e) => {
      reject(e)
    }
  })
}

video-player

……
  computed: {
    player() {
      return this.$refs.videoPlayer.player
    },
    sources() {
      return [{
        type: 'video/mp4',
        src: this.$store.getters[functionNames.configEventConfigMoudule + functionNames.videoUrl]
      }]
    }
  },
  watch: {
    sources: {
      deep: true,
      handler(newVal) {
        this.playerOptions.sources = newVal
      }
    }
  },

现在的问题:

  1. url带 blob:

  2. url不带blob:

echo_lovely的主页 echo_lovely | 小虾三级 | 园豆:1377
提问于:2022-09-19 10:28
< >
分享
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册