Today I will show you how to use the HELU VideoView library to easily create and control videos in your app. First of all, I would like to point out that HELU VideoView has only basic control options, like Play/Pause, Mute and SeekBar. It can only display one simple video to the user. It’s not meant to be a complex media player.
If you ask what HELU VideoView can offer to you that VideoView cannot, the answer is simple: HELU VideoView offers more convenient methods that can be used and is simpler to set up and use, without losing direct access to MediaPlayer. Some of those helpful methods are: seekToBeginning()
, playFromBeginning()
, setOnStateChangeListener()
, etc.. You also have better control over video looping, and autoplay/pause when attaching and detaching view. This can be super helpful when your activity/fragment lose focus for some reason. In my opinion, the main advantage of this library is that you have complete control over what the player looks like. You can create your own buttons and place them anywhere you like, inside or outside the player view.
Let’s get down to examples. Start by adding the HELU VideoView library to your Gradle file:
implementation 'cz.helu.android:heluvideoview:2.0.0'
Now you have two options. They are pretty similar as they both use the Builder
class provided by the HELU VideoView library. The first one is creating the view manually in your java/kotlin source using the Builder
class. The second one is creating the view inside you XML layout file and then just initializing it from the Builder class using the initFromBuilder()
method.
Here’s an example of what it could look like in both cases:
var builder = HeluVideoView.Builder(context)
.withScalingMode(HeluVideoView.ScaleType.SCALE_TO_FIT_VIDEO)
.withVideoUrl("Some Video URL")
.withPlayView(playButtonView)
.withPauseView(pauseButtonView)
// In first case we would just build the view
var videoView = builder.build()
// In second case we would init already existing view from builder
findViewById<HeluVideoView>(R.id.video_view).initFromBuilder(builder)
As you can see, we set ScaleType.SCALE_TO_FIT_VIDEO
, which will resize the HELU VideoView Height to fit the video size. We also set play and pause buttons views. HELU VideoView will now use them and automatically set their visibility and OnClickListeners based on the MediaPlayer state.
The next cool thing is that we can simply set any SeekBar view to HELU VideoView, and it will automatically update its progress and also set all necessary listeners, so the video view can be controlled by it.
Another interesting part is the withPauseOnVisibilityChange()
builder method, which will make sure the video is automatically paused when the view visibility changes. This is set to true
by default. You can see how this works in the video below:
Setting withAttachViewPolicy()
can also come in handy. We have three options here: continue, pause and start over. They will tell HELU VideoView what should happen when the player view is attached to any Layout. This can happen for example in RecyclerView
.
I hope you like my HELU VideoView library. You can see all methods and examples here or go to STRV.io, STRV's new open source library hub. If you have any feature requests or issues do not hesitate to contact me.