视频画中画效果,拖动进度条可以seek到相应视频帧显示

在视频开发中,我们常常看到这样的效果,拖动进度条时,或是在进度条上方或是在屏幕中间,显示拖动进度条位置时刻的某一帧画面。

这个需求,如果是你,你会如何做?

通常一个需求,不仅要考虑实现,还有考虑一些是否有性能上影响。

下面我想到的4个方案:

1、在拖动过程中,可以通过TextureView来显示预览图,拖动进度条到某个position后,通过textureView.getBitmap()拿到对应的截图,用于展示。

2、通过MediaMetadataRetriever 只能获取你指定时间的附近的关键帧(Key frame) MediaMetadataRetriever mmr = new MediaMetadataRetriever(); mmr.setDataSource(renderOutputFilePath); mmr.getFrameAtTime(1x1000x1000,OPTION_CLOSEST_SYNC );//获取1秒附近的关键帧,注意,只是附近,获取不到精确位置的图片。但是用于预览也够了

3、通过GLSurfaceView,拖到到某个事件点后,来onDrawFrame,这种方式比较高效。

4、FFmpeg实现,获取某个位置的picture,github上有封装好的实现此功能的库,类似和MediaMetadataRetriever一样的用法,可以更精准,高效。 链接:https://github.com/wseemann/FFmpegMediaMetadataRetriever,原理就是取某个timebase的关键帧。然后回调出去展示。

需要注意的是,取帧是个耗时的操作,需要放到子线程中

FFmpegMediaMetadataRetriever mmr = new FFmpegMediaMetadataRetriever();
mmr.setDataSource(mUri);

//获取第一帧原尺寸图片
mmrc.getFrameAtTime();

//获取指定位置的原尺寸图片 注意这里传的timeUs是微秒
mmrc.getFrameAtTime(timeUs, option);

//获取指定位置指定宽高的缩略图
mmrc.getScaledFrameAtTime(timeUs, MediaMetadataRetrieverCompat.OPTION_CLOSEST, width, height);

//获取指定位置指定宽高并且旋转的缩略图
mmrc.getScaledFrameAtTime(timeUs, MediaMetadataRetrieverCompat.OPTION_CLOSEST, width, height, rotate);

Demo效果图:

原文发布于微信公众号 - 何俊林(DriodDeveloper)

原文发表时间:2018-07-22

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Google Dart

AngularDart Material Design 列表 顶

它构成了选择和菜单组件的基础。 MaterialListComponent类充当提供样式和收集项事件的能力的列表的根节点。

1172
来自专栏Java技术分享

基于Metronic的Bootstrap开发框架经验总结(4)--Bootstrap图标的提取和利用

在前面的一篇随笔《基于Metronic的Bootstrap开发框架经验总结(1)-框架总览及菜单模块的处理》介绍了菜单模块的处理,主要介绍如何动态从数据库里面获...

31310
来自专栏IT可乐

frameset标签设计页面

重要事项:不能将 <frameset></frameset> 标签放在<body></body> 标签里。且 HTML5 已经不支持 frameset 标签的使...

2329
来自专栏前端说吧

vue - v-model实现自定义样式の多选与单选

来不及研究为什么,我先直接在原来项目上赶紧建了一个test页面,先赶紧实现我的这种设想:

3901
来自专栏IMWeb前端团队

React16中的服务端渲染(译)

本文作者:IMWeb zzbozheng 原文出处:IMWeb社区 未经同意,禁止转载 React 16发布了。 React 16有很多令人兴奋的新东...

8799
来自专栏施炯的IoT开发专栏

《101 Windows Phone 7 Apps》读书笔记-Alphabet Flashcards

课程内容 Ø 幻灯片效果的切换     最近有人问我如何来写一个幻灯片的应用程序,在这个应用程序中,他们可以在不同的页面之间切换,就像在Pictures h...

2076
来自专栏前端达人

用 React 构建可复用的设计系统

React 让 web 开发简化了很多。原则上 React 基于组件的模式让代码分解和复用变得更加容易。 然而,开发者并不总是清楚如何跨项目分享他们的组件。在这...

1333
来自专栏BestSDK

年薪30万的前端面试题,你能答对几道?|附答案

HTML面试题 1.XHTML和HTML有什么区别 HTML是一种基本的WEB网页设计语言,XHTML是一个基于XML的置标语言 最主要的不同: XHTML 元...

4226
来自专栏james大数据架构

FrameLayout(框架布局)

框架布局是最简单的布局形式。所有添加到这个布局中的视图都以层叠的方式显示。第一个添加的控件被放在最底层,最后一个添加到框架布局中的视图显示在最顶层,上一层的控件...

20210
来自专栏极乐技术社区

微信小程序那点事:特性总结

一、微信小程序运行环境 1、完全封闭的环境不等于浏览器环境 2、WXML/WXSS/JS格式 3、WXML 不等于 HTML 4、WX...

2146

扫码关注云+社区

领取腾讯云代金券