取视频的第一帧作为初始页面

本文介绍了一种在iOS应用中从视频中获取指定时间点截图的方法。使用AVFoundation框架中的AVURLAsset来加载视频,并通过AVAssetImageGenerator生成指定时间点的图片。
  NSString *url = [Utils applicationCachesDirectory:self.videourl];
        url = [Utils applicationDocumentsDirectory:self.videourl];
        NSURL *videoURL = [NSURL fileURLWithPath:url];
        NSDictionary *opts = [NSDictionary dictionaryWithObject:[NSNumber numberWithBool:NO]
                                                         forKey:AVURLAssetPreferPreciseDurationAndTimingKey];
        AVURLAsset *urlAsset = [AVURLAsset URLAssetWithURL:videoURL options:opts];
        //NSLog(@"视频的路径是:%@", videoURL);
        AVAssetImageGenerator *generator = [AVAssetImageGenerator assetImageGeneratorWithAsset:urlAsset];
        generator.appliesPreferredTrackTransform = YES;
        generator.maximumSize = CGSizeMake(360.0f, 480.0f);
        NSError *error = nil;
        
        /*** Returns a CGImage for the asset at or near a specified time. */
        /*** - (CGImageRef)copyCGImageAtTime:(CMTime)requestedTime actualTime:(CMTime *)actualTime error:(NSError **)outError */
        CGImageRef cgImg = [generator copyCGImageAtTime: CMTimeMake(1, 1) actualTime:NULL error:&error];
### 实现方案 为了在 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 提出其初始帧的内容,最后将提出来的图像设置为应用内的封面显示。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值