我们打开短视频平台,观看视频时我们往往会被视频的封面所吸引,从而我们会点开视频去观看完整的,可想而知一个播放量
点赞量高的视频,视频的封面对这个视频多么的重要。本文章向大家介绍小视频源码开发中如何截取视频第一帧作为封面。
如何在小视频源码开发通过Vue中实现截取视频第一帧作为视频封面可以通过以下步骤:
1、小视频源码开发时在Vue组件中引入video.js和videojs-contrib-hls插件
import videojs from 'video.js';
import 'videojs-contrib-hls';
2、小视频源码开发时在Vue组件中声明一个video元素,并给其添加id
<video id="my-video"></video>
3、小视频源码开发时在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();
});
},
4、小视频源码开发时编写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;
},
5、小视频源码开发时在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>
以上就是 小视频源码开发中如何截取视频第一帧作为封面,更多内容欢迎关注之后的文章。