小视频源码开发中如何截取视频第一帧作为封面

我们打开短视频平台，观看视频时我们往往会被视频的封面所吸引，从而我们会点开视频去观看完整的，可想而知一个播放量

点赞量高的视频，视频的封面对这个视频多么的重要。本文章向大家介绍小视频源码开发中如何截取视频第一帧作为封面。

如何在小视频源码开发通过Vue中实现截取视频第一帧作为视频封面可以通过以下步骤：

1、小视频源码开发时在Vue组件中引入video.js和videojs-contrib-hls插件

1	`import` `videojs from` `'video.js';<br>import` `'videojs-contrib-hls';`

2、小视频源码开发时在Vue组件中声明一个video元素，并给其添加id

1	`<video id="my-video"></video>`

3、小视频源码开发时在Vue组件中初始化video.js插件，并监听loadedmetadata事件

mounted() {<br>let options = {<br>autoplay: false,<br>controls: false,<br>muted: true,<br>preload: 'metadata'<br>};<br>this.player = videojs('my-video', options);<br>this.player.on('loadedmetadata', () => {<br>this.captureVideoThumbnail();<br>});<br>},

4、小视频源码开发时编写captureVideoThumbnail方法来截取视频第一帧

captureVideoThumbnail() {<br>// 获取第一帧所在的时间戳，单位为秒<br>let timestamp = this.player.seekable().end(0) < 5 ? 0 : 5;<br>// 将视频移动到第一帧所在的位置<br>this.player.currentTime(timestamp);<br>// 将当前视频画面绘制到canvas上<br>let canvas = document.createElement('canvas');<br>canvas.width = this.player.videoWidth();<br>canvas.height = this.player.videoHeight();<br>canvas.getContext('2d').drawImage(this.player.el(), 0, 0, canvas.width, canvas.height);<br>// 将canvas转换为base64格式的图片<br>let thumbnail = canvas.toDataURL();<br>// 将图片存储到Vue数据中<br>this.videoThumbnail = thumbnail;<br>},

5、小视频源码开发时在Vue组件中使用v-bind指令将videoThumbnail绑定到img元素的src属性上

1	`<img :src="videoThumbnail"` `/>`

1	`完整示例代码如下：<br><br>`

<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>　