<video class="videoBox" :src="`${resources}/course/${ele.url}`" controls="controls"
@loadeddata="setVideoPoster($event)">
您的浏览器不支持 video 标签。
</video>
setVideoPoster(event) {
let video = event.target;
// video.height = video.clientHeight;
let canvas = document.createElement("canvas"); // 创建 canvas
const ctx = canvas.getContext("2d");
video.currentTime = 1; // 第一帧
video.oncanplay = () => {
canvas.width = video.clientWidth; // 获取视频宽度
canvas.height = video.clientHeight; //获取视频高度
var img = new Image(); // 这里使用img是为了解决视频跨域 canvas.toDataURL会提示错误的问题
img.onload = function () {
// canvas绘图
ctx.drawImage(video, 0, 0, video.clientWidth, video.clientHeight);
// 转换成base64形式并设置封面
video.poster = canvas.toDataURL("image/jpeg", 1); // 截取后的视频封面
}
}
}
在Vue中实现截取视频第一帧作为视频封面可以通过以下步骤：
在Vue组件中引入video.js和videojs-contrib-hls插件。
import videojs from 'video.js';
import 'videojs-contrib-hls';
在Vue组件中声明一个video元素，并给其添加id。
<video id="my-video"></video>
在Vue组件中初始化video.js插件，并监听loadedmetadata事件。
mounted() {
let options = {
autoplay: false,
controls: false,
muted: true,
preload: 'metadata'
};
this.player = videojs('my-video', options);
this.player.on('loadedmetadata', () => {
this.captureVideoThumbnail();
});
},
编写captureVideoThumbnail方法来截取视频第一帧。
captureVideoThumbnail() {
// 获取第一帧所在的时间戳，单位为秒
let timestamp = this.player.seekable().end(0) < 5 ? 0 : 5;
// 将视频移动到第一帧所在的位置
this.player.currentTime(timestamp);
// 将当前视频画面绘制到canvas上
let canvas = document.createElement('canvas');
canvas.width = this.player.videoWidth();
canvas.height = this.player.videoHeight();
canvas.getContext('2d').drawImage(this.player.el(), 0, 0, canvas.width, canvas.height);
// 将canvas转换为base64格式的图片
let thumbnail = canvas.toDataURL();
// 将图片存储到Vue数据中
this.videoThumbnail = thumbnail;
},
在Vue组件中使用v-bind指令将videoThumbnail绑定到img元素的src属性上。
<img :src="videoThumbnail" />
完整示例代码如下：
<template>
<div>
<video id="my-video"></video>
<img :src="videoThumbnail" />
</div>
</template>
<script>
import videojs from 'video.js';
import 'videojs-contrib-hls';
export default {
data() {
return {
player: null,
videoThumbnail: null
}
},
mounted() {
let options = {
autoplay: false,
controls: false,
muted: true,
preload: 'metadata'
};
this.player = videojs('my-video', options);
this.player.on('loadedmetadata', () => {
this.captureVideoThumbnail();
});
},
methods: {
captureVideoThumbnail() {
let timestamp = this.player.seekable().end(0) < 5 ? 0 : 5;
this.player.currentTime(timestamp);
let canvas = document.createElement('canvas');
canvas.width = this.player.videoWidth();
canvas.height = this.player.videoHeight();
canvas.getContext('2d').drawImage(this.player.el(), 0, 0, canvas.width, canvas.height);
let thumbnail = canvas.toDataURL();
this.videoThumbnail = thumbnail;
}
}
}
</script>
