The Android Media SDK offers easy integration with the ExoPlayer to play 2x2 videos in 4V. By leveraging the power of ExoPlayer, you can play 2x2 or 2x1 videos using different media sources.
In this guide, you will learn how to load a 2x2 video from the project's asset folder and play it using ExoPlayer on the QuadView.
We won't go over the implementation of ExoPlayer in this tutorial. You can learn more about ExoPlayer here.
Setup Resources
Add the video we will be working with to the assets directory of your project.
You can download the video for this tutorial below.
Add this video file to your project's assets directory as shown below
Setup Environment.
Setup the Android SDK in your Android project by following the steps outlined in the Getting Started Section .
We will also need to add the ExoPlayer dependency to our project. Add the following dependency to your app's build.gradle
file.
Copy implementation 'com.google.android.exoplayer:exoplayer:2.11.7'
Add the QuadView to your XML Layout file
Copy <com.leiainc.androidsdk.core.QuadView
android:id="@+id/quad_view"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
The QuadView is a reusable Android view which allows you to easily render a quad with just one line of code.
Link the QuadView to your Activity or Fragment
Obtain the reference to the QuadView in your Activity or Fragment using findViewById()
Kotlin Java
Copy val quadView: QuadView = findViewById (R.id.quad_view)
Copy QuadView quadView = findViewById( R . id . quad_view ) ;
Implement SurfaceTextureReady Callbacks
In order to play videos on the QuadView, you need to obtain the SurfaceTexture when it becomes available. You can do so by implementing the SurfaceTextureReadyCallback
which will notify you when the Surface Texture becomes available via callbacks
Kotlin Java
Copy class VideoActivity : AppCompatActivity (), SurfaceTextureReadyCallback {
// rest of activity code
override fun onSurfaceTextureReady (surfaceTexture: SurfaceTexture ?) {
TODO ( "Not yet implemented" )
}
}
Copy public class VideoActivity extends AppCompatActivity implements SurfaceTextureReadyCallback {
// rest of activity code
@ Override
public void onSurfaceTextureReady ( SurfaceTexture surfaceTexture) {
// TODO
}
}
Attach Callbacks to QuadView
We now have to attach the callback to the QuadView. We can do this by calling getInputSurfaceTexture()
as shown below.
Kotlin Java
Copy val quadView: QuadView = findViewById (R.id.quad_view)
quadView. getInputSurfaceTexture ( this )
Copy QuadView quadView = findViewById( R . id . quad_view ) ;
quadView . getInputSurfaceTexture ( this );
Initialize ExoPlayer
Initialize ExoPlayer in your Activity's onCreate() function. Add exoPlayer
as a global variable so it can be accessed in other functions as well.
Kotlin Java
Copy private lateinit var exoPlayer: SimpleExoPlayer
override fun onCreate (savedInstanceState: Bundle ?) {
super . onCreate (savedInstanceState)
setContentView (R.layout.activity_video)
val quadView: QuadView = findViewById (R.id.quad_view)
quadView. getInputSurfaceTexture ( this )
// Initialize ExoPlayer
exoPlayer = SimpleExoPlayer. Builder ( this ). build ()
}
Copy private SimpleExoPlayer exoPlayer;
@ Override
public void onCreate( Bundle savedInstanceState) {
super . onCreate (savedInstanceState);
setContentView( R . layout . activity_video ) ;
QuadView quadView = findViewById( R . id . quad_view ) ;
quadView . getInputSurfaceTexture ( this );
// Initialize ExoPlayer
exoPlayer = SimpleExoPlayer . Builder ( this ) . build ();
}
Implement Surface Texture Ready
We can now use the surface texture to play the video using ExoPlayer. We can do this by passing the surface texture to the ExoPlayer.
Kotlin Java
Copy exoPlayer. setVideoSurface ( Surface (surfaceTexture))
Copy exoPlayer . setVideoSurface ( new Surface(surfaceTexture) );
You can now load the asset and play it using ExoPlayer. We are using a Looping Media Source to loop the video in this example.
Kotlin Java
Copy class VideoActivity : AppCompatActivity (), SurfaceTextureReadyCallback {
// rest of activity code
override fun onSurfaceTextureReady (surfaceTexture: SurfaceTexture ?) {
// Set surface Texture in ExoPlayer
exoPlayer. setVideoSurface ( Surface (surfaceTexture))
// Load Asset
val mp4VideoUri =
Uri. parse ( "asset:///cat_2x2.mp4" )
val userAgent = Util. getUserAgent ( this , "exoplayerQuadExample" )
val dataSourceFactory = DefaultDataSourceFactory ( this , userAgent)
// Create a looping Media Source
val videoSource: MediaSource = ProgressiveMediaSource. Factory (dataSourceFactory)
. createMediaSource (mp4VideoUri)
val loopingSource = LoopingMediaSource (videoSource)
exoPlayer. prepare (loopingSource)
}
}
Copy public class VideoActivity extends AppCompatActivity implements SurfaceTextureReadyCallback {
// rest of activity code
@ Override
public void onSurfaceTextureReady ( SurfaceTexture surfaceTexture) {
exoPlayer . setVideoSurface ( new Surface(surfaceTexture) );
// Load Asset
Uri mp4VideoUri =
Uri . parse ( "asset:///cat_2x2.mp4" );
String userAgent = Util . getUserAgent ( this , "exoplayerQuadExample" );
DefaultDataSourceFactory dataSourceFactory = new DefaultDataSourceFactory( this , userAgent) ;
// Create a looping Media Source
MediaSource videoSource = ProgressiveMediaSource . Factory (dataSourceFactory)
. createMediaSource (mp4VideoUri);
LoopingMediaSource loopingSource = new LoopingMediaSource(videoSource) ;
exoPlayer . prepare (loopingSource);
}
}
Playing the Video
With the ExoPlayer now setup, we can play the video by calling playWhenReady()
in your Activity's onResume()
function.
Kotlin Java
Copy override fun onResume () {
super . onResume ()
exoPlayer.playWhenReady = true
}
Copy @ Override
protected void onResume() {
super . onResume ();
exoPlayer . setPlayWhenReady ( true );
}
Pause playing the video when the activity's onPause() is called.
Kotlin Java
Copy override fun onPause () {
super . onPause ()
exoPlayer.playWhenReady = false
}
Copy @ Override
protected void onPause() {
super . onPause ();
exoPlayer . setPlayWhenReady ( false );
}