A Guide to VideoView With MediaController

Enabling the user to access and consume content of the device(such as mobiles or tablets etc) is an essential use of smartphones nowadays. Especially when it comes to “video” it becomes an important and most common usage of the device.

Android includes two classes which are responsible for the implementation of video playback on Android devices. These classes are very simple and easy to implement when developing applications. Today I  will guide you on how to use these two classes, VideoView and MediaController, to get a working video playback application.

In this example we will play a mp4 from SDCard/External-storage using android.widget.VideoView. Also we will control the video options with enabling/disabling the MediaController which contains the buttons like “Play/Pause”, “Rewind”, “Fast Forward” and a progress slider, by calling VideoView.setMediaController().

User will be able to control the video with the MediaController by tapping on the video (or the VideoView) to display the controller. Follow the steps below to get the working code of the same what we have discussed yet.

Step1: Create a new android project in your android IDE. Make sure you have some MP4 files on your device/emulator External Storage to use in the example.

Step2: Add following permission to your manifest file:

 

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>

 

NOTE: You will get “can’t play this video” dialog if you forgot to add the permission in manifest or if there is no MP4 file onto your SDCard.

Step3: Write following into your main layout file:

 

<LinearLayout 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"
android:orientation="vertical"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin" >

<ToggleButton
android:id="@+id/enableMediaController"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textOn="Disable MediaController"
android:textOff="Enable MediaController"
android:checked="true"/>
<VideoView
android:id="@+id/myvideoview"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />

</LinearLayout>

 

 

Step4: Write following into your main activity file:

 

package com.example.videoviewformp4;

import java.io.File;

import android.support.v7.app.ActionBarActivity;
import android.widget.CompoundButton;
import android.widget.CompoundButton.OnCheckedChangeListener;
import android.widget.MediaController;
import android.widget.Toast;
import android.widget.ToggleButton;
import android.widget.VideoView;
import android.os.Bundle;
import android.os.Environment;

public class MainActivity extends ActionBarActivity {

ToggleButton enableMediaController;
VideoView myVideoView;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

enableMediaController = (ToggleButton)findViewById(R.id.enableMediaController);
myVideoView = (VideoView)findViewById(R.id.myvideoview);
myVideoView.setVideoPath(getViewSrc());
myVideoView.requestFocus();
myVideoView.start();

setMediaController();

enableMediaController.setOnCheckedChangeListener(new OnCheckedChangeListener(){

@Override
public void onCheckedChanged(CompoundButton buttonView,boolean isChecked) {
setMediaController();
}});
}

private void setMediaController(){
if(enableMediaController.isChecked()){
myVideoView.setMediaController(new MediaController(this));
}else{
myVideoView.setMediaController(null);
}
}

private String getViewSrc(){
File extStorageDirectory = Environment.getExternalStorageDirectory();
String s = extStorageDirectory.getAbsolutePath() + "/test.mp4";
Toast.makeText(MainActivity.this, s, Toast.LENGTH_SHORT).show();
return s;
}
}

 

 

OutPut

That’s it… Enjoy Coding 🙂

 

 

Leave a Comment: