说明:项目中需要视频的封面图片,以下是如何截取视频第一帧作为封面,如需截取多个视频,按自己需要代入即可。
<template>
<div class="about">
<div v-if="videoUrl">
<video
:src="videoUrl"
style="width:320px;height:200px;"
controls="controls"
id="upvideo"
>您的浏览器不支持视频播放</video>
</div>
<canvas
id="mycanvas"
style="display: none"
></canvas>
<img v-if="imgsrc" :src="imgsrc" style="margin-top:50px;">
</div>
</template>
<script>
export default {
data() {
return {
videoUrl: "http://video.xbbzp.com/llSEAeCVtYceYvivaDJ6jz3287WX",
imgsrc:''
};
},
mounted () {
this.findvideocover(this.videoUrl,{url:''})
},
methods: {
//截取视频第一帧作为播放前默认图片
findvideocover(url, file) {