Android 仿淘宝京东商品详情视频+图片与图片第一帧获取

近日项目有个新需求就是把原本的商品详情只有图片展示,改为视频+图片方式展示.

此博客只提供记录,与思路具体根据自己需求实现.首先想到的是Google搜索下别人的实现方式来参考实现发现不怎么适合项目需求,用饺子视频实现视频播放功能后发现视频的封面饺子视频是采用图片来做视频封面的.在适配器里面根据视频格式来判断是视频还是图片,或者根据后台字段来判断,这个根据后台返回数据来处理.

   参考案例 视频图片@Overridepublic Object instantiateItem(ViewGroup container, final int position) {String url = imgUrls.get(position % imgUrls.size());if (!url.contains(".mp4")) {ImageView imageView = new ImageView(context);imageView.setScaleType(ImageView.ScaleType.FIT_CENTER);
//            imageView.setScaleType(ImageView.ScaleType.FIT_XY);Glide.with(context).load(url).into(imageView);container.addView(imageView);imageView.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {
//                    bannerListener.bannerClick(position % imgUrls.size());}});return imageView;} else {
//            final VideoView videoView = new VideoView(mContext);
//            Uri uri = Uri.parse(url);
//            videoView.setVideoURI(uri);
//            videoView.start();JZVideoPlayerStandard jzVideoPlayerStandard = new JZVideoPlayerStandard(context);jzVideoPlayerStandard.setUp(url, JZVideoPlayerStandard.SCREEN_WINDOW_NORMAL, "播放测试");
//        Glide.with(this).load("http://jzvd-pic.nathen.cn/jzvd-pic/1bb2ebbe-140d-4e2e-abd2-9e7e564f71ac.png").into(myJZVideoPlayerStandard.thumbImageView);Glide.with(context).load(imgUrls.get(1)).into(jzVideoPlayerStandard.thumbImageView);JZVideoPlayer.setJzUserAction(null);container.addView(jzVideoPlayerStandard);
//            videoView.setOnCompletionListener(new MediaPlayer.OnCompletionListener() {
//                @Override
//                public void onCompletion(MediaPlayer mp) {bannerListener.playEnd();
//                }
//            });return jzVideoPlayerStandard;}}public void setBannerListener(BannerListener bannerListener) {this.bannerListener = bannerListener;}

此时就差一个视频封面,一开始采用了自带的来获取Bitmap方式再用Glide来展示,

public static Bitmap getBitmapFormUrl(String url) {Bitmap bitmap = null;MediaMetadataRetriever retriever = new MediaMetadataRetriever();try {if (Build.VERSION.SDK_INT >= 14) {retriever.setDataSource(url, new HashMap<String, String>());} else {retriever.setDataSource(url);}/*getFrameAtTime()--->在setDataSource()之后调用此方法。 如果可能，该方法在任何时间位置找到代表性的帧，并将其作为位图返回。这对于生成输入数据源的缩略图很有用。**/bitmap = retriever.getFrameAtTime();} catch (IllegalArgumentException e) {e.printStackTrace();} finally {try {retriever.release();} catch (IllegalArgumentException e) {e.printStackTrace();}}return bitmap;
}

发现是可以实现基本功能,但是进去详情的时候总是感觉卡了一下才加载完成,后面发现采用自带的获取视频首帧占用内存特别大,容易OOM,

public static void loadVideoScreenshot(final Context context, String uri, ImageView imageView, long frameTimeMicros) {RequestOptions requestOptions = RequestOptions.frameOf(frameTimeMicros);requestOptions.set(FRAME_OPTION, MediaMetadataRetriever.OPTION_CLOSEST);requestOptions.transform(new BitmapTransformation() {@Overrideprotected Bitmap transform(@NonNull BitmapPool pool, @NonNull Bitmap toTransform, int outWidth, int outHeight) {return toTransform;}@Overridepublic void updateDiskCacheKey(MessageDigest messageDigest) {try {messageDigest.update((context.getPackageName() + "RotateTransform").getBytes("utf-8"));} catch (Exception e) {e.printStackTrace();}}});Glide.with(context).load(uri).apply(requestOptions).into(imageView);
}

最后实现的方式是以,饺子视频+Glide加载视频首帧的方式实现.核心部分代码

 //核心代码
JZVideoPlayerStandard jzVideoPlayerStandard=new JZVideoPlayerStandard(context);String url = imagePath[position % imagePath.length];LogUtils.e("m_tag_123", "返回图片地址为:" + url);if (!url.contains(".mp4")) {   //图片RequestBuilder<Drawable> thumbnail = ImageCacheUtils.getDrawableRequest(context, productId);if (thumbnail != null && position == 0 && requestOptions != null) {Glide.with(context).load(imagePath[position % imagePath.length] + ImageMaxUtils.ProductDetail_vpPic).apply(requestOptions).into(iv);} else {Glide.with(context).load(imagePath[position % imagePath.length] + ImageMaxUtils.ProductDetail_vpPic).thumbnail(Glide.with(context).load(imagePath[position % imagePath.length] + ImageMaxUtils.thumbnail_Request)).into(iv);}try {if (ivList.size() <= (position % imagePath.length)) {ivList.add(iv);}} catch (Exception e) {e.printStackTrace();}container.addView(view);iv.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {if (listener != null) {listener.productBannarOnItemOnclick(position % imagePath.length);}}});return view;} else {    //视频jzVideoPlayerStandard = new JZVideoPlayerStandard(context);jzVideoPlayerStandard.setUp(url, JZVideoPlayerStandard.SCREEN_WINDOW_NORMAL, "");
//            Glide.with(context).load("http://p.qpic.cn/videoyun/0/2449_43b6f696980311e59ed467f22794e792_1/640").into(jzVideoPlayerStandard.thumbImageView);  //网络图片设置
//            Drawable drawable = new BitmapDrawable(context.getResources(), Img_video);
//            Glide.with(context).load(drawable).into(jzVideoPlayerStandard.thumbImageView);  //使用本地截取视频预览图loadVideoScreenshot(context, url, 1);   //使用Glide截取视频预览图JZVideoPlayer.setJzUserAction(null);container.addView(jzVideoPlayerStandard);return jzVideoPlayerStandard;}/*** 使用Glide* @param context* @param uri* @param frameTimeMicros*/@SuppressLint("CheckResult")public static void loadVideoScreenshot(final Context context, String uri, long frameTimeMicros) {RequestOptions requestOptions = RequestOptions.frameOf(frameTimeMicros);requestOptions.set(FRAME_OPTION, MediaMetadataRetriever.OPTION_CLOSEST);requestOptions.transform(new BitmapTransformation() {@Overrideprotected Bitmap transform(@NonNull BitmapPool pool, @NonNull Bitmap toTransform, int outWidth, int outHeight) {return toTransform;}@Overridepublic void updateDiskCacheKey(MessageDigest messageDigest) {try {messageDigest.update((context.getPackageName() + "RotateTransform").getBytes("utf-8"));} catch (Exception e) {e.printStackTrace();}}});Glide.with(context).load(uri).apply(requestOptions).into(jzVideoPlayerStandard.thumbImageView);}

最终实际效果:

Android 仿淘宝京东商品详情视频+图片与图片第一帧获取相关推荐

Android 仿淘宝京东商品详情页阻力翻页效果
原文链接:http://code.taobao.org/p/android-example/diff/46/trunk/%E5%95%86%E5%9F%8E%E8%AF%A6%E6%83%85/src ...
Android仿淘宝京东商品规格参数颜色筛选
Android 选择商品属性sku 最近项目中使用SKU属性查询,类似淘宝京东商品的选择,在网上查询了弄了几个源码看看,发现还是实现不了多属性选择问题,再原基础上改动相当费事,所以想干脆自己处理这个问 ...
仿淘宝京东商品规格属性选择的最简单实现
仿淘宝京东商品规格属性选择的最简单实现商城里面的规格选择,网上大部分是自定义控件实现的,显得很是麻烦,而我的实现方式是大家最常用的控件RecyclerView,特点是性能好,简单.废话不多说,先看实 ...
android 自定义ViewGroup实现仿淘宝的商品详情页
最近公司在新版本上有一个需要, 要在首页添加一个滑动效果, 具体就是仿照X宝的商品详情页, 拉到页面底部时有一个粘滞效果, 如下图 X东的商品详情页,如果用户继续向上拉的话就进入商品图文描述界面: 刚 ...
自己定义ViewGroup实现仿淘宝的商品详情页
近期公司在新版本号上有一个须要. 要在首页加入一个滑动效果, 详细就是仿照X宝的商品详情页, 拉到页面底部时有一个粘滞效果, 例如以下图 X东的商品详情页,假设用户继续向上拉的话就进入商品图文描写叙述 ...
Android 仿淘宝京东等我的订单界面及任意列表拓展
概述目前像淘宝及展示列表等都有多个item展示的需求,可能大多数如果没做过,第一眼就是ListView去嵌套ListView,虽然这样是可以完成,但是这样做会导致手机过度绘制,为什么呢?因为当一个I ...
vue仿淘宝京东商品多条件筛选（vue实现）
<template><div id="warp">你选择的是:<mark v-for="(item,index) in arr"& ...
Android仿淘宝、京东Banner滑动查看图文详情
文章目录写在前面效果图原理分析核心代码源码地址写在前面本文基于 ViewPager2 实现的 Banner 效果,进而实现了仿淘宝.京东Banner滑动至最后一页时继续滑动来查看图文详情 ...
Android 仿淘宝商品详情页下拉足迹Demo
DropDownMultiPager 仿淘宝等商品详情页下拉足迹效果SimpleDemo 可colne之后看MainActivity的调用,方便二次开发依赖 compile 'com.nineold ...

Android 仿淘宝京东商品详情视频+图片与图片第一帧获取

Android 仿淘宝京东商品详情视频+图片与图片第一帧获取相关推荐

最新文章

热门文章