动态改变video.js中视频封面，可选择指定视频封面
//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]
},
总体内容写的比较杂乱 见谅见谅
