We have now released an api.video player for Android. The api.video player helps you to include your videos in your Android applications very easily and quickly. In this tutorial, we are going to show how to add an api.video player to your Android application. It will only take 5 minutes. Let’s do this! 👊

Before starting this tutorial, you can upload a video to your api.video. If you haven’t yet, you can check Upload your first video guide, which will walk you through your first video upload. The video that you have uploaded to your api.video account will have an assigned videoId. In the following steps, we will call for your videoId using the YOUR_VIDEO_ID parameter.

To just give you a quick preview, we are going to create an Android application with an api.video player that looks like this:

The api.video player for Android

The api.video Android player is available on GitHub and comes with an example application, and the artifact is hosted on Maven Central.

The minimum Android API version supported by the api.video Android player is 24. Make sure that you don’t have a minSdk version under 24.

The API is divided into 2 main components:

• The player view: This component displays the video and its controls: ApiVideoExoPlayerView class.
• The player controller: This component controls the video and its events: ApiVideoPlayerController class.

Add api.video Android player to your project

If you don’t have an Android application yet, you need to create one before you go further. The Build Your First Android App in Java is a simple guide that will help you create your Android application.

Dependency

The first thing is to add the api.video Android player to your project dependencies. In your application build.gradle, add your dependencies tag as shown below:

dependencies {
	implementation 'video.api:android-player:1.1.4'
}

It’s always good to check out if a new version is available.

To have access to the view, I am going to use ViewBinding in this tutorial because it is elegant to use as it will be more user-friendly. Now we add the android tag:

android {
		buildFeatures {
        viewBinding true
    }
}

XML Layout

In your Activity layout, add a player view:

<video.api.player.ApiVideoExoPlayerView
        android:id="@+id/playerView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

You might have some constraints to add depending on the parent layout.

With ViewBinding, we can access our ApiVideoExoPlayerView by using the following field:

binding.playerView

Implementation

The main part of the implementation is to create a player controller, but it depends on several other components.

To manipulate video from api.video, the videoId is wrapped in an object called VideoOptions:

val videoOptions = VideoOptions("YOUR_VIDEO_ID", VideoType.VOD)

Create a player controller in your Activity. For example, in the onResume:

override fun onResume() {
	super.onResume()
  val videoOptions = VideoOptions("YOUR_VIDEO_ID", VideoType.VOD)
	val player = ApiVideoPlayerController(
		applicationContext, // the application context
		videoOptions, // initial video options
		false, // autoplay: true to play the video when the video has been loaded, false wait for an explicit call to `play`
		playerView = binding.playerView // the view we already created
	)
}

Launch the application. You have successfully integrated the api.video Android player in your application! 🥳🥳🥳

Video privacy setting

For more information on changing video privacy settings, see this article.

If your application requires the use of private videos, then pass your private token to the VideoOptions:

val videoOptions = VideoOptions("YOUR_VIDEO_ID", VideoType.VOD, "YOUR_PRIVATE_VIDEO_TOKEN")

Fullscreen

For the fullscreen button, you will have to develop the fullscreen behavior. The base principles are:

• When full screen is activated, hide all surrounding views, menu,…, and lock the application in landscape mode.
• When the full screen is deactivated, display surrounding views and unlock the application orientation.

These behaviors must be implemented on the onFullScreenModeChanged of ApiVideoExoPlayerView.Listener:

### Fullscreen

For the fullscreen button, you will have to develop the fullscreen behavior. The base principles are: 

- When full screen is activated, hide all surrounding views, menu,…, and lock the application in landscape mode.
- When the full screen is deactivated, display surrounding views and unlock the application orientation.

These behaviors must be implemented on the `onFullScreenModeChanged` of `ApiVideoExoPlayerView.Listener`:

In this quick tutorial, you learned about how to simply add an api.video player for your Android application. Now you know how to add the api.video player as a dependency, configure the XML layout, and implement the player controller. Moreover, you learned how to change your video privacy and how to set up a fullscreen behavior.

You can successfully integrate the api.video Android player in your own application by following the steps in this tutorial. For an example of api.video Android player, see the example provided in the player repository.

If you miss any features, face any bugs, or come across any other issues, we will be happy to help you on our GitHub issues page.🤝