最开始的做法
<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
}
}