获取视频第一帧作为封面

最新推荐文章于 2024-05-21 11:09:19 发布

I-T枭

最新推荐文章于 2024-05-21 11:09:19 发布

阅读量3.2k

点赞数 1

分类专栏： HTML5

本文链接：https://blog.csdn.net/hahahhahahahha123456/article/details/108767884

版权

本文介绍了如何在H5和小程序中生成视频的第一帧封面。通过创建video元素，截取帧数，利用canvas绘制，再处理兼容性问题，如iPhone Safari的onloadeddata回调延迟。小程序内视频会自动获取封面，而H5可能存在兼容性挑战，建议使用云服务如阿里云OSS和七牛云来获取封面。

摘要由CSDN通过智能技术生成

制作视频一帧封面（H5处理）

实现原理：

1：创建video获取视频（上传或者网络视频）

var video = document.createElement("VIDEO");

2：指定video截取当前帧数

video.currentTime = 5; //必须设置视频当前时长，要不然会黑屏

3：创建canvas画布

var canvas = document.createElement('canvas');

4：视频加载完毕，截取视频帧数，绘画视频封面

// 图片绘制
video.onloadeddata = (() => {
    // 设置画布的宽高
    canvas.width = video.clientWidth;
    canvas.height = video.clientHeight;      
    window.getComputedStyle(that.$refs.videoFilter).width,     
    window.getComputedStyle(that.$refs.videoFilter).height);
    canvas.getContext('2d').drawImage(video, 0, 0, canvas.width,canvas.height);
    var dataURL = canvas.toDataURL('image/jpeg');
    // console.log(dataURL,"-----")
})

完整案例如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">&l

最低0.47元/天解锁文章

I-T枭

关注

1
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
获取视频第一帧作为封面

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.jsdelivr.n.
复制链接

扫一扫