锐客网

  1. 首页 > 睿知 > it技术 > >

有趣的安卓视频播放器（VideoView）

IT知识视频播放视频播放器videoview

智慧并不产生于学历,而是来自对于知识的终生不懈的追求。这篇文章主要讲述有趣的安卓视频播放器（VideoView）相关的知识，希望能为你提供帮助。
VideoView是安卓自带的视频播放器类，该类集成有显示和控制两大部分，在布局文件中添加VideoView然后在java文件中简单的调用控制命令，即可实现本地或者网络视频的播放。本章实现视频的居中播放、网络视频播放、本地视频播放、视频卡顿监听、网络连接错误监听、视频外自定义视频控件、视频内自定义视频控件等。
 
支持的格式：flv、3gp、mp4
 
类的一些重要方法void start();                   //开始播放
void pause();               //暂停
void resume();             //重新播放,使用时需要在本句后加上开始播放
void seekTo(int msec);         //从第几毫秒开始播放
void stopPlayback();           //停止播放并释放资源
int getCurrentPosition();     //获取当前播放的位置。
int getDuration();                 //获取当前播放视频的总长度。
void setVideoPath(String path);     //以文件路径的方式设置VideoView播放的视频源。
void setVideoURI(Uri uri);             //以Uri的方式设置VideoView播放的视频源，可以是网络Uri或本地Uri
void isPlaying();                             //当前VideoView是否在播放视频
setMediaController(MediaController controller);                                 //设置MediaController控制器
setOnCompletionListener(MediaPlayer.onCompletionListener l);       //监听播放完成的事件
setOnErrorListener(MediaPlayer.OnErrorListener l);                         //监听播放发生错误时候的事件
setOnPreparedListener(MediaPlayer.OnPreparedListener l);           //监听视频装载完成的事件
setOnInfoListener(new MediaPlayer.OnInfoListener(){});                   //视频卡顿监听
 
实现简单的视频播放

有趣的安卓视频播放器（VideoView）

文章图片
                     
有趣的安卓视频播放器（VideoView）

文章图片
                         
有趣的安卓视频播放器（VideoView）

文章图片

布局文件：
实现视频播放重要在于VideoView标签，如果让该标签的父级标签为FramLayout，设置相应属性就可以实现视频居中播放和默认的播放控件 MediaController 在视频内显示效果，还可以在VidoView标签上层加入TextView标签，实现视频播放的一些状态显示，如播放卡顿、切换播放、播放失败等的提示信息显示。另外可加入ImageView标签，即可显示图片或gif图，更具人性化。
有趣的安卓视频播放器（VideoView）

文章图片
有趣的安卓视频播放器（VideoView）

文章图片
1 < ?xml version="1.0" encoding="utf-8"?> 2 < LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 3xmlns:tools="http://schemas.android.com/tools" 4android:layout_width="match_parent" 5android:layout_height="match_parent" 6android:paddingBottom="0dp" 7android:paddingLeft="0dp" 8android:paddingRight="0dp" 9android:orientation="vertical" 10android:paddingTop="0dp" 11tools:context="com.example.videodong.MainActivity"> 12 13< TextView 14android:layout_width="wrap_content" 15android:layout_height="wrap_content" 16android:text="视频播放器:\\n" 17android:textSize="15dp" 18android:id="@+id/textView" /> 19< FrameLayout 20android:layout_width="match_parent" 21android:background="@color/colorBlack" 22android:layout_height="300dp"> 23< VideoView 24android:layout_width="match_parent" 25android:layout_gravity="center" 26android:layout_height="300dp" 27android:id="@+id/videoView" 28/> 29 30< TextView 31android:layout_width="wrap_content" 32android:layout_height="wrap_content" 33android:textSize="15dp" 34android:text="点击播放" 35android:textColor="@color/colorWhite" 36android:id="@+id/vv_text" 37android:layout_gravity="center" /> 38< /FrameLayout> 39 40< ProgressBar 41android:id="@+id/vv_bar" 42style="?android:attr/progressBarStyleHorizontal" 43android:layout_width="match_parent" 44android:layout_height="wrap_content"/> 45 46< TextView 47android:layout_width="wrap_content" 48android:text="时间轴为：0.00/000" 49android:id="@+id/vv_starttime" 50android:layout_height="wrap_content" /> 51 52 53< LinearLayout 54android:layout_width="match_parent" 55android:orientation="horizontal" 56android:layout_gravity="center" 57android:layout_height="wrap_content"> 58< TextView 59android:layout_width="wrap_content" 60android:layout_weight="1" 61android:layout_height="wrap_content" /> 62< Button 63android:layout_width="wrap_content" 64android:text="开始" 65android:id="@+id/vv_start" 66android:layout_height="wrap_content" /> 67< Button 68android:layout_width="wrap_content" 69android:text="暂停" 70android:id="@+id/vv_pause" 71android:layout_height="wrap_content" /> 72< Button 73android:layout_width="wrap_content" 74android:text="重播" 75android:id="@+id/vv_restart" 76android:layout_height="wrap_content" /> 77< Button 78android:layout_width="wrap_content" 79android:text="下一个" 80android:id="@+id/vv_next" 81android:layout_height="wrap_content" /> 82 83< /LinearLayout> 84< TextView 85android:layout_width="wrap_content" 86android:id="@+id/vv_state" 87android:layout_height="wrap_content" /> 88 < /LinearLayout>

View Code需要添加的权限：
因为视频来源可以是网络或者本地，所以需要动态申请网络访问权限和本地文件读写权限，文件读写权限一般还需要手动获取
< uses-permission android:name="android.permission.INTERNET" /> < uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

寻找到VideoView控件：
vv=(VideoView)findViewById(R.id.videoView);

视频预装完成监听：
1 //视频准备完成时进入 2 vv.setOnPreparedListener(new MediaPlayer.OnPreparedListener() { 3@Override 4public void onPrepared(MediaPlayer mp) { 5//设置屏幕提示信息为空 6vv_text.setText(""); 7} 8 });

视频播放完成监听：
1 vv.setOnCompletionListener(new MediaPlayer.OnCompletionListener() { 2@Override 3public void onCompletion(MediaPlayer mp) { 4String strres="播放完成"; 5//判断视频的总长度与当前长度是否在误差区间内 6if(Math.abs(vv.getDuration()-vv.getCurrentPosition())> 1000){ 7 8strres="播放错误,可能无网络连接"; 9 10} 11//设置屏幕提示信息 12vv_text.setText(strres); 13 14} 15 });

视频播放错误监听：
1 vv.setOnErrorListener(new MediaPlayer.OnErrorListener() { 2@Override 3public boolean onError(MediaPlayer mp, int what, int extra) 4{ 5//设置屏幕显示信息 6vv_text.setText("视频未知错误"); 7 8return false; 9} 10});

视频卡顿和停止卡顿监听：
1 vv.setOnInfoListener(new MediaPlayer.OnInfoListener(){ 2@Override 3public boolean onInfo(MediaPlayer mp, int what, int extra){ 4 5switch(what){ 6case MediaPlayer.MEDIA_INFO_BUFFERING_START: 7//设置屏幕显示信息，开始卡顿 8vv_text.setText("视频卡顿，加载中....."); 9break ; 10case MediaPlayer.MEDIA_INFO_BUFFERING_END: 11//设置屏幕显示信息，卡顿结束 12vv_text.setText(""); 13break ; 14} 15return true; 16} 17 }) ;

设置播放资源：
1 //本地文件 2 vv.setVideoPath(Environment.getExternalStorageDirectory()+"/dongxiaodong/kk1.mp4"); 3 4 //URL形式，支持本地URL和网络URL 5 //vv.setVideoURI(Uri.parse("https://www.bilibili.com/video/xxxxx")); 6 7 //设置自带的播放控件 8 //vv.setMediaController(new MediaController(this));

播放开始按钮监听：
1 //开始播放视频按钮 2 vv_start.setOnClickListener(new View.OnClickListener() { 3@Override 4public void onClick(View v) { 5 6//设置屏幕显示信息 7vv_text.setText(""); 8 9//开始播放 10vv.start(); 11 12} 13 });

播放暂停按钮监听：
1 //暂停播放视频按钮 2 vv_pause.setOnClickListener(new View.OnClickListener() { 3@Override 4public void onClick(View v) { 5 6//设置屏幕显示信息 7vv_text.setText("视频暂停中"); 8 9//暂停视频播放 10vv.pause(); 11 12} 13 });

重新播放按钮监听：
1 //重新播放视频 2 vv_restart.setOnClickListener(new View.OnClickListener() { 3@Override 4public void onClick(View v) { 5//设置屏幕显示信息 6vv_text.setText("正在重新播放中，请稍等"); 7 8//设置时间轴显示为0 9vv_starttime.setText("时间轴为：0.00/0.00"); 10 11//设置进度条显示为0 12vv_bar.setProgress(0); 13 14//重新播放视频 15vv.resume(); 16vv.start(); 17 18} 19 });

播放下一个视频监听：
1 vv_next.setOnClickListener(new View.OnClickListener() { 2@Override 3public void onClick(View v) { 4//设置屏幕显示信息 5vv_text.setText("正在切换，请稍等"); 6 7//设置时间轴为0 8vv_starttime.setText("时间轴为：0.00/0.00"); 9 10//设置进度条为0 11vv_bar.setProgress(0); 12 13//停止播放 14vv.pause(); //暂停 15vv.stopPlayback(); //停止播放并释放资源 16 17//得到下一个视频的资源 18if(nextbool){ 19nextbool=false; 20//网络资源，该url已经过期 21vv.setVideoURI(Uri.parse("http://193.112.87.88/video/xx.flv")); 22} else { 23nextbool=true; 24//本地资源 25vv.setVideoPath(Environment.getExternalStorageDirectory()+"/dongxiaodong/kk1.mp4"); 26} 27 28//开始播放下一个 29vv.start(); 30 31} 32 });

时间轴时间显示和进度条更新实现：
时间轴时间显示计算将在后文给出解释，另外 %02d 可以实现自动补零效果，runOnUiThread可以在普通线程中进入UI线程，可以实现UI的一系列操作。
有趣的安卓视频播放器（VideoView）

文章图片
有趣的安卓视频播放器（VideoView）

文章图片
1 new Thread(new Runnable() { 2@Override 3public void run() { 4while (true){ 5//延时1秒 6try { 7Thread.sleep(1); 8} catch (InterruptedException e) { 9e.printStackTrace(); 10} 11 12//进入主线程更新UI 13runOnUiThread(new Runnable() { 14@Override 15public void run() { 16if(vv.isPlaying()) { 17 18//获取到视频播放进度 19int maxx=vv.getDuration(); 20int progress=vv.getCurrentPosition(); 21 22//设置进度条信息 23vv_bar.setMax(maxx); 24vv_bar.setProgress(progress); 25 26//得到时间轴字符串 27String strtime=String.format("时间轴为：%02d:%02d/%02d:%02d", (progress % 3600000) / 60000,(progress % 60000 ) / 1000, (maxx % 3600000) / 60000,(maxx % 60000 ) / 1000); 28//显示时间轴信息 29vv_starttime.setText(strtime); 30 31} 32} 33}); 34} 35 36} 37}).start();

View Code 
视频播放进阶利用FrameLayout的层叠效果，实现视频控件面板在视频层之上显示，利用视频控件的点击事件，实现视频点击监听然后改变视频控制面板的隐藏和显示。其他的视频播放控制代码基本以上相似
【有趣的安卓视频播放器（VideoView）】                           
有趣的安卓视频播放器（VideoView）

文章图片
                                       
有趣的安卓视频播放器（VideoView）

文章图片
             
  布局文件改变：
有趣的安卓视频播放器（VideoView）

文章图片
有趣的安卓视频播放器（VideoView）

文章图片
1 < ?xml version="1.0" encoding="utf-8"?> 2 < LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 3xmlns:tools="http://schemas.android.com/tools" 4android:layout_width="match_parent" 5android:layout_height="match_parent" 6android:paddingBottom="0dp" 7android:paddingLeft="0dp" 8android:paddingRight="0dp" 9android:orientation="vertical" 10android:paddingTop="0dp" 11tools:context="com.example.videodong.MainActivity"> 12 13< TextView 14android:layout_width="wrap_content" 15android:layout_height="wrap_content" 16android:text="视频播放器:\\n" 17android:textSize="15dp" 18android:id="@+id/textView" /> 19< FrameLayout 20android:layout_width="match_parent" 21android:background="@color/colorBlack" 22android:layout_height="230dp"> 23< VideoView 24android:layout_width="match_parent" 25android:layout_gravity="center" 26android:layout_height="230dp" 27android:id="@+id/videoView" 28/> 29< FrameLayout 30android:layout_width="match_parent" 31android:layout_gravity="bottom" 32android:id="@+id/vv_framel" 33android:layout_height="wrap_content"> 34< ImageView 35android:layout_width="match_parent" 36android:background="@color/colorWhite" 37android:alpha="0.5" 38android:layout_height="match_parent" /> 39< LinearLayout 40android:layout_width="match_parent" 41android:orientation="vertical" 42 43android:layout_height="wrap_content"> 44< ProgressBar 45android:id="@+id/vv_bar" 46style="?android:attr/progressBarStyleHorizontal" 47android:layout_width="match_parent" 48android:layout_height="wrap_content"/> 49< LinearLayout 50android:layout_width="match_parent" 51android:orientation="horizontal" 52android:layout_gravity="center" 53android:layout_height="wrap_content"> 54< TextView 55android:layout_width="wrap_content" 56android:text="时间轴为：0.00/000" 57android:id="@+id/vv_starttime" 58android:layout_weight="1" 59android:layout_height="wrap_content" /> 60< Button 61android:layout_width="wrap_content" 62android:text="开始" 63style="?android:attr/buttonStyleSmall" 64android:id="@+id/vv_start" 65android:layout_height="wrap_content" /> 66< Button 67android:layout_width="wrap_content" 68android:text="暂停" 69android:id="@+id/vv_pause" 70style="?android:attr/buttonStyleSmall" 71android:layout_height="wrap_content" /> 72< Button 73android:layout_width="wrap_content" 74android:text="重播" 75style="?android:attr/buttonStyleSmall" 76android:id="@+id/vv_restart" 77android:layout_height="wrap_content" /> 78

    推荐阅读


    上一篇：AndroidStudio_RecyclerView

    下一篇：create-react-app 构建的项目使用 css module 方式来书写 css