【超详细】开源JZVideo饺子播放器播放器配置使用以及其自定义
文章目录
- 特点
- 配置
- 添加依赖
- 添加布局
- 添加逻辑
- 修改AndroidManifest.xml
- 小问题
- 展示图
- 自定义
- 自定义UI
- 编写自定义类
- 重新应用控件
- 应用
- 总结
- 参考链接
继续找播放器，找到了饺子播放器， JZVideo，据说它可以高度自定义，而且还可以结合ijkplayer的内核之类的。
这好像是之前的项目 点击这里，已经10.2k star了，现在的项目在 这里，最新版本应该是7.4.x了，但是新版本的源码不太好自定义，主要是我看的教程时6.4.2的，所以就换了。
特点
- 可以完全自定义UI和任何功能。
- 很容易切换播放引擎，支持的视频格式和协议取决于播放引擎，android.media.MediaPlayer或者ijkplayer等。
- 可以检测列表的滑动。
- 可以嵌入到多个控件中，比如ListView、Fragment，RecyclerView等等，多重嵌套也可以。
- 可以实现全屏播放和小窗播放。
- 可以在加载、暂停和播放等状态下切换全屏和退出全屏。
- 可以进行屏幕适配，铺满全屏或者全屏裁剪。
- 好像还支持重力感应自动横屏。
- 全屏后可以用手势修改进度和音量。
- Home键退出界面暂停播放，返回界面的时候继续播放。
- 等等etc，应该还可以有很多很多，等待开发。
配置
下面配置一下，引入JZVideo到项目里。
添加依赖
在build.gradle中添加
dependencies {
implementation fileTree(dir: 'libs', include: ['*.jar'])
implementation 'com.android.support:appcompat-v7:26.1.0'
implementation 'com.android.support.constraint:constraint-layout:1.1.3'
testImplementation 'junit:junit:4.12'
androidTestImplementation 'com.android.support.test:runner:1.0.2'
androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
androidTestCompile('com.android.support:support-annotations:26.1.0') {
force = true
}
......
//饺子播放器
compile 'cn.jzvd:jiaozivideoplayer:6.2.12'
}
好象这样也行implementation ‘cn.jzvd:jiaozivideoplayer:7.0.3’
添加布局
在layout文件中添加控件，外层最好添加一个Layout。
<LinearLayout
android:layout_width="400dp"
android:layout_height="200dp">
<cn.jzvd.JZVideoPlayerStandard
android:id="@+id/video_view"
android:layout_width="match_parent"
android:layout_height="match_parent">cn.jzvd.JZVideoPlayerStandard>
LinearLayout>
添加逻辑
修改java代码，设置视频地址和缩略图等，缩略图可以用Glide传入，还需要重写一下声明周期方法里的东西。
JZVideoPlayerStandard VideoPlayer=findViewById(R.id.video_view);
VideoPlayer.setUp("http://jzvd.nathen.cn/c6e3dc12a1154626b3476d9bf3bd7266/6b56c5f0dc31428083757a45764763b0-5287d2089db37e62345123a1be272f8b.mp4",
JZVideoPlayerStandard.SCREEN_WINDOW_NORMAL,
"饺子闭眼睛");
JZVideoPlayer.SAVE_PROGRESS = false;
try {
VideoPlayer.thumbImageView.setImageResource(R.drawable.diamond);
}catch(Exception e){
e.printStackTrace();
}
@Override
public void onBackPressed() {
if (JZVideoPlayer.backPress()) {
return;
}
super.onBackPressed();
}
@Override
protected void onPause() {
super.onPause();
JZVideoPlayer.releaseAllVideos();
}
修改AndroidManifest.xml
添加一下属性
<activity android:name=".VideoActivity"
android:configChanges="orientation|keyboardHidden|screenSize">
这样子最基本的就搞定了，然后开始自定义。
小问题
因为我的软件是横屏的，在视频退出全屏后，会暂停，而且回到竖屏。
展示图
自定义
这里需要用到上面说的到的6.4.2版本源码，没有的话问题不大，我把代码放出来。
自定义UI
编写一个新的layout布局文件，作为我们自定义的控件，叫custon_videoview.xml，将JZVideo-6.4.2\jiaozivideoplayer\src\main\res\layout中的jz_layout_std.xml代码全部复制进来。
然后可以按照这个内容和布局，自己添加新的控件。
filename: custon_videoview.xml
<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="afterDescendants">
<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_alignParentStart="true"
android:layout_alignParentLeft="true"
android:layout_alignParentBottom="true"
android:background="#000000"
android:scaleType="fitCenter" />
<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:paddingLeft="12dp"
android:paddingTop="8dp"
android:paddingRight="12dp"
android:paddingBottom="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>
<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" />
<RelativeLayout
android:id="@+id/layout_top"
android:layout_width="match_parent"
android:layout_height="48dp"
android:layout_alignParentStart="true"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:background="@drawable/jz_title_bg"
android:paddingStart="10dp"
android:paddingLeft="10dp"
android:visibility="gone">
<ImageView
android:id="@+id/back"
android:layout_width="26dp"
android:layout_height="26dp"
android:layout_alignParentStart="true"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginTop="12dp"
android:padding="3dp"
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_marginRight="12dp"
android:layout_toLeftOf="@+id/battery_time_layout"
android:layout_toEndOf="@+id/back"
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"
android:visibility="invisible">
<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>
<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:id="@+id/start_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="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"
android:visibility="invisible">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/video_loading_failed"
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:paddingLeft="9dp"
android:paddingTop="4dp"
android:paddingRight="9dp"
android:paddingBottom="4dp"
android:text="@string/click_to_restart"
android:textColor="@android:color/white"
android:textSize="14sp" />
LinearLayout>
RelativeLayout>
然后把value/strings.xml中的一些字符串内容复制到我们的项目里。
编写自定义类
需要重新写一个类，叫CustomJZVideo，必须继承自JzvdStd，但是在我的项目里他是JZVideoPlayerStandard，问题不大。
在这个文件里，通过getLayoutId()方法传入我们刚才写好的布局文件，获取控件，对控件的点击事件进行监听。
代码如下，里面用到的一些方法都有写注释他是干嘛的，这几个挺有用的感觉。
注意了，这里的构造方法一定要把两个多态都写上，我开始为了偷懒只写了一个，然后就报错了
package com.example.k.bilibiliapi.video;
import android.content.Context;
import android.content.pm.ActivityInfo;
import android.util.AttributeSet;
import android.view.View;
import android.widget.Toast;
import com.example.k.bilibiliapi.MyApplication;
import com.example.k.bilibiliapi.R;
import cn.jzvd.JZVideoPlayer;
import cn.jzvd.JZVideoPlayerStandard;
/**
* Created by kang on 2020/8/12.
*/
public class CustomJZVideo extends JZVideoPlayerStandard {
Context context;
public CustomJZVideo(Context context) {
super(context);
this.context=context;
}
public CustomJZVideo(Context context, AttributeSet attrs) {
super(context, attrs);
this.context = context;
}
@Override
public int getLayoutId() {
return R.layout.custom_videoview;
}
@Override
public void init(Context context) {
super.init(context);
//获取自定义控件
}
@Override
public void onClick(View v) {
super.onClick(v);
//控件的单击事件
}
@Override
public void setUp(Object[] dataSourceObjects, int defaultUrlMapIndex, int screen, Object... objects) {
super.setUp(dataSourceObjects, defaultUrlMapIndex, screen, objects);
//设置播放时屏幕状态
JZVideoPlayer.FULLSCREEN_ORIENTATION = ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE;
JZVideoPlayer.NORMAL_ORIENTATION = ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE;
}
@Override
public void onAutoCompletion() {
super.onAutoCompletion();
//并播放完后这里切换下一个视频的url
}
@Override
public void startWindowFullscreen() {
super.startWindowFullscreen();
//进入全屏时的状态
Toast.makeText(MyApplication.getContext(),"进入全屏",Toast.LENGTH_SHORT).show();
}
@Override
public void playOnThisJzvd() {
super.playOnThisJzvd();
//退出全屏时的状态
Toast.makeText(MyApplication.getContext(),"退出全屏",Toast.LENGTH_SHORT).show();
}
}
重新应用控件
在布局文件中，将原有的cn.jzvd.JZVideoPlayerStandard换成com.example.xxx.video.CustomJZVideo，可以在类中也修改一下，将JZVideoPlayerStandard或者JZVideoPlayer全部换成CustomJZVideo，毕竟是继承嘛。
应用
然后应用一下，现在全屏和退出全屏的时候回有Toast提示消息，而且退出全屏后，仍然是横屏，因为我们重写的方法里设置了播放状态一直是横屏。
总结
至此自定义完成了。
在我找了好几个开源项目，n多博客以后，终于找到一个可以比较好比较完美的可以自定义的播放器控件了。
参考链接
Android 使用超简单的多媒体播放器JiaoZiVideoPlayer - 程思扬
Android饺子播放器自定义 - 孙先森i