VideoView Examples

If you're building an Android app that involves playing videos, VideoView is the go-to widget. VideoView is a built-in widget in the Android framework that allows you to play videos in your app. In this article, we'll discuss what VideoView is and how it works, along with some code examples.

What is VideoView?

VideoView is a widget that's used to display videos in an Android app. It's a subclass of the SurfaceView class and is built on top of the MediaPlayer API. VideoView is designed to make it easy for developers to add video playback functionality to their apps without having to deal with the complexities of the MediaPlayer API.

How does VideoView work?

VideoView works by creating an instance of the MediaPlayer class and attaching it to a SurfaceView. The SurfaceView is created by the VideoView widget, and it's responsible for rendering the video frames. When a video is played, the MediaPlayer instance loads the video data and sends it to the SurfaceView for rendering.

Using VideoView in your app

To use VideoView in your app, you first need to add it to your layout file. Here's an example:

<VideoView
    android:id="@+id/video_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

This creates a VideoView widget that takes up the entire screen. You can customize the layout_width and layout_height attributes to fit your app's design.

Next, you need to load the video into the VideoView. Here's an example code snippet:

VideoView videoView = findViewById(R.id.video_view);
videoView.setVideoPath("android.resource://" + getPackageName() + "/" + R.raw.my_video);
videoView.start();

This code loads a video from the raw resource folder and starts playing it in the VideoView. You can also load videos from other sources, such as a URL or a file path.

Controlling playback

VideoView provides a number of methods for controlling playback, such as pause(), resume(), and seekTo(). Here's an example of how to pause and resume playback:

VideoView videoView = findViewById(R.id.video_view);
videoView.pause(); // pauses playback
videoView.resume(); // resumes playback

You can also use the seekTo() method to jump to a specific point in the video:

VideoView videoView = findViewById(R.id.video_view);
videoView.seekTo(5000); // jumps to 5 seconds into the video

You can find VideoView API reference here.

Otherwise let's look at sime examples.

Example 1: Kotlin Android - Stream Video using VideoView

This is a Kotlin ANdroid example on how to stream a video from online using VideoView.

Here is the demo screenshot of the project:

Step 1: Create Project

Start by creating an empty Android Studio project.

Step 2: Dependencies

No third party dependency is needed for this project.

Step 3: Design Layout

Add a VideoView, two ImageViews, a SeekBar as well as a TextView in your MainActivity's layout as follows:

activity_main.xml

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

    <VideoView
        android:id="@+id/videoView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true" />

    <ImageView
        android:id="@+id/playPauseButton"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_below="@+id/videoView"
        android:layout_marginTop="5dp"
        android:src="@mipmap/play_button" />

    <ImageView
        android:id="@+id/stopButton"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_below="@+id/videoView"
        android:layout_marginLeft="2dp"
        android:layout_marginTop="5dp"
        android:layout_toRightOf="@id/playPauseButton"
        android:src="@mipmap/stop_button" />

    <TextView
        android:id="@+id/runningTime"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/videoView"
        android:layout_marginLeft="5dp"
        android:layout_marginTop="15dp"
        android:layout_toRightOf="@id/stopButton"
        android:text="00:00"
        android:textColor="@android:color/black"
        android:textSize="16dp" />

    <SeekBar
        android:id="@+id/seekBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/videoView"
        android:layout_marginTop="10dp"
        android:layout_toRightOf="@id/runningTime" />

</RelativeLayout>

Step 4: Write Code

Replace your MainActivity with the following code:

MainActivity.kt

import android.app.ProgressDialog
import android.media.MediaPlayer
import android.net.Uri
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import android.util.Log
import android.view.View
import android.widget.*
import kotlin.concurrent.fixedRateTimer

//Always device to run this App
class MainActivity : AppCompatActivity(), MediaPlayer.OnCompletionListener,
        MediaPlayer.OnErrorListener, MediaPlayer.OnPreparedListener, SeekBar.OnSeekBarChangeListener,
        View.OnClickListener {

    private val HLS_STREAMING_SAMPLE = "rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mov"
    private var sampleVideoView: VideoView? = null
    private var seekBar: SeekBar? = null
    private var playPauseButton: ImageView? = null
    private var stopButton: ImageView? = null
    private var runningTime: TextView? = null
    private var currentPosition: Int = 0
    private var isRunning = false

    //Always device to run this App
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        sampleVideoView = findViewById<VideoView>(R.id.videoView)
        sampleVideoView?.setVideoURI(Uri.parse(HLS_STREAMING_SAMPLE))

        playPauseButton = findViewById<ImageView>(R.id.playPauseButton)
        playPauseButton?.setOnClickListener(this)

        stopButton = findViewById<ImageView>(R.id.stopButton)
        stopButton?.setOnClickListener(this)

        seekBar = findViewById<SeekBar>(R.id.seekBar)
        seekBar?.setOnSeekBarChangeListener(this)

        runningTime = findViewById<TextView>(R.id.runningTime)
        runningTime?.setText("00:00")

        Toast.makeText(this, "Buffering...Please wait", Toast.LENGTH_LONG).show()

        //Add the listeners
        sampleVideoView?.setOnCompletionListener(this)
        sampleVideoView?.setOnErrorListener(this)
        sampleVideoView?.setOnPreparedListener(this)
    }

    override fun onCompletion(mp: MediaPlayer?) {
        Toast.makeText(baseContext, "Play finished", Toast.LENGTH_LONG).show()
    }

    override fun onError(mp: MediaPlayer?, what: Int, extra: Int): Boolean {
        Log.e("video", "setOnErrorListener ")
        return true
    }

    override fun onPrepared(mp: MediaPlayer?) {
        seekBar?.setMax(sampleVideoView?.getDuration()!!)
        sampleVideoView?.start()

        val fixedRateTimer = fixedRateTimer(name = "hello-timer",
                initialDelay = 0, period = 1000) {
            refreshSeek()
        }

        playPauseButton?.setImageResource(R.mipmap.pause_button)
    }

    fun refreshSeek() {
        seekBar?.setProgress(sampleVideoView?.getCurrentPosition()!!);

        if (sampleVideoView?.isPlaying()!! == false) {
            return
        }

        var time = sampleVideoView?.getCurrentPosition()!! / 1000;
        var minute = time / 60;
        var second = time % 60;

        runOnUiThread {
            runningTime?.setText(minute.toString() + ":" + second.toString());
        }
    }

    var refreshTime = Runnable() {
        fun run() {

        }
    };

    override fun onProgressChanged(seekBar: SeekBar?, progress: Int, fromUser: Boolean) {
        //do nothing
    }

    override fun onStartTrackingTouch(seekBar: SeekBar?) {
        //do nothing
    }

    override fun onStopTrackingTouch(seekBar: SeekBar?) {
        sampleVideoView?.seekTo(seekBar?.getProgress()!!)
    }

    override fun onClick(v: View?) {
        if (v?.getId() == R.id.playPauseButton) {
            //Play video
            if (!isRunning) {
                isRunning = true
                sampleVideoView?.resume()
                sampleVideoView?.seekTo(currentPosition)
                playPauseButton?.setImageResource(R.mipmap.pause_button)
            } else { //Pause video
                isRunning = false
                sampleVideoView?.pause()
                currentPosition = sampleVideoView?.getCurrentPosition()!!
                playPauseButton?.setImageResource(R.mipmap.play_button)
            }
        } else if (v?.getId() == R.id.stopButton) {
            playPauseButton?.setImageResource(R.mipmap.play_button)
            sampleVideoView?.stopPlayback()
            currentPosition = 0
        }
    }
}

Run

Copy the code or download it in the link below, build and run.

Reference

Here are the reference links:

Number	Link
1.	Download Example
2.	Follow code author

Example 2: Kotlin Android VideoView - Play Local mp4 video

Learn VideoView using this simple example written in Kotlin. Learn how to play video files such as mp4 easily without much code. You need a VideoView widget for that and this example shows you how to use it to play mp4 file.

This example will show you how to load and play a video file located in our raw folder or directory.

Step 1: Create Project

Start by creating an empty Android Studio project.

Step 2: Dependencies

No external dependencies are needed for this.

Step 3: Add Video File

Add an mp4 file to your raw directory under the res folder. If you do not have such a directory then create it.

You can download a sample video file here

Step 4: Design Layout

Simply add VideoView to your xml layout as follows:

activity_main.xml

<?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:gravity="center"
    tools:context=".MainActivity">

    <VideoView
        android:id="@+id/videoView"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:layout_marginEnd="20dp"
        android:layout_marginStart="20dp"/>

</LinearLayout>

Step 5: Play Video

First reference the video file path as follows:

        val filePlace = "android.resource://"+ packageName + "/raw/" + R.raw.video

Then set the path to the videoview using the setVideoUri() function as follows:

        videoView.setVideoURI(Uri.parse(filePlace))

Then set the MediaController then play the video using the start() function:

        videoView.setMediaController(MediaController(this))
        videoView.start()

Here's the full code:

MainActivity.kt

import android.net.Uri
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.MediaController
import android.widget.VideoView

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val fileName = "video"
        val filePlace = "android.resource://"+ packageName + "/raw/" + R.raw.video
        val videoView = findViewById<VideoView>(R.id.videoView)
        videoView.setVideoURI(Uri.parse(filePlace))

        videoView.setMediaController(MediaController(this))
        videoView.start()
    }
}

Run

Copy the code or download it in the link below, build and run.

Reference

Here are the reference links:

Number	Link
1.	Download Example
2.	Follow code author
3.	Code: Apache 2.0 License

Conclusion

VideoView is a powerful widget that makes it easy to add video playback functionality to your Android app. By understanding how VideoView works and how to use its methods, you can create a seamless video playback experience for your users.

What is VideoView?​

How does VideoView work?​

Using VideoView in your app​

Controlling playback​

Example 1: Kotlin Android - Stream Video using VideoView​

Step 1: Create Project​

Step 2: Dependencies​

Step 3: Design Layout​

Step 4: Write Code​

Run​

Reference​

Example 2: Kotlin Android VideoView - Play Local mp4 video​

Step 1: Create Project​

Step 2: Dependencies​

Step 3: Add Video File​

Step 4: Design Layout​

Step 5: Play Video​

Run​

Reference​

Conclusion​

What is VideoView?

How does VideoView work?

Using VideoView in your app

Controlling playback

Example 1: Kotlin Android - Stream Video using VideoView

Step 1: Create Project

Step 2: Dependencies

Step 3: Design Layout

Step 4: Write Code

Run

Reference

Example 2: Kotlin Android VideoView - Play Local mp4 video

Step 1: Create Project

Step 2: Dependencies

Step 3: Add Video File

Step 4: Design Layout

Step 5: Play Video

Run

Reference

Conclusion