仿今日头条视频播放JieCaoVideoPlayer

原文地址：http://blog.****.net/w_l_s/article/details/53132179

JieCaoVideoPlayer一个真正实现Android的全屏功能，立志成为Android平台使用最广泛的视频播放控件

GitHub地址：https://github.com/wlsh/JieCaoVideoPlayer/

特点：

    1、全屏时启动新Activity实现播放器真正的全屏功能

    2、可以完全自定义UI

    3、能在ListView、ViewPager和ListView、ViewPager和Fragment等多重嵌套模式下全屏工作

    4、手势修改进度和音量

    5、视频大小的屏幕适配，宽或长至少有两个对边是充满屏幕的，另外两个方向居中

    6、可以在加载、暂停、播放等各种状态中正常进入全屏和退出全屏

    7、可以在加载、暂停、播放等各种状态中正常进入全屏和退出全屏

    8、占用空间非常小，不到50k

    9、设置http头信息

使用方法：

    1、从Github上下载JieCaoVideoPlayer源码

   2、导入jiecaoviewoplayer-lib依赖

下面是我自己写的一个小代码，里面都有注释：

MainActivity的布局文件Xml：

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.example.wls.jcplayer.MainActivity">

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:scrollbars="none">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="3dp"
                android:layout_marginTop="18dp"
                android:text="Base simple ui example" />

            <fm.jiecao.jcvideoplayer_lib.JCVideoPlayerSimple
                android:id="@+id/custom_videoplayer"
                android:layout_width="match_parent"
                android:layout_height="200dp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="3dp"
                android:layout_marginTop="18dp"
                android:text="Recommended standard ui example" />

            <fm.jiecao.jcvideoplayer_lib.JCVideoPlayerStandard
                android:id="@+id/custom_videoplayer_standard"
                android:layout_width="match_parent"
                android:layout_height="200dp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="3dp"
                android:layout_marginTop="18dp"
                android:text="Standard ui with share button, visible after fullscreen" />
           <Button
               android:id="@+id/allSreeen"
               android:layout_width="match_parent"
               android:layout_height="wrap_content"
               android:text="全屏播放"
               android:onClick="btnClick"/>
            <Button
                android:id="@+id/btn_list"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="视频播放列表"
                android:onClick="btnClick"/>


        </LinearLayout>
    </ScrollView>
</LinearLayout>

2、主函数的代码MainActivity：

public class MainActivity extends AppCompatActivity {

    private JCVideoPlayerSimple jcVideoPlayerSimple;
    private JCVideoPlayerStandard jcVideoPlayerStandard;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        jcVideoPlayerSimple = (JCVideoPlayerSimple) findViewById(R.id.custom_videoplayer);
        /**
         * 第一个参数为视频的URI
         * 第二个参数为视频标题
         */
        jcVideoPlayerSimple.setUp("http://2449.vod.myqcloud.com/2449_22ca37a6ea9011e5acaaf51d105342e3.f20.mp4",
                "1111");


        jcVideoPlayerStandard = (JCVideoPlayerStandard) findViewById(R.id.custom_videoplayer_standard);
        /**
         * 第一个参数为视频的URI
         * 第二个参数为视频标题
         */
        jcVideoPlayerStandard.setUp("http://2449.vod.myqcloud.com/2449_bfbbfa3cea8f11e5aac3db03cda99974.f20.mp4"
                , "嫂子想我没");
        Glide.with(this)
                .load("http://p.qpic.cn/videoyun/0/2449_bfbbfa3cea8f11e5aac3db03cda99974_1/640")
                .into(jcVideoPlayerStandard.ivThumb);

    }
    public void btnClick(View view){
        switch (view.getId()){
            case R.id.allSreeen:
                /**
                 * 第一个参数为上下文
                 * 第二个参数为视频地址
                 * 第三个参数为全屏播放类
                 * 第四个参数为视频的标题
                 */
                JCFullScreenActivity.toActivity(this,
                        "http://video.jiecao.fm/5/1/%E8%87%AA%E5%8F%96%E5%85%B6%E8%BE%B1.mp4",
                        JCVideoPlayerStandard.class,
                        "嫂子别摸我");
                break;
            case R.id.btn_list:
                Intent intent = new Intent(this,ListActivity.class);
                startActivity(intent);
                break;
        }
    }

    @Override
    protected void onPause() {
        super.onPause();
        JCVideoPlayer.releaseAllVideos();
    }

 } 3、下面是一个视频列表的xml文件和listView的布局文件：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="match_parent"
              android:layout_height="match_parent">
    <ListView
        android:id="@+id/listView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scrollbars="none"/>

</LinearLayout>

listView的内的布局格式：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="match_parent"
              android:layout_height="match_parent">
    <fm.jiecao.jcvideoplayer_lib.JCVideoPlayerStandard
        android:id="@+id/jc_player"
        android:layout_width="match_parent"
        android:layout_height="200dp" />
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="仿今日头条"
        android:layout_margin="10dp"/>

</LinearLayout>

4、视频列表主要代码：

public class ListActivity extends AppCompatActivity{

    private ListView mListView;
    private List<String> listUrl = new ArrayList<>();
    private List<String> listTitle = new ArrayList<>();
    private List<String> listThum = new ArrayList<>();
    //视频地址
    private String path1 = "http://video.jiecao.fm/5/1/%E8%87%AA%E5%8F%96%E5%85%B6%E8%BE%B1.mp4";
    private String path2 = "http://gslb.miaopai.com/stream/ed5HCfnhovu3tyIQAiv60Q__.mp4";
    //视频缩略图地址
    private String path3 = "http://img4.jiecaojingxuan.com/2016/5/1/3430ec64-e6a7-4d8e-b044-9d408e075b7c.jpg";
    private String path4 = "http://img4.jiecaojingxuan.com/2016/3/14/2204a578-609b-440e-8af7-a0ee17ff3aee.jpg";
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.listactivity_layout);
        init();
    }
    private void init(){
        while(listUrl.size()<10){
            listUrl.add(path1);
            listUrl.add(path2);
            listThum.add(path3);
            listThum.add(path4);
        }
        for(int i = 1;i<11;i++){
            listTitle.add("这是第"+ i +"个视频");
        }
        mListView = (ListView) findViewById(R.id.listView);
        ListAdapter adapter = new ListAdapter(this,listUrl,listTitle,listThum);
        mListView.setAdapter(adapter);
    }

    @Override
    protected void onPause() {
        super.onPause();
        JCVideoPlayer.releaseAllVideos();
    }
}

5、listView的适配器：

public class ListAdapter extends BaseAdapter{
    private Context mContext;
    private List<String> listUrl;
    private List<String> listTitle;
    private List<String> listThum;
    public ListAdapter(Context context,List<String> listUrl,List<String> listTitle,List<String> listThum){
        this.mContext = context;
        this.listUrl = listUrl;
        this.listTitle = listTitle;
        this.listThum = listThum;
    }
    @Override
    public int getCount() {
        return listUrl.size();
    }

    @Override
    public Object getItem(int i) {
        return listUrl.get(i);
    }

    @Override
    public long getItemId(int i) {
        return 0;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        ViewHolder viewHolder = null;
        if(convertView == null){
            viewHolder = new ViewHolder();
            convertView = LayoutInflater.from(mContext).inflate(R.layout.listadapter_layout,null);
            viewHolder.mJCVideoPlayerStandard = (JCVideoPlayerStandard) convertView.findViewById(R.id.jc_player);
            convertView.setTag(viewHolder);
        }else{
            viewHolder = (ViewHolder) convertView.getTag();
        }
        viewHolder.mJCVideoPlayerStandard.setUp(listUrl.get(position),listTitle.get(position));
        //加载图片作为视频的显示图片
        Picasso.with(mContext)
                .load(listThum.get(position))
                .into(viewHolder.mJCVideoPlayerStandard.ivThumb);
        return convertView;
    }

    class ViewHolder{
        JCVideoPlayerStandard mJCVideoPlayerStandard;
    }
}

其中视频缩略图也就是是视频中的一帧图片，可以通过方法自行获取。

在上述代码中有两个标红：Glide和Picasso这两个是图片加载的插件。在下节会详细讲解，有兴趣的可以查看下一节，也可去github上了解：

Glide：https://github.com/bumptech/glide

Picasso：https://github.com/square/picasso

效果演示：

这是主页面（第一个是没有加视频缩略图时）

   

这是全屏播放的时候

下面是视频播放列表（仿今日头条的视频）

          

最近有一些博友，问我如何获取视频缩略图的问题，我最近，抽出一些时间，查了一些资料，在此奉上源码：

public class MainActivity extends AppCompatActivity {

  

private String url = "http://112.253.22.157/17/z/z/y/u/" +
        "zzyuasjwufnqerzvyxgkuigrkcatxr/hc.yinyuetai.com/D046015255134077DDB3ACA0D7E68D45.flv";
private ImageView mImageView;
private Bitmap mBitmap;

@Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); init(); } private void init() { mImageView = (ImageView) findViewById(R.id.image); Bitmap bitmap = getNetVideoBitmap(url); mImageView.setImageBitmap(bitmap); } /** 获取视频第一帧 */ public Bitmap getNetVideoBitmap(String videoUrl) { Bitmap bitmap = null; MediaMetadataRetriever retriever = new MediaMetadataRetriever(); try { //根据url获取第一帧 retriever.setDataSource(videoUrl, new HashMap()); //获取本地视频的第一帧 // retriever.setDataSource("/sdcard/03.mp4"); //获得第一帧图片 bitmap = retriever.getFrameAtTime(); //视频第一帧的压缩 /* FileOutputStream outStream = null; outStream = new FileOutputStream(new File(getExternalCacheDir().getAbsolutePath() + "/" + "视频" + ".jpg")); bitmap.compress(Bitmap.CompressFormat.JPEG, 10, outStream); outStream.close();*/ } catch (Exception e) { e.printStackTrace(); } finally { retriever.release(); } return bitmap; }}

布局的话就是一个ImageView，非常简单，有需要的可以尝试一下。

效果：

参考：http://www.itwendao.com/article/detail/354248.html