阅读本文解决什么问题?

解决android 滑动列表页自动播视频中的一些技术难点。助力更好的实现类似需求。不涉及到播放器的具体编解码技术,因为各家用的播放器可能都不一样(其实是我不会~)

何时播视频最合适?

建议在滑动停止的时候播视频,还在滑动的时候建议不播。目前大厂的app基本上都是基于这个思路来做。 这么做的主要原因有两点:

就如同我们平时做listview或者RecyclerView列表页优化的时候,考虑到图片的加载涉及到io,还有少部分的decode操作,所以我们都会在滑动停止或者是滑动速度变低的时候才加载图片,降低cpu的负载和内存抖动来达到提高页面滑动流畅性的目的,所以播视频也是一样的,在列表页停止滑动的时候才播放视频是可以大大提高页面流畅性的。

即使你的播放器是自研的,但是依旧不建议在列表页滑动的时候进行视频播放,考虑如下场景:A视频正在播放,

此时进行滑动,B视频到了播放区域开始播B视频,此时A从播视频的状态切到停止播放视频的视频封面图状态,B

视频从视频封面图状态切到播放状态(甚至还有黑底的loading的状态),可以想象滑动速度一旦变快,视觉上的效果

就会非常难受,那种一顿顿的效果,因为你列表页中的item几乎全在同一时刻切换图片状态。

所以要在哪个地方开始播视频?

以RecyclerView 为例:

所以我们其实只要在这个回调中进行

这个case 的条件 就代表列表页滑动停止。 这就是我们播视频的时机了

如何合理规划播视频的区域?

我们以最流行的做法:符合人类视觉感知的,选择 从上到下列表页中第一个完整展示视频区域的 item 进行播放

有人说我们直接用findFirstCompletelyVisibleItemPosition方法不就行了?其实这样是不完美的,因为我们列表页中的item 并不只是一个单一的视频播放区域,他还有标题,描述,阅读数等等**。你的视频播放区域其实只占你整个item的一部分**

所以我们就要计算出来 视频区域完整显示 这个条件。 代码如下:

case SCROLL_STATE_IDLE:

//取第一个展示出来的item

int firstPosition = ((LinearLayoutManager) recyclerView.getLayoutManager()).findFirstVisibleItemPosition();

//最后一个展示出来的item

int lastPosition = ((LinearLayoutManager) recyclerView.getLayoutManager()).findLastVisibleItemPosition();

//开始遍历

for (int i = firstPosition; i <= lastPosition; i++) {

//取出这个列表页中的item

View itemView = recyclerView.getLayoutManager().findViewByPosition(i);

//一定要先判空 因为有时上面这个函数真的会返回null

//然后接着判断 是不是有视频播放组件 比如有的列表页除了有视频item还有纯图片的item

//所以要判定这个条件

if (itemView != null && itemView.findViewById(R.id.video_player) != null) {

VideoPlayer videoPlayer = itemView.findViewById(R.id.video_player);

if (isCanBePlayedByRect(videoPlayer)) {

safePlayVideoMethod(videoPlayer);

break;

}

}

}

复制代码private boolean isCanBePlayedByRect(VideoPlayer videoPlayer) {

Rect rect = new Rect();

//这里就可以取出来视频播放区域的坐标轴了

vivoSpaceVideoPlayer.getLocalVisibleRect(rect);

int videoHeight = vivoSpaceVideoPlayer.getHeight();

//符合这个条件就意味着 整个视频播放区域 都是完整的呈现在视频中的

final boolean playFlag = (rect.top == 0 && rect.bottom == videoHeight)

return playFlag;

}

复制代码

达成这个条件 我们基本的算法就写好了,但是这样仍旧不完美。

还有其他条件需要判定吗?

考虑另外一种复杂的情况,比如说看下面这张图:

我们可以看到列表页中的最后2个item其实 是已经完全露出屏幕的,他是符合我们上一小节的判定条件的。

但是视觉上我们仍然是觉得 这2个视频播放区域是不完整的,因为被底部的tab 遮盖住了。

甚至有的用户会把虚拟键给调出来。如下图

这样我们的item展示的区域被遮盖的就更多了。用前面一小节的算法已经不够了。

此时我们需要更进一步,针对前面的算法做一定的修改。有人会说,我们直接用底部tab的高度减一下不就行了么?

这样其实也可以,但是这样做 不太优雅,原因有2:

如果这个tab以后高度修改了,你能保证每次别人的修改你都知道么?

除了有底部tab还有虚拟键的高度啊,这样一算 不是太复杂了么?

我们这里可以用另外一种比较好的方法规避上述的问题:

直接取底部tab的top坐标(针对整个坐标轴而言)。

我们可以在activity的第一帧绘制完毕以后 取一下这个坐标:

if (mTabWidget != null && MAIN_PAGE_BOTTOM_TAB_RECT_TOP == 0) {

Rect rect = new Rect();

//注意 我们这里 使用的是getGlobalVisibleRect 而不是getLocal了

//区别就是 global取得就是 针对全屏幕的坐标轴

mTabWidget.getGlobalVisibleRect(rect);

MAIN_PAGE_BOTTOM_TAB_RECT_TOP = rect.top;

}

复制代码

到这里我们就拿到了 底部tab 这个view的 top的坐标值了。所以剩下的条件我们只要增加一条

视频播放组件的 全屏bottom的值 要大于 我们这个tab的top的值。 只有这样才能保证 我们视频的view 是没有被遮盖的

private boolean isCanBePlayedByRect(VideoPlayer videoPlayer) {

Rect rect = new Rect();

vivoSpaceVideoPlayer.getLocalVisibleRect(rect);

Rect gRect = new Rect();

//把视频view的全局 bottom坐标 也取出来 与tab的top坐标做对比

vivoSpaceVideoPlayer.getGlobalVisibleRect(gRect);

int videoHeight = vivoSpaceVideoPlayer.getHeight();

final boolean playFlag = (rect.top == 0 && rect.bottom == videoHeight && gRect.bottom < MAIN_PAGE_BOTTOM_TAB_RECT_TOP);

return playFlag;

}

复制代码

什么时候停止播放?

有人说 我们用

这个回调 会简单一些?

其实这样也是不完美的,还是前面那个问题,有些item 他就是有其他要素要展示, 就会出现 视频区域已经看不到了,被滑走了,

此时理应停止播放,但是因为还有比如视频阅读数等东西恰好在列表可是区域范围之内 导致这个item无法进入这个回调。

为了解决这个问题,我们使用如下方案:

在列表页滑动的时候,判定视频区域是否全部在列表页之外,人已经看不到了,符合这个条件就停止播放视频

代码如下:

int position = 0;

if (dy > 0) {

//dy>0 代表 item 从下往上 被划出屏幕的 所以我们只需要判定最上面一个可视的item即可

position = ((LinearLayoutManager) mRecyclerView.getLayoutManager()).findFirstVisibleItemPosition();

} else if (dy < 0) {

//dy>0 代表 item 从上往下 被划出屏幕的 所以我们只需要判定最下面一个可视的item即可

position = ((LinearLayoutManager) mRecyclerView.getLayoutManager()).findLastVisibleItemPosition();

}

View itemView = mRecyclerView.getLayoutManager().findViewByPosition(position);

if (itemView != null) {

VideoPlayer videoPlayer = itemView.findViewById(R.id.video_player);

if (videoPlayer != null) {

Rect rect = new Rect();

Rect gRect = new Rect();

vivoSpaceVideoPlayer.getLocalVisibleRect(rect);

vivoSpaceVideoPlayer.getGlobalVisibleRect(gRect);

//item 从下往上划出屏幕 的判定条件

final boolean stopFlagForDownToUp = (dy > 0 && rect.bottom - rect.top <= STOP_FLAG_PX_VALUE);

//item 从上往下划出屏幕的 判定条件 ----有底部tab

final boolean stopFlagForUptoDown1 = (dy < 0 && gRect.top > (MAIN_PAGE_BOTTOM_TAB_RECT_TOP - STOP_FLAG_PX_VALUE));

//item 从上往下划出屏幕的 判定条件 ----没有底部tab

final boolean stopFlagForUptoDown2 = (dy < 0 && rect.top != 0);

if (stopFlagForDownToUp || stopFlagForUptoDownHasParent || stopFlagForUptoDownNoParent) {

videoPlayer.release();

}

}

}

复制代码

这里的算法比较简单,我就不一一解释了,唯一要说一下的就是这个

//定义个阈值 停止播放判定使用

private static final int STOP_FLAG_PX_VALUE = 5;

复制代码

为什么要加一个这个?因为针对全屏坐标而言,有时候滑动快了并不会经过某一个值,所以我们要有一定的余量。

例如 我们条件是 当我们的视频区域的top坐标(滑动的时候会从例如 1900开始递增) 大于 tab的top坐标(假设这个值是2100)的时候 就判定被遮盖了 停止滑动,

并不代表视频区域的top坐标是 1900 1901 1902 这样1px 1px的递增到2100的。 有时候他会忽略掉,比如某些手机经常出现1997 1998 1999 2102 等等 情况,所以这里我们要一定的余量。

确保 视频一定会被停止播放。

怎么确保列表页第一次被渲染的时候就自动播放?

当我们网络数据回来以后 ,我们会把值set到RecyclerView 里面,然后notify,此时界面就有展示了,但是这个时候

如果用户没有滑动,又恰好第一屏的item有一个是视频,那我们怎么触发这种条件的自动播放呢?

其实RecyclerView有个特性就是 第一次渲染完毕以后 onScrolled会被执行一次,所以我们只要在这里做个标志位

然后去播放一次 就行了。

@Override

public void onScrolled(@NonNull RecyclerView recyclerView, int dx, int dy) {

if (!mRvInitFlag) {

playFirstVideoView();

mRvInitFlag = true;

return;

}

复制代码

关于找一找教程网

本站文章仅代表作者观点,不代表本站立场,所有文章非营利性免费分享。

本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章,希望广大程序员努力学习,让我们用科技改变世界。

[Android仿京东天猫列表页播视频看这一篇就足够了]http://www.zyiz.net/tech/detail-113729.html

android自定义视频列表,Android仿京东天猫列表页播视频看这一篇就足够了相关推荐

  1. 仿京东天猫商品详情页

    1.参考借鉴 Android仿京东商品详情页上拉查看图文详情 [模仿淘宝.京东.蘑菇街商品详情页,可嵌套ListView.WebView.ViewPager.FragmentTabhost等](htt ...

  2. android 自定义输入法布局,Android自定义输入法使用方法

    Android自定义输入法使用方法 时间:2017-04-21     来源:Android开发学习网 对于Android用户而言,一般都会使用第三方的输入法.可是在输入密码时(尤其是支付相关的密码) ...

  3. Android自定义view摇杆,Android自定义View实现游戏摇杆键盘的方法示例

    前言 本文主要给大家介绍的是关于Android自定义View实现游戏摇杆键盘的相关内容,为什么会有这篇文章呢?因为在之前的一个项目,操作方向的方式为上下左右,左上需要同时按住左键和右键的方式进行操作. ...

  4. android 自定义dialog样式,Android 自定义dialog类

    首先定制style样式 styles.xml 加入自定义样式 @null true true true @color/transparent @color/transparent true 0.6 在 ...

  5. 静态HTML网页设计作品——仿京东-海贼王(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 wweb前端期末大作业

    HTML5期末大作业:海贼王影视网站设计--仿京东-海贼王(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 wweb前端期末大作业 文章目录 HTML5期末大作业:海贼王影视 ...

  6. # HTML5期末大作业:海贼王影视网站设计——仿京东-海贼王(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 wweb前端期末大作业 网页设计实例 企业网站制作

    HTML5期末大作业:海贼王影视网站设计--仿京东-海贼王(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 wweb前端期末大作业 网页设计实例 企业网站制作 常见网页设计作 ...

  7. Android中实现简单的仿京东详情页面

    前言: 之前做过一个商城项目,实现了类似京东的详情页,采用Coordinatorlatout+Appbarlayout+toolbar实现,实现的效果主要是沉浸式状态栏和标题栏,当图片滑动时标题栏和按 ...

  8. android 自定义园动画,Android 自定View实现仿QQ运动步数圆弧及动画效果

    在之前的Android超精准计步器开发-Dylan计步中的首页用到了一个自定义控件,和QQ运动的界面有点类似,还有动画效果,下面就来讲一下这个View是如何绘制的. 1.先看效果图 2.效果图分析 功 ...

  9. Android自定义记账软键盘(仿鲨鱼记账的记账功能)

    鲨鱼记账App效果: 本文实现的效果图: 本文 不是什么原理分析,属于使用工具,不再具体分析.直接贴图贴代码了 自定义软键盘的XML模版 注:android:codes的值,请参考ASCII < ...

最新文章

  1. mysql jdbc dbcp_连接数据库 JDBC、DBCP、JNDI
  2. 高仿网易新闻频道选择器
  3. Jquery中使用setInterval和setTimeout
  4. LeetCode MySQL 1142. 过去30天的用户活动 II
  5. 任正非:华为三十年大限快到了,想不死就得新生
  6. Asp.net MVC Action大全(转)
  7. ios7中使用scrollview来横向滑动图片,自动产生偏移竖向的偏移 问题
  8. C语言正交表测试用例,用正交表设计测试用例
  9. 学习Java过程中创建动态数组的两种方法比较
  10. 网赚项目之站群第一课如何利用站群快速赚钱
  11. ROS配置ipv6方法
  12. 线阵相机参数选择 照明方式
  13. java 坐标纠偏_[Java教程]Java百度地图经纬度纠偏
  14. 北京链家买二手房的经历与感受
  15. V2X消息之SPAT消息解读
  16. python 分布式 调度 管理_分布式云调度处理系统
  17. 庖丁解牛linux内核 百度云,庖丁解牛Linux内核分析笔记-1
  18. Ubuntu20.04LTS 安装配置
  19. 一线城市软件测试工资——你拖后腿了吗
  20. 2020 中青杯思路+代码

热门文章

  1. 设计模式 | 工厂方法模式(Factory Method)
  2. ERROR 1062(23000):Duplicate entry %-root for key PRIMARY
  3. 中兴服务器R5300 G4 Raid配置
  4. Apache Maven项目提供的Dependency插件详解
  5. 使用SFTPGo搭建SFTP服务器
  6. windows7桌面找不到计算机名,win7系统桌面上的图标没有文件名如何解决?
  7. python pdf 转 图片、pdf 转 word、 word 转 pdf
  8. Nexus3首次登录默认密码
  9. 基于遗传算法解决TSP问题(Matlab代码实现)
  10. 微信小程序云开发数据库模糊查询