根据视频URL截取其第一帧

本文分享了一种从远程视频URL获取首帧图片的方法。作者介绍了如何使用Java代码下载视频到本地,并结合ffmpeg等工具截取视频的第一帧,最终实现了手机APP中视频预览的需求。

一、背景

        笔者刚毕业小白,目前正在参与开发一款手机app,会有视频展示,ios和android开发人员说如果直接获取视频会对手机性能产生影响,卡顿什么得巴拉巴拉巴拉,需要我给他们截个图,第一帧,就这样T_T。

        视频我都是通过接口使用 腾讯对象存储服务(cos) 然后获取URL的。

二、过程

        首先当然各种查,网上清一色都是本地视频截取第一帧,工具无一例外都是ffmpeg,虽然需求不同,总得尝试一下。

        自己拍了个视频放到本地,然后照着博客得代码尝试了一下,原博客链接

        代码我自己做了改动后发现ok,那么问题来了,视频URL该怎么办呢?

        我这么做的:

        try {
            URL url = new URL(videoUrl);
            BufferedInputStream bis = new BufferedInputStream(url.openStream());
            //实例存储字节数组
            byte[] bytes = new byte[100];
            OutputStream bos = new FileOutputStream(new File(缓存视频的本地路径));
            int len;
            while ((len = bis.read(bytes)) > 0) {
                bos.write(bytes, 0, len);
            }
            bis.close();
            bos.flush();
            bos.close();
            boolea = true;
        } catch (Exception e) {
            boolea = false;
            e.printStackTrace();
        }

 

        然后就去缓存了路径下看,视频已经取下来了,只要URL没问题,视频取下来应该是没问题的。

 

        视频取下来了,接下来的活就很简单了。

        此外我还推荐大家阅读另一篇博客,其中有一个开源项目,代码写得很好。链接...,全部代码我就不贴了,读了这两篇博客加我这一小段代码相信大家都能get!

### 实现方案 为了在 UniApp 中获取并保存视频第一帧作为封面图,可以采用多种方式。一种有效的方法是通过调用云端服务提供商(如七牛云、阿里云)提供的 API 来完成此操作[^4]。 另一种本地解决方案是在前端页面加载完成后,在 HTML5 `<video>` 元素上使用 JavaScript 的 `canvas` 对象绘制当前播放时刻的画面,并将其转换为图像数据 URL 或者 Blob 文件对象以便进一步处理或上传到服务器[^2]。 下面展示一段基于 renderjs 技术栈的具体实现代码片段: ```javascript // 定义渲染函数用于捕获视频首帧 export default { data() { return { videoUrl: 'https://yun.job268.com/yun_video_0.6519106342375556.mp4', coverImageUrl: '' } }, methods: { async getFirstFrameAsCover() { const ctx = uni.createCanvasContext('first-frame-canvas') let videoElement = document.createElement("video"); videoElement.src = this.videoUrl; await new Promise((resolve, reject) => { videoElement.onloadedmetadata = () => resolve(); videoElement.onerror = (e) => reject(e); }); // 设置 canvas 尺寸匹配视频尺寸 const canvasWidth = videoElement.videoWidth; const canvasHeight = videoElement.videoHeight; // 创建临时画布元素 var tempCanvas = document.createElement('canvas'); tempCanvas.width = canvasWidth; tempCanvas.height = canvasHeight; var context = tempCanvas.getContext('2d'); // 绘制视频第一帧至画布 context.drawImage(videoElement, 0, 0, canvasWidth, canvasHeight); // 获取 base64 编码后的图片字符串 this.coverImageUrl = tempCanvas.toDataURL('image/jpeg', 0.9); // 更新视图中的封面图路径 setTimeout(() => {ctx.draw()}, 20) console.log(this.coverImageUrl) } } } ``` 上述代码展示了如何创建一个隐藏的 `<video>` 元素来加载目标视频资源,并利用 Canvas API 提取出其初始帧的内容,最后将提取出来的图像设置为应用内的封面显示。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值