很多时候我们都需要使用视频的第一帧当作视频的封面,今天我们从uni-app的安卓app这个环境来实现下这个需求。
uniapp 安卓APP端(ios未测试)
方法:使用renderjs实现对DOM元素的操作,创建video元素获取视频转第一帧,使用canvas转为base64格式进行展示
<template>
<video :src="src" :poster="poster" :change:src="video.setPoster"></video>
</template>
<script>
export default {
data() {
return {
poster: '',
src: 'https://oss-p56.xpccdn.com/prod/footage/preview/xpc/HHMFcJlnHMS3TBj.mp4'
}
},
methods: {
getPoster(poster) {
this.poster = poster
}
}
}
</script>
<script lang="renderjs" module="video">
export default {
methods: {
setPoster(newV, oldV, ownerInstance) {
let video = document.createElement("video");
video.setAttribute('crossOrigin', 'anonymous'); //处理跨域
video.setAttribute('src', newV);
video.setAttribute('width', 1000);
video.setAttribute('height', 500);
// 表示可以下载整个视频文件,即使用户不希望使用它。这样才能获取到视频文件
video.setAttribute('preload', 'auto');
// loadeddata 事件在媒体当前播放位置的视频帧(通常是第一帧)加载完成后触发。
video.addEventListener('loadeddata', function() {
let canvas = document.createElement("canvas"),
width = video.width, //canvas的尺寸和图片一样
height = video.height;
canvas.width = width;
canvas.height = height;
canvas.getContext("2d").drawImage(video, 0, 0, width, height); //绘制canvas
let poster = canvas.toDataURL('image/jpeg'); //转换为base64
ownerInstance.callMethod('getPoster', poster)
});
}
}
}
</script>