您现在的位置是：首页 > 文章详情
【Android 进阶】仿抖音系列之列表播放视频（二）
日期：2018-10-14点击：543收藏
上一篇中，我们实现了仿抖音上下翻页切换视频的效果，详见【Android 进阶】仿抖音系列之翻页上下滑切换视频（一），这一篇，我们来实现抖音列表播放视频。
之前也在github上找到一个demo,这是链接，原理和我的一样，只是用起来比较麻烦。。。
先说下原理，这里用到了RecyclerView的onScrolled和onScrollStateChanged 监听，在onScrolled中判断当前可见的position，结合onScrollStateChanged中返回的当前RecyclerView的滑动状态，当是拖动和停止滚动时，可以播放；当是惯性滑动时，暂停播放。
关于RecyclerView3种滑动状态，RecyclerView.SCROLL_STATE_IDLE，RecyclerView.SCROLL_STATE_DRAGGING，RecyclerView.SCROLL_STATE_SETTLING，大家可以自行百度，这里不做过多的描述了。
rvList.addOnScrollListener(new RecyclerView.OnScrollListener() {
@Override
public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
LinearLayoutManager layoutManager = (LinearLayoutManager) recyclerView.getLayoutManager();
firstVisibleItem = layoutManager.findFirstVisibleItemPosition();
lastVisibleItem = layoutManager.findLastVisibleItemPosition();
}
@Override
public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
switch (newState) {
case RecyclerView.SCROLL_STATE_IDLE://停止滚动
/**在这里执行，视频的自动播放与停止*/
autoPlayVideo(recyclerView);
break;
case RecyclerView.SCROLL_STATE_DRAGGING://拖动
autoPlayVideo(recyclerView);
break;
case RecyclerView.SCROLL_STATE_SETTLING://惯性滑动
JZVideoPlayer.releaseAllVideos();
break;
}
}
});
布局就是一个RecyclerView，就不贴了，下面是Adapter
urlList = new ArrayList<>();
urlList.add("http://image.38.hn/public/attachment/201805/100651/201805181532123423.mp4");
urlList.add("http://image.38.hn/public/attachment/201803/100651/201803151735198462.mp4");
urlList.add("http://image.38.hn/public/attachment/201803/100651/201803150923220770.mp4");
urlList.add("http://image.38.hn/public/attachment/201803/100651/201803150922255785.mp4");
urlList.add("http://image.38.hn/public/attachment/201803/100651/201803150920130302.mp4");
urlList.add("http://image.38.hn/public/attachment/201803/100651/201803141625005241.mp4");
urlList.add("http://image.38.hn/public/attachment/201803/100651/201803141624378522.mp4");
urlList.add("http://image.38.hn/public/attachment/201803/100651/201803131546119319.mp4");
videoAdapter = new ListVideoAdapter(urlList);
rvList.setLayoutManager(new LinearLayoutManager(ListActivity.this));
rvList.setAdapter(videoAdapter);
Adapter这里自己做了个封装，可以用原生或者其他封装比较好的，这里就不贴了
class ListVideoAdapter extends BaseRecAdapter<String, VideoViewHolder> {
public ListVideoAdapter(List<String> list) {
super(list);
}
@Override
public void onHolder(VideoViewHolder holder, String bean, int position) {
holder.mp_video.setUp(bean, JZVideoPlayerStandard.CURRENT_STATE_NORMAL);
if (position == 0) {
holder.mp_video.startVideo();
}
Glide.with(context).load(bean).into(holder.mp_video.thumbImageView);
holder.tv_title.setText("第" + position + "个视频");
}
@Override
public VideoViewHolder onCreateHolder() {
return new VideoViewHolder(getViewByRes(R.layout.item_video));
}
}
public class VideoViewHolder extends BaseRecViewHolder {
public View rootView;
public MyVideoPlayer mp_video;
public TextView tv_title;
public VideoViewHolder(View rootView) {
super(rootView);
this.rootView = rootView;
this.mp_video = rootView.findViewById(R.id.mp_video);
this.tv_title = rootView.findViewById(R.id.tv_title);
}
}
布局如下
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="@+id/tv_title"
android:layout_width="match_parent"
android:layout_height="50dp"
android:gravity="center"
android:textSize="18sp" />
<com.ch.doudemo.widget.MyVideoPlayer
android:id="@+id/mp_video"
android:layout_width="match_parent"
android:layout_height="500dp" />
</LinearLayout>
这里使用的是 JiaoZiVideoPlayer，其中MyVideoPlayer 是之前公司项目需要，对其做的个性化定制，这里下面再说。
下来就是本篇的核心，通过判断可见项，暂停/播放视频，代码如下
/**
* 自动播放
*/
private void autoPlayVideo(RecyclerView recyclerView) {
if (firstVisibleItem == 0 && lastVisibleItem == 0 && recyclerView.getChildAt(0) != null) {
MyVideoPlayer videoView = null;
if (recyclerView != null && recyclerView.getChildAt(0) != null) {
videoView = recyclerView.getChildAt(0).findViewById(R.id.mp_video);
}
if (videoView != null) {
if (videoView.currentState == JZVideoPlayer.CURRENT_STATE_NORMAL || videoView.currentState == JZVideoPlayer.CURRENT_STATE_PAUSE) {
videoView.startVideo();
}
}
}
for (int i = 0; i <= lastVisibleItem; i++) {
if (recyclerView == null || recyclerView.getChildAt(i) == null) {
return;
}
MyVideoPlayer
videoView = recyclerView.getChildAt(i).findViewById(R.id.mp_video);
if (videoView != null) {
Rect rect = new Rect();
//获取视图本身的可见坐标，把值传入到rect对象中
videoView.getLocalVisibleRect(rect);
//获取视频的高度
int videoHeight = videoView.getHeight();
if (rect.top <= 100 && rect.bottom >= videoHeight) {
if (videoView.currentState == JZVideoPlayer.CURRENT_STATE_NORMAL || videoView.currentState == JZVideoPlayer.CURRENT_STATE_PAUSE) {
videoView.startVideo();
}
return;
}
JZVideoPlayer.releaseAllVideos();
} else {
JZVideoPlayer.releaseAllVideos();
}
}
}
顺便说一下，为啥用JiaoZiVideoPlayer，就是因为 JZVideoPlayer.releaseAllVideos();，一句代码就可以暂停所有的播放器，否则自己要实现这个还是比较麻烦的
到这里，大概功能已经实现了，下面说说定制化的功能。需要去掉原播放器的进度条、按钮，点击视频，全屏播放，再次点击取消全屏。
我的做法是添加一个透明度为0的布局，覆盖在播放器上，这样实际上点击的是我们添加的布局
这里有个小技巧，可以粘贴源码中的布局，重要的事情说三遍，不要修改文件名、不要修改文件名、不要修改文件名，找到相关布局，设置android:visibility="gone"，这样我们的项目中的布局就会替换掉原来的布局。
完整代码如下
jz_layout_standard.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/black"
android:descendantFocusability="blocksDescendants">
<FrameLayout
android:id="@+id/surface_container"
android:layout_width="match_parent"
android:layout_height="match_parent">
</FrameLayout>
<ImageView
android:id="@+id/thumb"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:background="#000000"
android:scaleType="fitCenter" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="gone">
<LinearLayout
android:id="@+id/layout_bottom"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:background="@drawable/jz_bottom_bg"
android:gravity="center_vertical"
android:orientation="horizontal"
android:visibility="invisible">
<TextView
android:id="@+id/current"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="14dp"
android:text="00:00"
android:textColor="#ffffff" />
<SeekBar
android:id="@+id/bottom_seek_progress"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_weight="1.0"
android:background="@null"
android:max="100"
android:maxHeight="1dp"
android:minHeight="1dp"
android:paddingBottom="8dp"
android:paddingLeft="12dp"
android:paddingRight="12dp"
android:paddingTop="8dp"
android:progressDrawable="@drawable/jz_bottom_seek_progress"
android:thumb="@drawable/jz_bottom_seek_thumb" />
<TextView
android:id="@+id/total"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="00:00"
android:textColor="#ffffff" />
<TextView
android:id="@+id/clarity"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:paddingLeft="20dp"
android:text="clarity"
android:textAlignment="center"
android:textColor="#ffffff" />
<ImageView
android:id="@+id/fullscreen"
android:layout_width="52.5dp"
android:layout_height="fill_parent"
android:paddingLeft="14dp"
android:paddingRight="14dp"
android:scaleType="centerInside"
android:src="@drawable/jz_enlarge" />
</LinearLayout>
</LinearLayout>
<ProgressBar
android:id="@+id/bottom_progress"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="match_parent"
android:layout_height="1.5dp"
android:layout_alignParentBottom="true"
android:max="100"
android:progressDrawable="@drawable/jz_bottom_progress" />
<ImageView
android:id="@+id/back_tiny"
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_marginLeft="6dp"
android:layout_marginTop="6dp"
android:background="@drawable/jz_click_back_tiny_selector"
android:visibility="gone" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:visibility="gone">
<RelativeLayout
android:id="@+id/layout_top"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:background="@drawable/jz_title_bg"
android:gravity="center_vertical">
<ImageView
android:id="@+id/back"
android:layout_width="23dp"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:paddingLeft="12dp"
android:paddingStart="12dp"
android:scaleType="centerInside"
android:src="@drawable/jz_click_back_selector" />
<TextView
android:id="@+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginEnd="12dp"
android:layout_marginLeft="12dp"
android:layout_marginRight="12dp"
android:layout_marginStart="12dp"
android:layout_toEndOf="@+id/back"
android:layout_toLeftOf="@+id/battery_time_layout"
android:layout_toRightOf="@+id/back"
android:ellipsize="end"
android:maxLines="2"
android:textColor="#ffffff"
android:textSize="18sp" />
<LinearLayout
android:id="@+id/battery_time_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginEnd="14dp"
android:layout_marginRight="14dp"
android:gravity="center_vertical"
android:orientation="vertical">
<ImageView
android:id="@+id/battery_level"
android:layout_width="23dp"
android:layout_height="10dp"
android:layout_gravity="center_horizontal"
android:background="@drawable/jz_battery_level_10" />
<TextView
android:id="@+id/video_current_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:gravity="center_vertical"
android:maxLines="1"
android:textColor="#ffffffff"
android:textSize="12.0sp" />
</LinearLayout>
</RelativeLayout>
</LinearLayout>
<ProgressBar
android:id="@+id/loading"
android:layout_width="@dimen/jz_start_button_w_h_normal"
android:layout_height="@dimen/jz_start_button_w_h_normal"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:indeterminateDrawable="@drawable/jz_loading"
android:visibility="invisible" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:visibility="gone">
<LinearLayout
android:id="@+id/start_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_gravity="center_vertical">
<ImageView
android:id="@+id/start"
android:layout_width="@dimen/jz_start_button_w_h_normal"
android:layout_height="@dimen/jz_start_button_w_h_normal"
android:src="@drawable/jz_click_play_selector" />
</LinearLayout>
<TextView
android:id="@+id/replay_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/start_layout"
android:layout_centerHorizontal="true"
android:layout_marginTop="6dp"
android:text="@string/replay"
android:textColor="#ffffff"
android:textSize="12sp"
android:visibility="invisible" />
<LinearLayout
android:id="@+id/retry_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:gravity="center_horizontal"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/video_loading_faild"
android:textColor="@android:color/white"
android:textSize="14sp" />
<TextView
android:id="@+id/retry_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:background="@drawable/retry_bg"
android:paddingBottom="4dp"
android:paddingLeft="9dp"
android:paddingRight="9dp"
android:paddingTop="4dp"
android:text="@string/click_to_restart"
android:textColor="@android:color/white"
android:textSize="14sp" />
</LinearLayout>
</LinearLayout>
<RelativeLayout
android:id="@+id/rl_touch_help"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:alpha="0"
android:background="@color/cf0f2f7"></RelativeLayout>
<LinearLayout
android:id="@+id/ll_start"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:padding="15dp"
android:visibility="gone">
<ImageView
android:id="@+id/iv_start"
android:layout_width="16dp"
android:layout_height="18dp"
android:background="@mipmap/stop" />
</LinearLayout>
</RelativeLayout>
还需要实现循环播放，这个比较简单，重写onAutoCompletion方法，当其播放完成时，继续播放即可。
@Override
public void onAutoCompletion() {
thumbImageView.setVisibility(View.GONE);
if (currentScreen == SCREEN_WINDOW_FULLSCREEN) {
onStateAutoComplete();
setUp((String) getCurrentUrl(), JZVideoPlayer.SCREEN_WINDOW_FULLSCREEN);
} else {
super.onAutoCompletion();
setUp((String) getCurrentUrl(), JZVideoPlayer.CURRENT_STATE_NORMAL);
}
//循环播放
startVideo();
}
到这里，列表播放这个功能已经完成了。
最后，献上完整代码。Github
关注公众号
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有，本站原创内容转载请注明来源。
-
上一篇
Android开发 - ImageView加载Base64编码的图片
在我们开发应用的过程中，并不是所有情况下都请求图片的URL或者加载本地图片，有时我们需要加载Base64编码的图片。这种情况出现在服务端需要动态生成的图片，比如： 二维码 图形验证码 … 这些应用场景有个共同点就是，这些图片都是由服务器动态生成，并不需要生成后保存成文件再返回给客户端。 Android中ImageView加载Base64图片其实非常简单，并不需要引入第三方库，方法如下： import android.util.Base64; # 代码片段 String base64 = "data:image/png;base64......" byte[] decodedString = Base64.decode(base64, Base64.DEFAULT); Bitmap decodedByte = BitmapFactory.decodeByteArray(decodedString, 0, decodedString.length); imageView.setImageBitmap(decodedByte); 这样就可以将Base64的图片加载到ImageView中了。其...
-
下一篇
Android 自用 App保活——音乐播放保活适配8.0 （贼好用）
又是好久没有积累东西了。惭愧，惭愧。。。手动哭泣。闲话说到这里，下面我介绍一种新的 App 保活方式哈，目前用小米家族手机 涵盖 Android 5.0 到 Android 8.1家族的测试。结论是，不主动干掉，是死不了的。但是主动干掉了，是活不了的。 之前介绍介绍了 双进程保活，我还大言不惭的 适配 8.0 。但是，从 Android 6.0 之后这个方法及其不好用，说死就死，华为，小米 分分钟 弄死笔者的 App 。 而且 最恶心的事情，居然 ANR 。 笔者对现在那些闭着眼睛 抄博客 的大佬实在不敢恭维了。对了，之前的笔记地址为：自己用到的Android 双服务保活（适配8.0）, Android 6.0 以上不建议使用 ！！！好了，下面说说，服务播放音乐，保活的基本原理吧。 一、保活原理 1、准备一首无声音乐（文末我会提供）； 2、在认为可以进行保活的位置 进行激活服务 播放（笔者在MainActivity 内启动 服务）； 3、在服务的 onCreate（）方法内 初始化 MediaPlayer 对象； 4、将 onBind（）方法返回值置空； 5、在 onStartComm...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
扫描即可查看该文章
微信收款码
支付宝收款码