VideoView and TextureVideoView on Android（二）

此文章将会讲解在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

转载请在开头注明作者详细信息和本文出处