//1.video.js 插入視頻 一般默認靜音 (video.js使用方法可以看看網上的，然后視頻src是提交后台返的)
因為加載視頻封面需要10秒左右的時間 需要等一會 這個問題要想辦法解決 體驗感不太好
<video id="myVideo" class="video-js" controls preload="auto" muted autoplay>
<source :src="videoUrl" type="video/mp4">
</video>
//視頻封面
<div class="select_box">
<img :src="aboc" alt="">
</div>
<div class="select_btn">
<span @click="goPrevious()" v-show="imgIndex!=0">上一張</span>
<span @click="goNext()" v-show="imgIndex<logoimgUrl.length-1">下一張</span>
</div>
//2.
return {
aboc: '',
imgIndex:'',獲取到的視頻封面數組 來控制選擇那一張封面
logoimgUrl: [],//封面返回url
imgUrl: '',//最終提交視頻封面
videoUrl: '',//視頻url
}
//3.methods中定義方法 event是input中
// 獲取視頻
getVideo(event) {
this.media = event.target.files[0]
let file = new FormData();
file.append('file', this.media)
this.$axios.post('storage/upload', file).then(res => {
console.log(res)
this.logoimgUrl = res.data.data.images;
console.log(this.logoimgUrl)
this.videoUrl = res.data.data.storage.url;
console.log(this.videoUrl)
this.videoUrl_size = res.data.data.size;
if (this.videoUrl_size > 52428800) {
this.$toast({
message: "文件超過50M",
position: 'center',
duration: 2000
});
} else {
let player = document.querySelector('#myVideo')
player.src = this.videoUrl;
console.log(player.src)
player.play()
}
if (res.data.errno == 0) {
const toast = this.$toast.loading({
duration: 0, // 持續展示 toast
forbidClick: true,
message: '加載視頻封面倒計時 12 秒',
});
let second = 12;
const timer = setInterval(() => {
second--;
if (second) {
toast.message = `視頻封面倒計時 ${second} 秒`;
} else {
clearInterval(timer);
// 手動清除 Toast
this.$toast.clear();
}
}, 1000);
this.rel = false;
this.no_rel = true;
setTimeout(() => {
let _this = this;
_this.aboc = _this.logoimgUrl[_this.imgIndex]
_this.no_logo = true;
}, 12000)
} else {
this.rel = true;
this.no_rel = false;
}
})
},
//通過index選擇顯示照片
goNext() {
this.imgIndex++;
this.aboc = this.logoimgUrl[this.imgIndex]
},
goPrevious() {
this.imgIndex--;
this.aboc = this.logoimgUrl[this.imgIndex]
},
總體內容寫的比較雜亂 見諒見諒