前言:闲来无事,发现已经好久好久没有更新文章了,似乎又回到了之前的那种状态。每天就是敲代码,实现功能后将项目打包备份就结束了,很少回过头再看一下自己写的代码。开始写博客不就是为了改变这种状态吗,罪过罪过。恰巧今天不是很忙,更新几篇文章记录下最近的工作吧~
作为今天的第一篇文章,我一直在犹豫记录点什么呢。打开手机,看见的第一个软件竟然是抖音哈哈。幸运的是最近做的项目中刚好有视频播放的功能,第一篇文章就记录下一个视频播放简单的实现吧。
首先,贴出界面截图(文采不咋的,用图片来代替需求说明)
上图是已经购买了的课程效果,如果没有购买,则“已购买”显示“支付”,并且视频列表除第一个外是加锁的,只有购买之后才可以观看所有可能。
那么,该如何实现上面所提到的需求呢?
Step1,界面布局
我们利用JCVideoPlayer进行视频的播放,RecycleView显示视频列表,最底部则是一个由价格和购买Button组成的线性布局,代码如下:
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent"> <RelativeLayout android:id="@+id/relative" style="@style/TitleStyle_Relative"> <ImageView android:id="@+id/back" style="@style/TitleStyle_Back" android:layout_alignParentBottom="true" /> <TextView android:id="@+id/title_tv" style="@style/TitleStyle_Text" android:layout_centerHorizontal="true" android:text="课程播放页" /> </RelativeLayout> <fm.jiecao.jcvideoplayer_lib.JCVideoPlayerStandard android:id="@+id/player_list_video" android:layout_width="match_parent" android:layout_height="@dimen/dp_200" android:layout_below="@id/relative" /> <RelativeLayout android:id="@+id/relative2" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_below="@id/player_list_video"> </RelativeLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="@dimen/dp_50" android:layout_alignParentBottom="true" android:background="@color/white" android:id="@+id/linear" android:orientation="horizontal"> <TextView android:id="@+id/xk_item_price" android:layout_width="@dimen/dp_0" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:layout_marginLeft="@dimen/dp_15" android:layout_weight="1" android:textColor="@color/red" android:textSize="@dimen/text_16_sp" /> <TextView android:id="@+id/zf" android:layout_width="@dimen/dp_100" android:layout_height="match_parent" android:background="@color/red" android:gravity="center" android:text="支付" android:textColor="#ffffff" android:textSize="@dimen/text_14_sp" /> </LinearLayout> <com.github.jdsjlzx.recyclerview.LRecyclerView android:id="@+id/recyclerview" android:layout_above="@id/linear" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_below="@+id/relative2" android:layout_marginLeft="@dimen/dp_15" android:layout_marginRight="@dimen/dp_15" /> </RelativeLayout>
Step2,数据调用
调用后台接口查询数据,并根据购买标识进行是否免费的逻辑处理,并绑定第一条视频url
public void HttpPost() { commitParam = new CommitParam(); commitParam.setScId(csId); commitParam.setToken(token); map = commitParam.getData(); Call<ResponseBody> data = RetrofitBean.getApi2().getDataCourse(COURSEPLAY, map); SimpleCallBack simpleCallBack = new SimpleCallBack("课程") { @Override protected void showData(int i1, String json) { super.showData(i1, json); Gson gson = new Gson(); CourseXX courseXX = gson.fromJson(json, CourseXX.class); Glide.with(CoursePlayActivity.this).load(HttpUrl.BASE_URL3 + courseXX.getResult().getCsPicture()).into(playerListVideo.thumbImageView); xkItemPrice.setText(courseXX.getResult().getCsPrice() + "R点"); kcId = courseXX.getResult().getId(); int sfzf = courseXX.getResult().getIsbuy(); if (sfzf == 0) { zf.setText("支付"); zf.setClickable(true); zf.setEnabled(true); if (courseXX.getResult().getSection().size() > 0) { for (int i = 0; i < courseXX.getResult().getSection().size(); i++) { mData.add(new IDName(courseXX.getResult().getSection().get(i).getIsFree() + "", courseXX.getResult().getSection().get(i).getScName())); url.add(courseXX.getResult().getSection().get(i).getYunUrl()); isFree.add(courseXX.getResult().getSection().get(i).getIsFree()); } mCourseAdapter.setDataList(mData); } } else { zf.setText("已购买"); zf.setClickable(false); zf.setEnabled(false); if (courseXX.getResult().getSection().size() > 0) { for (int i = 0; i < courseXX.getResult().getSection().size(); i++) { mData.add(new IDName("已购买", courseXX.getResult().getSection().get(i).getScName())); url.add(courseXX.getResult().getSection().get(i).getYunUrl()); isFree.add(1); } mCourseAdapter.setDataList(mData); } } if (url.size() > 0) { if (!url.get(0).equals("") && isFree.get(0) == 1) { JCVideoPlayer.FULLSCREEN_ORIENTATION = ActivityInfo.SCREEN_ORIENTATION_SENSOR_LANDSCAPE; JCVideoPlayer.NORMAL_ORIENTATION = ActivityInfo.SCREEN_ORIENTATION_PORTRAIT; playerListVideo.setUp(url.get(0), JCVideoPlayer.SCREEN_LAYOUT_LIST, ""); } else { Toast.makeText(CoursePlayActivity.this, "此视频需要购买", Toast.LENGTH_SHORT).show(); } } } }; data.enqueue(simpleCallBack); }
Step3,处理点击事件
点击后将该项对应的url设置到视频播放器,并开始播放
mLRecyclerViewAdapter.setOnItemClickListener(new OnItemClickListener() { @Override public void onItemClick(View view, int position) { String path = url.get(position); int isFre = isFree.get(position); if (!path.equals("") && isFre == 1) { JCVideoPlayer.FULLSCREEN_ORIENTATION = ActivityInfo.SCREEN_ORIENTATION_SENSOR_LANDSCAPE; JCVideoPlayer.NORMAL_ORIENTATION = ActivityInfo.SCREEN_ORIENTATION_PORTRAIT; playerListVideo.setUp(path, JCVideoPlayer.SCREEN_LAYOUT_LIST, ""); playerListVideo.startButton.performClick(); } else { Toast.makeText(CoursePlayActivity.this, "此视频需要购买", Toast.LENGTH_SHORT).show(); } } });
Step4,重写回退键等
@Override public void onBackPressed() { if (JCVideoPlayer.backPress()) { return; } super.onBackPressed(); } @Override protected void onPause() { super.onPause(); JCVideoPlayer.releaseAllVideos(); }
最后,在使用JCVideoPlayer前需要预先引入相应的库,在build.gradle中添加代码:
compile 'fm.jiecao:jiecaovideoplayer:4.8.3'