专栏首页用户4669341的专栏IOS开发:仿抖音短视频系统生成webp动图客户端解决方案
原创

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

前言


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

那么,我们该如何权衡呢?

截取视频帧

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

 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;
 }

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 微信公开课:解密小程序视频客服解决方案

    ? 就在前天(1月9日),为期两天的微信公开课PRO又一次如期而至。除了微信之父张小龙的4小时演说外,这次微信公开课PRO还带来了各行业中关于微信和微信小程序...

    腾讯云视频
  • 腾讯云直播 新年新定价!

    ? ? 随着新年的倒计时,2019年终于来临。过去的一年里,腾讯云直播不断地进行功能的迭代更新和技术的升级,竭力为客户提供更加优质、稳定、安全的直播服务。 感...

    腾讯云视频
  • 腾讯回应封杀质疑 腾讯公关总监说了这样一番话

    腾讯回应封杀质疑是怎么回事?腾讯为什么封杀三款新社交app?15日,三款新社交软件发布,分别是王欣的马桶MT、今日头条的多闪、罗某的聊天宝,但上线后全部被微信屏...

    哲洛不闹
  • 资本风口退潮,商业变现涌动:新周期里短视频的变与不变

    经历了资本的介入、巨头的混战之后,短视频行业的发展已经从格局之战转移到了变现之战,一场考验短视频平台变现能力的大战正在徐徐拉开战幕。以抖音、快手为代表的短视频平...

    孟永辉
  • 【AI与内容创新】2018腾讯芒种特训营

    拿破仑曾说“统治世界的是想象力”,而对于充满好奇心又孜孜不倦的媒体人来说,10年后的内容行业究竟是什么样子?其背后的逻辑又会发生怎样的变革?AI给了我们通向未...

    腾讯大数据
  • 小视频app开发过程中的两种编码标准

    对于大多数直播平台来讲,带宽构成了其成本的绝大部分。而对于短视频平台来讲,带宽成本所占的比例可能会更高。在小视频app开发过程中,经常会遇到各种各样的问题,再加...

    q3557873521
  • 腾讯视频云 LiteAVSDK 更新公告

    腾讯视频云 LiteAVSDK 升级到 5.4.6097 SDK 内核优化 iOS&Android:优化网络协议算法,直播推流抗 30% 丢包无压力; iOS...

    腾讯云视频
  • 带你脱离视频测试的坑

    小编这次分享主要是视频相关的专项测试,音频相关的暂不涉及。 我们直接切入正题,关于视频通话质量对比,需要一些对比项,这里是从以下5个方面进行数据对比:码率、帧...

    腾讯云视频
  • 云端混流转码--直播连麦技术解决方案

    ? 春运来了,在各地车站码头的年味就是回家的味道。无论人潮多拥挤、路途多艰辛,为了回到温暖的目的地——家,对于在外漂泊的游子来说,路上辛苦点又算什么。小编为旅...

    腾讯云视频
  • 腾讯云直播 新年新定价!

    ? ? 2018已经过去,新年越来越近。在过去的一年里,腾讯云直播不断地进行功能的迭代更新和技术的升级,竭力为客户提供更加优质、稳定、安全的直播服务。 感谢云...

    腾讯云视频

扫码关注云+社区

领取腾讯云代金券