Let's Stream that Video - an ExoPlayer Starters Guide

DroidCon India 2019

Have you ever thought how much work it is to build a streaming video player as robust as YouTube? Have you ever wondered how to play a video with subtitles and multiple audio tracks like Netflix? How does YouTube do streaming which adapts the video quality based on your network speed?

In this talk, we will take a look at ExoPlayer - Android's open-source video player which allows video streaming with minimal efforts from the developer side. We will take a brief look at what are the limitations of the MediaPlayer API provided by the android system and the advantages of using ExoPlayer. We will understand how to stream video, add subtitles, enable multiple language audio selections.

We will also understand how the ExoPlayer can help us in playing video in a flaky network. We will take a look at how to customize the UI for Video Player.

Transcript

1. Hello!!
2. Let's Stream that Video
3. Android Engineer Bedanta Bikash @iamBedant
5. Brijesh Masrani Lead Android Engineer @brijeshmasrani
6. About this talk How many of you have watched a video on ExoPlayer? How many of you have watched a video on YouTube or Netflix?
7. Media Player Part of Android OS
 Supports all API levels LOOKING BACK
8. Media Player Low level Media APIs Your App Media Player Exo Player
9. Create Video URI val videoURL = Uri.parse("https:!"myVideosmall.mp4") val surfaceView = findViewById<SurfaceView>(R.id.surface_view) val mediaPlayer = MediaPlayer.create(context, videoURL, surfaceView.ho mediaPlayer.start() Play video using MediaPlayer
10. val videoURL = Uri.parse("https:!"myVideosmall.mp4") val surfaceView = findViewById<SurfaceView>(R.id.surface_view) val mediaPlayer = MediaPlayer.create(context, videoURL, surfaceView.ho mediaPlayer.start() Find Surface Play video using MediaPlayer
11. val videoURL = Uri.parse("https:!"myVideosmall.mp4") val surfaceView = findViewById<SurfaceView>(R.id.surface_view) val mediaPlayer = MediaPlayer.create(context, videoURL, surfaceView.ho mediaPlayer.start() Create Media Player Play video using MediaPlayer
12. val videoURL = Uri.parse("https:!"myVideosmall.mp4") val surfaceView = findViewById<SurfaceView>(R.id.surface_view) val mediaPlayer = MediaPlayer.create(context, videoURL, surfaceView.ho mediaPlayer.start() Start Media Player Play video using MediaPlayer
13. val videoURL = Uri.parse("https:!"myVideosmall.mp4") val surfaceView = findViewById<SurfaceView>(R.id.surface_view) val mediaPlayer = MediaPlayer.create(context, videoURL, surfaceView.ho mediaPlayer.start() Voila!
14. Why do we need ExoPlayer then?
15. • BlackBox • No customisation • Slow updates • Good for simple use-cases • Easy Implementation • No size overhead The Bad The Good Media Player
16. Media Player Low level Media APIs Your App Media Player Exo Player
17. Exo Player Low level Media APIs Your App ExoPlayer
18. ✓ Open Source ✓ Fewer device specific issues. ✓ Updatable with application. ✓ Highly customisable. ✓ Support for Widevine common encryption. ✓ Support for DASH, HLS and Smooth Streaming. Advantages of ExoPlayer
19. Adaptive Bitrate streaming
20. Adaptive Bitrate streaming 360p 1080p 720p
21. Adaptive Bitrate streaming 360p 360p 1080p 720p
22. Adaptive Bitrate streaming 360p 720p 1080p
23. Adaptive Bitrate streaming 360p 720p 1080p
24. Adaptive Bitrate streaming 360p 720p 1080p
25. Adaptive Bitrate streaming 360p 1080p 720p
26. Implementing ExoPlayer
27. Gradle Dependency implementation 'com.google.android.exoplayer:exoplayer:2.XX.XX'
28. <com.google.android.exoplayer2.ui.SimpleExoPlayerView android:id="@+id/playerView" android:layout_width="match_parent" android:layout_height="wrap_content"/> XML Element
29. exoPlayer : SimpleExoPlayer = ExoPlayerFactory.newSimpleInstance(this) playerView.player = exoPlayer exoPlayer.playWhenReady = true Exo Player Instance
30. exoPlayer : SimpleExoPlayer = ExoPlayerFactory.newSimpleInstance(this) playerView.player = exoPlayer exoPlayer.playWhenReady = true Exo Player Instance
31. exoPlayer : SimpleExoPlayer = ExoPlayerFactory.newSimpleInstance(this) playerView.player = exoPlayer exoPlayer.playWhenReady = true Exo Player Instance
32. val dataSourceFactory = DefaultDataSourceFactory(context, Util.getUserAgent(context, "app-name")) val videoSource = DashMediaSource.Factory(dataSourceFactory) .createMediaSource(dashUri) player.prepare(videoSource) Create Data Source Factory
33. val dataSourceFactory = DefaultDataSourceFactory(context, Util.getUserAgent(context, "app-name")) val videoSource = DashMediaSource.Factory(dataSourceFactory) .createMediaSource(dashUri) player.prepare(videoSource) Create Media Source
34. val dataSourceFactory = DefaultDataSourceFactory(context, Util.getUserAgent(context, "app-name")) val videoSource = DashMediaSource.Factory(dataSourceFactory) .createMediaSource(dashUri) player.prepare(videoSource) Prepare the Player
35. Next big streaming app DEFAULT PLAYER
40. By Setting Attributes Custom layout file Globally override xml
41. By Setting Attributes app:resize_mode
42. By Setting Attributes app:resize_mode = fit
43. By Setting Attributes app:resize_mode = fit
44. By Setting Attributes app:resize_mode = fill
45. By Setting Attributes app:resize_mode = zoom app:resize_mode = zoom
46. By Setting Attributes app:resize_mode app:show_timeout app:rewind_increment app:fastforward_increment
47. By Setting Attributes Custom layout file Globally override xml
48. By Setting Attributes Custom layout file Globally override xml
49. Globally override xml Player View Playback Control View exo_simple_player_view.xml exo_playback_control_view.xml
50. Globally override xml Playback Control View exo_playback_control_view.xml
51. Globally override xml Playback Control View exo_playback_control_view.xml Play : @id/exo_play Pause : @id/exo_pause Fast forward : @id/exo_ffwd Rewind : @id/exo_rew
52. Globally override xml Playback Control View exo_playback_control_view.xml
53. Globally override xml Player View exo_simple_player_view.xml
54. Globally override xml Player View exo_simple_player_view.xml Buffering View : @id/exo_buffering Subtitles View : @id/exo_subtitles
55. By Setting Attributes Custom layout file Globally override xml
56. By Setting Attributes Custom layout file Globally override xml
57. Custom layout file
58. Custom layout file
59. Custom layout file <SimpleExoPlayerView android:id="@+id/player" $%&$%& app:controller_layout_id="@layout/custom_ui" $%&$%&- />
60. Exo Player Internals
61. Exo Player HttpDataSource Track Selector Load Control Video Renderer Audio Renderer Media Source Renderer Exo Player Internals
62. Exo Player HttpDataSource Track Selector Load Control Video Renderer Audio Renderer Media Source Renderer Exo Player Internals
63. Exo Player HttpDataSource Track Selector Load Control Video Renderer Audio Renderer Media Source Renderer Exo Player Internals
64. Exo Player HttpDataSource Track Selector Load Control Video Renderer Audio Renderer Media Source Renderer Exo Player Internals TG
65. Exo Player HttpDataSource Track Selector Load Control Video Renderer Audio Renderer Media Source Renderer Exo Player Internals TG RC RC
66. Exo Player HttpDataSource Track Selector Load Control Video Renderer Audio Renderer Media Source Renderer Exo Player Internals TG RC RC
67. Exo Player HttpDataSource Track Selector Load Control Video Renderer Audio Renderer Media Source Renderer Exo Player Internals TG RC RC TS
68. Exo Player HttpDataSource Track Selector Load Control Video Renderer Audio Renderer Media Source Renderer Exo Player Internals TS
69. Exo Player HttpDataSource Track Selector Load Control Video Renderer Audio Renderer Media Source Renderer Exo Player Internals TS
70. Load Control Exo Player HttpDataSource Video Renderer Audio Renderer Track Selector Renderer Media Source Exo Player Internals
71. Load Control Exo Player HttpDataSource Video Renderer Audio Renderer Track Selector Renderer Media Source Exo Player Internals
72. Load Control Exo Player HttpDataSource Video Renderer Audio Renderer Track Selector Renderer Media Source Exo Player Internals
73. Load Control Exo Player HttpDataSource Video Renderer Audio Renderer Track Selector Renderer Media Source Exo Player Internals
74. Load Control Exo Player HttpDataSource Video Renderer Audio Renderer Track Selector Renderer Media Source Exo Player Internals
75. Load Control Exo Player HttpDataSource Video Renderer Audio Renderer Track Selector Renderer Media Source Exo Player Internals
76. Load Control Exo Player HttpDataSource Video Renderer Audio Renderer Track Selector Renderer Media Source Exo Player Internals
77. Load Control Exo Player HttpDataSource Video Renderer Audio Renderer Track Selector Renderer Media Source Exo Player Internals
78. Load Control Exo Player HttpDataSource Video Renderer Audio Renderer Track Selector Renderer Media Source Exo Player Internals
79. Media Composition
80. Creating Playlist Play only a part of Video Add Subtitle to a video
81. Creating Playlist val firstSource = ProgressiveMediaSource.Factory() .createMediaSource(firstVideoUri) val secondSource = ProgressiveMediaSource.Factory() .createMediaSource(secondVideoUri) val concatenatedSource = ConcatenatingMediaSource(firstSource, secondSource)
82. Creating Playlist val firstSource = ProgressiveMediaSource.Factory() .createMediaSource(firstVideoUri) val secondSource = ProgressiveMediaSource.Factory() .createMediaSource(secondVideoUri) val concatenatedSource = ConcatenatingMediaSource(firstSource, secondSource)
83. Creating Playlist val firstSource = ProgressiveMediaSource.Factory() .createMediaSource(firstVideoUri) val secondSource = ProgressiveMediaSource.Factory() .createMediaSource(secondVideoUri) val concatenatedSource = ConcatenatingMediaSource(firstSource, secondSource)
84. Creating Playlist val firstSource = ProgressiveMediaSource.Factory() .createMediaSource(firstVideoUri) val secondSource = ProgressiveMediaSource.Factory() .createMediaSource(secondVideoUri) val concatenatedSource = ConcatenatingMediaSource(firstSource, secondSource)
85. Creating Playlist Play only a part of Video Add Subtitle to a video
86. Creating Playlist Play only a part of Video Add Subtitle to a video
87. Play only a part of Video
88. Play only a part of Video ProgressiveMediaSource.Factory(..).createMediaSource(videoUri) val clippingSource = ClippingMediaSource( videoSource, '( startPositionUs= )* 15000000, '( endPositionUs= )* 20000000 )
89. Play only a part of Video ProgressiveMediaSource.Factory(..).createMediaSource(videoUri) val clippingSource = ClippingMediaSource( videoSource, '( startPositionUs= )* 15000000, '( endPositionUs= )* 20000000 )
90. Play only a part of Video ProgressiveMediaSource.Factory(..).createMediaSource(videoUri) val clippingSource = ClippingMediaSource( videoSource, '( startPositionUs= )* 15000000, '( endPositionUs= )* 20000000 )
91. Creating Playlist Play only a part of Video Add Subtitle to a video
92. Creating Playlist Play only a part of Video Add Subtitle to a video
93. Add Subtitle to a video val videoSource = ProgressiveMediaSource.Factory(...) .createMediaSource(videoUri) val subtitleSource = SingleSampleMediaSource.Factory(...) .createMediaSource(subtitleUri, subtitleFormat, C.TIME_UNSET) val mergedSource = MergingMediaSource(videoSource, subtitleSource)
94. Add Subtitle to a video val videoSource = ProgressiveMediaSource.Factory(...) .createMediaSource(videoUri) val subtitleSource = SingleSampleMediaSource.Factory(...) .createMediaSource(subtitleUri, subtitleFormat, C.TIME_UNSET) val mergedSource = MergingMediaSource(videoSource, subtitleSource)
95. Add Subtitle to a video val videoSource = ProgressiveMediaSource.Factory(...) .createMediaSource(videoUri) val subtitleSource = SingleSampleMediaSource.Factory(...) .createMediaSource(subtitleUri, subtitleFormat, C.TIME_UNSET) val mergedSource = MergingMediaSource(videoSource, subtitleSource)
96. Add Subtitle to a video val videoSource = ProgressiveMediaSource.Factory(...) .createMediaSource(videoUri) val subtitleSource = SingleSampleMediaSource.Factory(...) .createMediaSource(subtitleUri, subtitleFormat, C.TIME_UNSET) val mergedSource = MergingMediaSource(videoSource, subtitleSource)
97. Apk Size
98. Apk Size Implementation 'com.google.android.exoplayer:exoplayer-core:r2.X.X' Implementation 'com.google.android.exoplayer:exoplayer-dash:r2.X.X' Implementation 'com.google.android.exoplayer:exoplayer-ui:r2.X.X' Implementation 'com.google.android.exoplayer:exoplayer-smoothstreaming:r2.X.X' Implementation 'com.google.android.exoplayer:exoplayer-hls'
99. Apk Size class Mp4ExtractorsFactory : ExtractorsFactory { override fun createExtractors(): Array<Extractor> { return arrayOf<Extractor>(Mp4Extractor()) } } ProgressiveMediaSource.Factory(mediaDataSourceFactory, Mp4ExtractorsFactory()) .createMediaSource(uri)
100. Apk Size class Mp4ExtractorsFactory : ExtractorsFactory { override fun createExtractors(): Array<Extractor> { return arrayOf<Extractor>(Mp4Extractor()) } } ProgressiveMediaSource.Factory(mediaDataSourceFactory, Mp4ExtractorsFactory()) .createMediaSource(uri)
101. Apk Size val player = ExoPlayerFactory.newSimpleInstance( context, AudioOnlyRenderersFactory(context), trackSelector ) class AudioOnlyRenderersFactory : RenderersFactory { override fun createRenderers($%&): Array<Renderer> { } }
102. Apk Size val player = ExoPlayerFactory.newSimpleInstance( context, AudioOnlyRenderersFactory(context), trackSelector ) class AudioOnlyRenderersFactory : RenderersFactory { override fun createRenderers($%&): Array<Renderer> { } }
103. references https:!"exoplayer.dev/ https:!"github.com/google/ExoPlayer http://bit.ly/droidconIN_exoplayer
104. Thank You ! @iamBedant @brijeshmasrani We are hiring android devs.