electron 学习之 开始视频加载

最开始的做法

<template>
  <div id="app">
    <video v-if="!isStart" id="video" width="800" height="600" autoplay>
      <source src="/video/logo.mp4" type="video/mp4">
      您的浏览器不支持Video标签。
    </video>
    <div id="content" v-if="isStart">
      <div class="header" v-if="!isLoginPage">
        <heads></heads>
        <navs></navs>
      </div>
      <router-view/>
      <foot class="foot"></foot>
    </div>
  </div>
</template>

  created () {
    console.log(this.isLoginPage, this.isStart)

    let timehander: any = setTimeout(() => {
      this.isStart = true
      clearTimeout(timehander)
      timehander = null
    }, 4500)
  }

这种做法的问题是，调试时运行正常，但是打包后就一直加载不了视频内容，用第三方服务提供的视频时可以正常加载的
原因是，调试时 vue时有vue-server 提供的，可以调用所有的静态资源，但是打包后，electron 并不提供web服务器，只能加载简单的网页图片等资源
所以，解决方法有两种 1.增加web服务器；2.采用bolb 资源加载
本人采用第二种方案

<template>
  <div id="app">
    <video v-if="!isStart" id="video" width="800" height="600" autoplay>
      <source :src="videoSrc" type="video/mp4" />
      您的浏览器不支持Video标签。
    </video>
    <div id="content" v-if="isStart">
      <div class="header" v-if="!isLoginPage">
        <heads></heads>
        <navs></navs>
      </div>
      <router-view />
      <foot class="foot"></foot>
    </div>
  </div>
</template>
export default class App extends Vue {
  private videoSrc = "";
  private readonly localSrc = path.join(__static, "./video/logo.mp4");
  private isStart = process.env.NODE_ENV !== "production";
    created() {
    console.log(this.isLoginPage, this.isStart);

    let timehander: any = setTimeout(() => {
      this.isStart = true;
      clearTimeout(timehander);
      timehander = null;
    }, 4500);
  }

  mounted() {
    const buf = fs.readFileSync(this.localSrc); //读取文件，并将缓存区进行转换
    const uint8Buffer = Uint8Array.from(buf);
    const bolb = new Blob([uint8Buffer]); //转为一个新的Blob文件流
    this.videoSrc = window.URL.createObjectURL(bolb); //转换为url地址并直接给到audio
  }
}