最近公司的公众号H5页面出了一个需求,因为可以在管理后台去动态添加一些图片视频文字的,要在这个H5页面显示出来,其中涉及到了视频封面,说截取第一帧,变成图片去做视频封面.下面我们来看一看
- 做需求前,我们先理清一下思路,首先是
H5页面,可以去使用video标签,因为我的项目是后台返回一串视频的链接地址,所以是视频地址,然后可以使用canvas标签去绘画我们的第一帧.
下面我写了一个小demo
<template>
<div>
<video ref="myvideo" :poster="imgUrl" controls :src="videoUrl"></video>
<img ref="myimg" :src="imgUrl" alt="" style="width: 640px;height: 368px;">
</div>
</template>
video里的poster是视频封面的属性,因为我的是动态的,视频是直接从后天去获取的,所以不固定,使用了v-bind,
img我是用来测试视频封面的
接下来是JavaScript代码
<script>
export default {
data () {
return {
videoUrl: 'https://xxx/178e29bd-f544-4a9e-8dcf-136a91fccd2e.mp4',
imgUrl: ''
}
},
created() {
this.getVideoBase64(this.videoUrl);
},
methods: {
getVideoBase64(url) {
let dataURL = '';
let video = document.createElement("video");
video.setAttribute('crossOrigin', 'anonymous');//处理跨域
video.setAttribute('src', url);
video.setAttribute('width', 400);
video.setAttribute('height', 240);
video.currentTime = 200; // 这里是截取第几帧,因为我的第一帧是黑色的,所以截取了第200帧
video.addEventListener('loadeddata', function () {
let canvas = document.createElement("canvas"),
let width = video.width, //canvas的尺寸和图片一样
let height = video.height;
canvas.width = width;
canvas.height = height;
canvas.getContext("2d").drawImage(video, 0, 0, width, height); //绘制canvas
dataURL = canvas.toDataURL('image/jpeg'); //转换为base64
this.imgUrl = dataURL;
console.log(this.imgUrl);
});
}
}
};
</script>
视频链接https://xxx/4a9e-8dcf-136a91fccd2e.mp4这个你们可以用自己的,
仔细看上面的代码,恭喜你! 出错了...
image.png
image.png
image.png
可以看到,我canvas是画出来了,链接也生成了,但是img标签不显示,img标签的src属性显示unknown,
关于这个问题,我上网查了,说使用this.$refs或者使用require(),但是这个经过我三个小时的麒麟臂,找到了问题,基本上出现这个问题都是,你动态绑定的src属性的值是空,所以加个延时器就好了,或者是把addEventListener的function改成箭头函数
延时器
getVideoBase64(url) {
let dataURL = '';
let video = document.createElement("video");
video.setAttribute('crossOrigin', 'anonymous');//处理跨域
video.setAttribute('src', url);
video.setAttribute('width', 640);
video.setAttribute('height', 368);
video.currentTime = 200;
video.addEventListener('loadeddata', function () {
let canvas = document.createElement("canvas"),
let width = video.width, //canvas的尺寸和图片一样
let height = video.height;
canvas.width = width;
canvas.height = height;
canvas.getContext("2d").drawImage(video, 0, 0, width, height); //绘制canvas
dataURL = canvas.toDataURL('image/jpeg'); //转换为base64
// console.log(dataURL)
this.imgUrl = dataURL;
// console.log(this.imgUrl)
});
setTimeout(() => {
this.$refs.myimg.src = dataURL;
this.$refs.myvideo.poster = dataURL;
}, 3000)
}
下面是完整代码(使用箭头函数)
<template>
<div>
<video ref="myvideo" :poster="imgUrl" controls :src="videoUrl"></video>
<img ref="myimg" :src="imgUrl" alt="" style="width: 640px;height: 368px;">
</div>
</template>
<script>
export default {
data () {
return {
videoUrl: 'https://xxx/178e29bd-f544-4a9e-8dcf-136a91fccd2e.mp4',
imgUrl: ''
}
},
created() {
this.getVideoBase64(this.videoUrl);
},
methods: {
getVideoBase64(url) {
let dataURL = '';
let video = document.createElement("video");
video.setAttribute('crossOrigin', 'anonymous');//处理跨域
video.setAttribute('src', url);
video.setAttribute('width', 640);
video.setAttribute('height', 368);
video.currentTime = 200;
video.addEventListener('loadeddata', () => {
let canvas = document.createElement("canvas"),
let width = video.width, //canvas的尺寸和图片一样
let height = video.height;
canvas.width = width;
canvas.height = height;
canvas.getContext("2d").drawImage(video, 0, 0, width, height); //绘制canvas
dataURL = canvas.toDataURL('image/jpeg'); //转换为base64
this.imgUrl = dataURL;
// 使用箭头函数就没必要使用this.$refs
// this.$refs.myimg.src = dataURL;
// this.$refs.myvideo.poster = dataURL;
});
}
}
};
</script>
效果图
image.png
好了,今天的就到这里了,如果有帮助到你,请动动你的小指头,按一下鼠标,给我点个赞吧,谢谢ε＝ε＝ε＝(#>д<)ﾉ
