此文章将会讲解在RecyclerView播放Video
- 布局的设计
- 细节
Tips
此文章仅供学习使用，有些细节还没认真fix的，望大家不要太在意细节，主要列表视频播放功能已实现，thanks！
绪论
读什么什么书，不如走什么什么路。虽然上一篇已经说了怎样单一使用VideoView和TextureVideoView这两个控件，注意是单一使用，并没有介绍在列表中使用它们的细节，如果掌握列表中使用它们，还是需要实践的，而不是~想当然。类似视频列表的App，可下载“有点意思”来玩下。
再次提醒~对于我们开发者挺值得庆幸的事情是，Google Developers中国网站（https://developers.google.cn/）在近期正式发布了，从此中国小伙伴们不用翻墙也可以上谷歌官网学习了。注意网站后缀为.cn。
布局的设计
直接代码
xml核心布局
<FrameLayout
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_marginTop="15dp">
<com.facebook.drawee.view.SimpleDraweeView
android:id="@+id/iv_first_frame"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<com.sprylab.android.widget.TextureVideoView
android:id="@+id/videoView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<android.support.v4.widget.ContentLoadingProgressBar
android:id="@+id/progressBar"
style="?android:attr/progressBarStyleLarge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center" />
<ImageView
android:id="@+id/iv_play"
android:layout_width="77dp"
android:layout_height="77dp"
android:layout_gravity="center"
android:background="@drawable/ic_play_circle_outline_black_24dp" />
<FrameLayout
android:id="@+id/re_play"
android:layout_width="77dp"
android:layout_height="77dp"
android:layout_gravity="center"
android:background="@drawable/ic_panorama_fish_e ye_black_24dp"
android:visibility="gone">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="@string/re_play"
android:textColor="#fff"
android:textSize="24dp" />
</FrameLayout>
</FrameLayout>
</LinearLayout>
其实一个列表里每个Item播放的控件布局是利用FrameLayout的。Top->Bottom层依次布局是:
id: re_play(重播图片按钮）
id: iv_play(播放图片按钮）
id: progressBar(加载状态圈圈)
id: videoView（播放的主要控件）
id: iv_first_frame（视频第一帧的图片）
主要就是通过在FrameLayout中的各种控件VISIBLE和GONE来给用户一种使用体验，其实这都是我们处理的一种假象罢了。
细节
1.视频第一帧获取
有两种方式：1.从服务器获取一张第一帧的图片显示。2。利用视频的URL，通过MediaMetadataRetriever获取
e.g.
MediaMetadataRetriever mediaMetadataRetriever.setDataSource(“ your videoPath ”, new HashMap<String, String>());
Bitmap bitmap = mediaMetadataRetriever.getFrameAtTime();
iv_first_frame.setImageBitmap(bitmap);
mediaMetadataRetriever.release();
在RecyclerView的onBindViewHolder里面放这个，因为我不知道怎样缓存，每次都要重新请求网络来获取图片，所以列表会非常卡的，非常容易OOM，基于自己能力问题，所以选择从服务器获取图片好了，方便简洁实惠流畅~~。
需要注意的是MediaMetadataRetriever设置数据源的有多个方法
1. setDataSource(String path) //Source Code: Sets the data source (file pathname) to use.
用来设置文件路径，应该是指本地的路径，我没测试过。
2. setDataSource(String uri, Map<String, String> headers) //Source Code: Sets the data source (URI) to use.
设置URL去使用
等等...
但这里我想说如果你用setDataSource设置数据源的时候，如果是网络请求的连接，一定要加上Map<String, String> headers,，也就是使用第二个方法，不然直接报错，而且Log也没显示什么，死得不明不白的样子。
2.加载圈圈progressBar是一直都是转的，所以不用看在哪里有方法停止，只是利用VISIBLE和GONE来显示和隐藏罢了。
3.VideoView和TextureView流畅度对比
in RecyclerView或ListView（假如每个Item都只有一个控件VideoView或TextureView，显示多个Item，滑动的时候观看测试）：
VideoView：界面颤抖，卡。
TextureView（包括第三方TextureVideoView，因为它继承TextureView）：流畅
3.VideoView和TextureView原始背景颜色对比
VideoView原始的是黑色的背景，而TextureView是透明的。
当点击播放按钮后，加载准备播放的过程中，如果是使用VideoView会出现黑色状态，用户体验不好。如果是使用TextureView，因为还没播放的状态前是透明的，所以可以看到第一帧的图片，用户体验就好多了。（对比仅仅这点，建议使用TextureView）
4.为什么我的代码里用VideoView在RecyclerView播放都不会卡？
如果你认真看我的代码，你应该发现，无论什么时候，都只允许一个VideoView 可见，而列表其它的VideoView都是GONE的，注意：如果设置为GONE列表是不卡的，而设置为INVISIBLE则依然会卡，因为GONE的View是完全没经过onMeasure()，onLayout(), onDraw()等等的方法的，INVISIBLE虽然没经过onDraw()方法，但是同样经过了onMeasure()，onLayout()方法。
5.为什么我的代码里面有个currentVideoHolder这东西？
我就是用它来鉴别当前播放的VideoView或TextureVideoView是在哪个Item里面，如果该Item滑到了不可看见状态，则此Item的状态将会还原。如果点击的VideoView不是当前正在播放的Item，则将播放的Item状态还原。
6.介绍下RecyclerView的两个方法
onViewRecycled(MyViewHolder holder) ，当一个Item View被回收的时候调用的。
onDetachedFromRecyclerView(RecyclerView recyclerView)，Item View从可见到不可见后调用。
此两个方法可以用来当播放的VideoView滑到不可看见的时候就停止播放，还原其Item状态的作用。
7.为什么当加载加载完视频准备播放的一瞬间，视频界面会动了一下。
这是因为根据URL获取的视频，我们不知道它的大小，在videoView.setOnPreparedListener方法里重新调整了该Item的FrameLayout的宽高，免得第一帧图片大小和视频大小不一致，导致用户体验差。
videoView.setOnPreparedListener(new MediaPlayer.OnPreparedListener() {
@Override
public void onPrepared(MediaPlayer mp) {
int width = mp.getVideoWidth();
int height = mp.getVideoHeight();
Rect rect = new Rect();
firstFrame.getGlobalVisibleRect(rect);
int nowWidth = rect.width();
int nowHeight = nowWidth * height / width;
resizeView((View) firstFrame.getParent(), nowWidth, nowHeight);
});
public static void resizeView(View view, int width, int height) {
ViewGroup.LayoutParams layout = view.getLayoutParams();
layout.width = width;
layout.height = height;
view.setLayoutParams(layout);
}
源码地址
https://git.coding.net/Riv-Android/VideoPlayer.git
转载请在开头注明作者详细信息和本文出处
