IOS开发:仿抖音短视频系统生成webp动图客户端解决方案

原创

布谷鸟网络科技

修改于 2019-03-04 14:59:58

1.8K0

修改于 2019-03-04 14:59:58

文章被收录于专栏：用户4669341的专栏

前言

最近要求做一个类似抖音将短视频生成动图在列表进行展示的需求，生成动图最大的好处是用户在列表能够最直观地预览到短视频系统的大致内容，虽然这个是个用户体验的加分项，但是如果我们不能处理好图片占用空间及清晰度问题，也会带来副作用。

那么，我们该如何权衡呢？

截取视频帧

截取视频一帧关键代码如下：

 AVAssetImageGenerator *generator = [[AVAssetImageGenerator alloc] initWithAsset:asset];
 generator.appliesPreferredTrackTransform = YES;
 //下面两个值设为0表示精确取帧，否则系统会有优化取出来的帧时间间隔不对等
 generator.requestedTimeToleranceAfter = kCMTimeZero;
 generator.requestedTimeToleranceBefore = kCMTimeZero;

生成Webp

这里推荐一个功能强大的iOS 图像框架：YYImage。

使用YYImageEncoder可以很方便的生成gif或webp动图,实例代码：

 YYImageEncoder *gifEncoder = [[YYImageEncoder alloc] initWithType:YYImageTypeWebP];
 gifEncoder.loopCount=0;
 gifEncoder.quality=0.8;
 [gifEncoder addImage:img duration:0.1];
 [gifEncoder encodeToFile:filePath];

至此，2个关键技术点讲完了，不妨试试截取几帧生成一个webp试试手......

当你惊喜的发现图片已经生成的同时，也会惊讶的发现图片占用空间依然很大啊。

继续优化

要想尽可能的优化图片空间，只有从两个方面入手：

1、尽可能减少图片帧数

2、尽可能压缩图片

针对第一点，以及参考抖音的效果，我的方案如下：

总共截取9帧图片，前5帧从视频的0.5秒开始，每间隔0.1秒截取一帧；然后倒序再截取4帧，从而形成倒序播放的效果。

针对第二点，首先对图片大小按比例进行裁剪，以最大边长不超过480为依据进行等比压缩，然后设置0.8的有损压缩。

最终方案：

 - (void)saveToWebpByVideoPath:(NSURL*)videoUrl webpFilePath:(NSString*)webpFilePath{
     YYImageEncoder *gifEncoder = [[YYImageEncoder alloc] initWithType:YYImageTypeWebP];
     gifEncoder.loopCount=0;
     gifEncoder.quality=0.8;
     AVURLAsset*asset = [[AVURLAssetalloc]initWithURL:videoUrloptions:nil];
     int64_t scale = asset.duration.timescale;
     AVAssetImageGenerator *generator = [[AVAssetImageGenerator alloc] initWithAsset:asset];
     generator.appliesPreferredTrackTransform = YES;
     //下面两个值设为0表示精确取帧，否则系统会有优化取出来的帧时间间隔不对等
     generator.requestedTimeToleranceAfter = kCMTimeZero;
     generator.requestedTimeToleranceBefore = kCMTimeZero;
     for(inti =0; i <=4; i++) {
         CGFloatstarttime = i*0.1+0.5;
         CMTimetime =CMTimeMakeWithSeconds(starttime, (int)scale);
         NSError*error =nil;
         CMTimeactualTime;
         CGImageRefimage = [generatorcopyCGImageAtTime:timeactualTime:&actualTimeerror:&error];
         UIImage* img = [UIImageimageWithCGImage:image];
         img = [selfresizeToMaxHeight:480img:img];
         [gifEncoderaddImage:imgduration:0.1];
         CGImageRelease(image);
     }
     for(inti=3; i>=0; i--) {
         CGFloatstarttime = i*0.1+0.5;
         CMTimetime =CMTimeMakeWithSeconds(starttime, (int)scale);
         NSError*error =nil;
         CMTimeactualTime;
         CGImageRefimage = [generatorcopyCGImageAtTime:timeactualTime:&actualTimeerror:&error];
         UIImage* img = [UIImageimageWithCGImage:image];
         img = [selfresizeToMaxHeight:480img:img];
         [gifEncoderaddImage:imgduration:0.1];
         CGImageRelease(image);
     }
 

     [gifEncoderencodeToFile:webpFilePath];
     NSLog(@"生成webp成功!");
 }
 - (UIImage*)resizeToMaxHeight:(CGFloat)height img:(UIImage*)img{
     if(img.size.width
         if(img.size.height>height) {
             CGSizenewSize =CGSizeMake(height*1.0*img.size.width/img.size.height, height);
             img = [imgyy_imageByResizeToSize:newSize contentMode:UIViewContentModeScaleToFill];
         }
     }
     else{
         if(img.size.width>height) {
             CGSizenewSize =CGSizeMake(height,img.size.height*height*1.0/img.size.width);
             img = [imgyy_imageByResizeToSize:newSize contentMode:UIViewContentModeScaleToFill];
         }
     }
     returnimg;
 }

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

短视频

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

短视频

登录后参与评论

0 条评论

热度