Android自定義播放器控件VideoView
介紹
最近要使用播放器做一個簡單的視頻播放功能,開始學(xué)習(xí)VideoView,在橫豎屏切換的時候碰到了點麻煩,不過在查閱資料后總算是解決了。在寫VideoView播放視頻時候定義控制的代碼全寫在Actvity里了,寫完一看我靠代碼好亂,于是就寫了個自定義的播放器控件,支持指定大小,可以橫豎屏切換,手動左右滑動快進(jìn)快退。好了,下面開始。
效果圖有點卡,我也不知道為啥。。。。。
VideoView介紹
這個是我們實現(xiàn)視頻播放最主要的控件,詳細(xì)的介紹大家百度就去看,這里介紹幾個常用的方法。
用于播放視頻文件。 VideoView 類可以從不同的來源(例如資源文件或內(nèi)容提供器) 讀取圖像,計算和維護(hù)視頻的畫面尺寸以使其適用于任何布局管理器, 并提供一些諸如縮放、著色之類的顯示選項。
VideoView 常用的幾個方法
public int getDuration ()
獲得所播放視頻的總時間
public int getCurrentPosition ()
獲得當(dāng)前的位置,我們可以用來設(shè)置播放時間的顯示
public int getCurrentPosition ()
獲得當(dāng)前的位置,我們可以用來設(shè)置播放時間的顯示
public int pause ()
暫停播放
public int seekTo ()
設(shè)置播放位置,我們用來總快進(jìn)的時候就能用到
public int setOnCompletionListener(MediaPlayer.OnCompletionListener l)
注冊在媒體文件播放完畢時調(diào)用的回調(diào)函數(shù)。
public int setOnErrorListener (MediaPlayer.OnErrorListener l)
注冊在設(shè)置或播放過程中發(fā)生錯誤時調(diào)用的回調(diào)函數(shù)。如果未指定回調(diào)函數(shù), 或回調(diào)函數(shù)返回false,會彈一個dialog提示用戶不能播放
public void setOnPreparedListener (MediaPlayer.OnPreparedListener l)
注冊在媒體文件加載完畢,可以播放時調(diào)用的回調(diào)函數(shù)。
public void setVideoURI (Uri uri)
設(shè)置播放的視頻源,也可以用setVideoPath指定本地文件
public void start ()
開始播放
getHolder().setFixedSize(width,height);
設(shè)置VideoView的分辨率,如果我們的VideoView在開始播放的時候是豎屏的,當(dāng)橫屏的時候我們改變了VideoView的布局大小,就需要這個方法重新設(shè)置它的分辨率,否則你會發(fā)現(xiàn)改變了之后VideoView內(nèi)部的視頻部分還是原來的大小,這點要注意。
自定義播放器思路
說是自定義,其實無非就是把這些VideoView和用來顯示的其它控件結(jié)合在一起,然后在內(nèi)部處理它的事件交互,我們要做的就是以下幾步:1、寫好整個空間的布局。2、在自定義控件的內(nèi)部獲取到整個控件內(nèi)部的各個小控件,并且為它們設(shè)置一些初始化事件。3、根據(jù)你自己的邏輯和想實現(xiàn)的效果在里面寫自己的事件處理,需要在和外部進(jìn)行交互就提供方法和接口咯。最后就是使用測試效果了。好了,我們就跟著這里說的4步去實現(xiàn)吧!
具體實現(xiàn)
1、第一步,寫自己的布局文件
想要的效果就是在底部放一個狀態(tài)欄顯示時間等信息,播放進(jìn)度,進(jìn)入全屏,中間放一個快進(jìn)快退的狀態(tài),布局代碼如下:
<?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/viewBox" android:layout_width="match_parent" android:layout_height="wrap_content" android:descendantFocusability="beforeDescendants"> <com.qiangyu.test.commonvideoview.MyVideoView android:id="@+id/videoView" android:layout_width="match_parent" android:layout_height="match_parent"/> //底部狀態(tài)欄 <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" android:background="#CC282828" android:padding="3dip" android:id="@+id/videoControllerLayout" android:gravity="center" android:layout_gravity="bottom"> <LinearLayout android:layout_width="wrap_content" android:layout_height="match_parent" android:gravity="center" android:id="@+id/videoPauseBtn" android:paddingRight="10dip" android:paddingLeft="10dp"> <ImageView android:layout_width="22dp" android:layout_height="22dp" android:id="@+id/videoPauseImg" /> </LinearLayout> <LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="1" android:orientation="horizontal" android:paddingRight="0dip"> <SeekBar android:layout_width="fill_parent" android:id="@+id/videoSeekBar" android:layout_weight="1" style="@android:style/Widget.Holo.SeekBar" android:layout_height="wrap_content"/> <TextView android:layout_width="wrap_content" android:layout_height="fill_parent" android:gravity="center" android:text="00:00" android:textSize="12dp" android:id="@+id/videoCurTime" android:textColor="#FFF" /> <TextView android:layout_width="wrap_content" android:layout_height="match_parent" android:gravity="center" android:textSize="12dp" android:textColor="#FFF" android:text="/"/> <TextView android:layout_width="wrap_content" android:layout_height="fill_parent" android:gravity="center" android:text="00:00" android:textSize="12dp" android:id="@+id/videoTotalTime" android:textColor="#FFF" android:layout_marginRight="10dp" /> </LinearLayout> <LinearLayout android:id="@+id/screen_status_btn" android:layout_width="wrap_content" android:layout_height="match_parent" android:gravity="center"> <ImageView android:id="@+id/screen_status_img" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@mipmap/iconfont_enter_32"/> </LinearLayout> </LinearLayout> //VideoVIEW中間的開始按鈕和進(jìn)度條以及快進(jìn)快退的提示 <ProgressBar android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:id="@+id/progressBar" style="@android:style/Widget.Holo.ProgressBar.Small"/> <ImageView android:layout_width="30dip" android:layout_height="30dip" android:id="@+id/videoPlayImg" android:layout_gravity="center" android:src="@mipmap/video_box_play"/> <LinearLayout android:id="@+id/touch_view" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical" android:layout_gravity="center" android:visibility="invisible" android:paddingLeft="15dp" android:paddingRight="15dp" android:paddingTop="5dp" android:paddingBottom="5dp" android:background="#000"> <ImageView android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_weight="1" android:id="@+id/touchStatusImg"/> <TextView android:id="@+id/touch_time" android:layout_width="wrap_content" android:text="25:00/59:00" android:textSize="12sp" android:textColor="#fff" android:layout_height="wrap_content"/> </LinearLayout> </FrameLayout>
上面的布局很簡單,VideoView用了自定義是因為當(dāng)布局改變的時候,要讓VideoView重新獲取布局位置,在里面設(shè)置它的分辨率為全屏.VideoView的代碼如下
public class MyVideoView extends VideoView {
public MyVideoView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
public MyVideoView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public MyVideoView(Context context) {
super(context);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int width = getDefaultSize(0, widthMeasureSpec);
int height = getDefaultSize(0, heightMeasureSpec);
this.getHolder().setFixedSize(width,height);//設(shè)置分辨率
setMeasuredDimension(width, height);
}
}
好,布局寫好了我來第二步,獲取內(nèi)部控件初始化事件
2、第二步,onFinishInflate()中得到內(nèi)部的控件,做初始化工作
onFinishInflate方法在xml解析完畢的時候會回調(diào)該方法,一般在做組合控件的時候最常用
@Override
protected void onFinishInflate() {
super.onFinishInflate();
initView();
}
private void initView() {
View view = LayoutInflater.from(context).inflate(R.layout.common_video_view,null);
viewBox = (FrameLayout) view.findViewById(R.id.viewBox);
videoView = (MyVideoView) view.findViewById(R.id.videoView);
videoPauseBtn = (LinearLayout) view.findViewById(R.id.videoPauseBtn);
screenSwitchBtn = (LinearLayout) view.findViewById(R.id.screen_status_btn);
videoControllerLayout = (LinearLayout) view.findViewById(R.id.videoControllerLayout);
touchStatusView = (LinearLayout) view.findViewById(R.id.touch_view);
touchStatusImg = (ImageView) view.findViewById(R.id.touchStatusImg);
touchStatusTime = (TextView) view.findViewById(R.id.touch_time);
videoCurTimeText = (TextView) view.findViewById(R.id.videoCurTime);
videoTotalTimeText = (TextView) view.findViewById(R.id.videoTotalTime);
videoSeekBar = (SeekBar) view.findViewById(R.id.videoSeekBar);
videoPlayImg = (ImageView) view.findViewById(R.id.videoPlayImg);
videoPlayImg.setVisibility(GONE);
videoPauseImg = (ImageView) view.findViewById(R.id.videoPauseImg);
progressBar = (ProgressBar) view.findViewById(R.id.progressBar);
videoPauseBtn.setOnClickListener(this);
videoSeekBar.setOnSeekBarChangeListener(this);
videoPauseBtn.setOnClickListener(this);
videoView.setOnPreparedListener(this);
videoView.setOnCompletionListener(this);
screenSwitchBtn.setOnClickListener(this);
videoPlayImg.setOnClickListener(this);
//注冊在設(shè)置或播放過程中發(fā)生錯誤時調(diào)用的回調(diào)函數(shù)。如果未指定回調(diào)函數(shù),或回調(diào)函數(shù)返回false,VideoView 會通知用戶發(fā)生了錯誤。
videoView.setOnErrorListener(this);
viewBox.setOnTouchListener(this);
viewBox.setOnClickListener(this);
addView(view);
}
很簡單的做了代碼初始化和videoView的播放事件的注冊,這里的事件待會要處理的有viewBox.setOnTouchListener(this)注冊的onTouch事件,我們要在里面寫左右滑動快進(jìn)快退的效果,videoSeekBar.setOnSeekBarChangeListener(this);處理拖動seekbar快進(jìn)快退。
3、第三步,事件、效果處理
viewBox.setOnTouchListener(this);
1、onTouch里的實現(xiàn)快進(jìn)快退
@Override
public boolean onTouch(View v, MotionEvent event) {
switch (event.getAction()){
case MotionEvent.ACTION_DOWN:
//沒播放的時候不處理
if (!videoView.isPlaying()){
return false;
}
float downX = event.getRawX();
touchLastX = downX;
Log.d("FilmDetailActivity", "downX" + downX);
//保存當(dāng)前播放的位置用與做事件顯示
this.position = videoView.getCurrentPosition();
break;
case MotionEvent.ACTION_MOVE:
//沒播放的時候不處理
if (!videoView.isPlaying()){
return false;
}
float currentX = event.getRawX();
float deltaX = currentX - touchLastX;
float deltaXAbs = Math.abs(deltaX);
if (deltaXAbs>1){//正向移動,快進(jìn)
if (touchStatusView.getVisibility()!=View.VISIBLE){
touchStatusView.setVisibility(View.VISIBLE);
//顯示快進(jìn)的時間view
}
touchLastX = currentX;
Log.d("FilmDetailActivity","deltaX"+deltaX);
if (deltaX > 1) {
position += touchStep;
if (position > duration) {
position = duration;
}
touchPosition = position;
touchStatusImg.setImageResource(R.mipmap.ic_fast_forward_white_24dp);
int[] time = getMinuteAndSecond(position);
touchStatusTime.setText(String.format("%02d:%02d/%s", time[0], time[1],formatTotalTime));
} else if (deltaX < -1) {//快退
position -= touchStep;
if (position < 0) {
position = 0;
}
touchPosition = position;
touchStatusImg.setImageResource(R.mipmap.ic_fast_rewind_white_24dp);
int[] time = getMinuteAndSecond(position);
touchStatusTime.setText(String.format("%02d:%02d/%s", time[0], time[1],formatTotalTime));
//mVideoView.seekTo(position);
}
}
break;
case MotionEvent.ACTION_UP:
if (touchPosition!=-1){
videoView.seekTo(touchPosition);
//放開手指的時候快進(jìn)或快退到滑動決定的時間位置 touchStatusView.setVisibility(View.GONE);
touchPosition = -1;
if (videoControllerShow){
return true;
}
}
break;
}
return false;
}
2、處理 seekBar的拖動事件
@Override
public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
int[] time = getMinuteAndSecond(progress);
videoCurTimeText.setText(String.format("%02d:%02d", time[0], time[1]));
//設(shè)置底部時間顯示
}
@Override
public void onStartTrackingTouch(SeekBar seekBar) {
videoView.pause();
}
@Override
public void onStopTrackingTouch(SeekBar seekBar) {
videoView.seekTo(videoSeekBar.getProgress());
videoView.start();
videoPlayImg.setVisibility(View.INVISIBLE);
videoPauseImg.setImageResource(R.mipmap.icon_video_pause);
//拖動之后到指定的時間位置
}
3、videoView的回調(diào)事件
@Override
public void onPrepared(MediaPlayer mp) {
duration = videoView.getDuration();
int[] time = getMinuteAndSecond(duration);
videoTotalTimeText.setText(String.format("%02d:%02d", time[0], time[1]));
formatTotalTime = String.format("%02d:%02d", time[0], time[1]);
videoSeekBar.setMax(duration);
progressBar.setVisibility(View.GONE);
mp.start();
videoPauseBtn.setEnabled(true);
videoSeekBar.setEnabled(true);
videoPauseImg.setImageResource(R.mipmap.icon_video_pause);
timer.schedule(timerTask, 0, 1000);
//初始化總時間等一些界面顯示,同時用timer定時去修改時間進(jìn)度textView
}
@Override
public void onCompletion(MediaPlayer mp) {
videoView.seekTo(0);
videoSeekBar.setProgress(0);
videoPauseImg.setImageResource(R.mipmap.icon_video_play);
videoPlayImg.setVisibility(View.VISIBLE);
}
還有一些其它的點擊時間就不放了,都是暫停,播放,點擊顯示隱藏底部狀態(tài)欄,全屏切換等的事件。到了這里我們的事件處理完畢啦,接下來就要我們視頻怎么播放呢?為了播放我們?yōu)橥獠刻峁┮粋€方法
//開始播放
public void start(String url){
videoPauseBtn.setEnabled(false);
videoSeekBar.setEnabled(false);
videoView.setVideoURI(Uri.parse(url));
videoView.start();
}
//進(jìn)入全屏?xí)r候調(diào)用
public void setFullScreen(){
touchStatusImg.setImageResource(R.mipmap.iconfont_exit);
this.setLayoutParams(new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
videoView.requestLayout();
}
//退出全屏?xí)r候調(diào)用
public void setNormalScreen(){
touchStatusImg.setImageResource(R.mipmap.iconfont_enter_32);
this.setLayoutParams(new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,400));
videoView.requestLayout();
}
上面提供的setFullScreen()和setNormalScreen()需要在Activity的 onConfigurationChanged(Configuration newConfig)橫豎屏發(fā)生改變的 回調(diào)方法里面調(diào)用,還需要注意的是我這里寫的是LinearLayout的LayoutParams,所以我們自定義的view的父空間要是LinearLayout,當(dāng)然你也可以修改。
4、控件的使用
我們只需要在獲得空間調(diào)用start方法,然后在onConfigurationChanged方法里調(diào)用setFullScreen和setNormalScreen就可以了,
布局
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" app:layout_behavior="@string/appbar_scrolling_view_behavior" tools:context="com.qiangyu.test.commonvideoview.MainActivity"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" app:popupTheme="@style/AppTheme.PopupOverlay"/> <com.qiangyu.test.commonvideoview.CommonVideoView android:id="@+id/common_videoView" android:layout_width="match_parent" android:layout_height="300dp" /> </LinearLayout>
activity代碼
public class MainActivity extends AppCompatActivity {
CommonVideoView videoView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.content_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
videoView = (CommonVideoView) findViewById(R.id.common_videoView);
videoView.start("你的服務(wù)器視頻地址");
}
@Override public void onConfigurationChanged(Configuration newConfig) {
super.onConfigurationChanged(newConfig);
if (newConfig.orientation == Configuration.ORIENTATION_LANDSCAPE) {
videoView.setFullScreen();
}else {
videoView.setNormalScreen();
}
}
}
最后為了防止你的Activity在橫豎屏切換的時候重新創(chuàng)建別忘記在AndroidManifest.xml文件里面配置
android:configChanges=”orientation|screenSize|screenLayout”, 如果你這里有疑惑可以參考我的文章–>深入了解Activity-生命周期
<activity android:name=".MainActivity" android:label="@string/app_name" android:theme="@style/AppTheme.NoActionBar" android:configChanges="orientation|screenSize|screenLayout"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity>
以上所述是小編給大家分享的Android自定義播放器控件VideoView的相關(guān)知識,希望對大家有所幫助。
- Android使用VideoView播放本地視頻和網(wǎng)絡(luò)視頻的方法
- 詳解Android App中使用VideoView來實現(xiàn)視頻播放的方法
- android使用videoview播放視頻
- android視頻播放簡單實現(xiàn)示例(VideoView&MediaPlayer)
- Android編程實現(xiàn)VideoView循環(huán)播放功能的方法
- android之視頻播放系統(tǒng)VideoView和自定義VideoView控件的應(yīng)用
- Android多媒體之VideoView視頻播放器
- Android 使用VideoView播放MP4的簡單實現(xiàn)
- Android使用VideoView出現(xiàn)無法播放此視頻問題的解決方法
相關(guān)文章
Android實現(xiàn)字母導(dǎo)航控件的示例代碼
這篇文章主要介紹了通過自定義View實現(xiàn)字母導(dǎo)航控件的示例代碼,文中的實現(xiàn)過程講解詳細(xì),對我們學(xué)習(xí)或工作有一定幫助,感興趣的可以學(xué)習(xí)一下2022-01-01
Android存儲卡讀寫文件與Application數(shù)據(jù)保存的實現(xiàn)介紹
這篇文章主要介紹了Android在存儲卡上讀寫文件、Application保存數(shù)據(jù)的實現(xiàn)步驟,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2022-09-09
Android組件ContextMenu實現(xiàn)長按事件
這篇文章主要為大家詳細(xì)介紹了Android組件ContextMenu實現(xiàn)長按事件,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-04-04
詳解Android開發(fā)之MP4文件轉(zhuǎn)GIF文件
這篇文章介紹的是將錄下來的視頻選取一小段轉(zhuǎn)為 GIF 文件,不僅時間段可以手動選取,而且還需要支持截取視頻的局部區(qū)域轉(zhuǎn)為 GIF,網(wǎng)上調(diào)研了一下技術(shù)方案,覺得還是有必要把實現(xiàn)過程拿出來分享下,有需要的可以直接拿過去用。下面來一起看看。2016-08-08
創(chuàng)建子線程對Android進(jìn)行網(wǎng)絡(luò)訪問
這篇文章介紹了Android中創(chuàng)建子線程進(jìn)行網(wǎng)絡(luò)訪問的方法,文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考2021-11-11
GridView基于pulltorefresh實現(xiàn)下拉刷新 上拉加載更多功能(推薦)
原理和listview一樣 ,都是重寫Android原生控件。下面小編通過實例代碼給大家分享GridView基于pulltorefresh實現(xiàn)下拉刷新 上拉加載更多功能,非常不錯,一起看看吧2016-11-11
Android自定義View繪制四位數(shù)隨機(jī)碼
這篇文章主要介紹了Android自定義View繪制四位數(shù)隨機(jī)碼,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-10-10
Jetpack Compose實現(xiàn)對話框和進(jìn)度條實例解析
對話框和進(jìn)度條其實并無多大聯(lián)系,放在一起寫是因為兩者的內(nèi)容都不多,所以湊到一起,對話框是我們平時開發(fā)使用得比較多的組件,進(jìn)度條的使用頻率也很高,比如下載文件,上傳文件,處理任務(wù)時都可以使用進(jìn)度條2023-04-04

