Let's Stream that Video - an ExoPlayer Starters Guide

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 subtitle 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 subtitle, 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 Borah @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.holder) 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.holder) 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.holder) 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.holder) 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.holder) 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 360p 1080p 720p
20. Adaptive Bitrate streaming 360p 360p 1080p 720p
21. Adaptive Bitrate streaming 360p 720p 1080p
22. Adaptive Bitrate streaming 360p 720p 1080p
23. Adaptive Bitrate streaming 360p 720p 1080p
24. Adaptive Bitrate streaming 360p 1080p 720p
25. Implementing ExoPlayer
26. Gradle Dependency implementation 'com.google.android.exoplayer:exoplayer:2.XX.XX'
27. <com.google.android.exoplayer2.ui.SimpleExoPlayerView android:id="@+id/playerView" android:layout_width="match_parent" android:layout_height="wrap_content"/> XML Element
28. exoPlayer : SimpleExoPlayer = ExoPlayerFactory.newSimpleInstance(this) playerView.player = exoPlayer exoPlayer.playWhenReady = true Exo Player Instance
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. val dataSourceFactory = DefaultDataSourceFactory(context, Util.getUserAgent(context, "app-name")) val videoSource = DashMediaSource.Factory(dataSourceFactory) .createMediaSource(dashUri) player.prepare(videoSource) Create Data Source Factory
32. val dataSourceFactory = DefaultDataSourceFactory(context, Util.getUserAgent(context, "app-name")) val videoSource = DashMediaSource.Factory(dataSourceFactory) .createMediaSource(dashUri) player.prepare(videoSource) Create Media Source
33. val dataSourceFactory = DefaultDataSourceFactory(context, Util.getUserAgent(context, "app-name")) val videoSource = DashMediaSource.Factory(dataSourceFactory) .createMediaSource(dashUri) player.prepare(videoSource) Prepare the Player
34. Next big streaming app DEFAULT PLAYER
39. By Setting Attributes Custom layout file Globally override xml
40. By Setting Attributes app:resize_mode
41. By Setting Attributes app:resize_mode = fit
42. By Setting Attributes app:resize_mode = fit
43. By Setting Attributes app:resize_mode = fill
44. By Setting Attributes app:resize_mode = zoom app:resize_mode = zoom
45. By Setting Attributes app:resize_mode app:show_timeout app:rewind_increment app:fastforward_increment
46. By Setting Attributes Custom layout file Globally override xml
47. By Setting Attributes Custom layout file Globally override xml
48. Globally override xml Player View Playback Control View exo_simple_player_view.xml exo_playback_control_view.xml
49. Globally override xml Playback Control View exo_playback_control_view.xml
50. 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
51. Globally override xml Playback Control View exo_playback_control_view.xml
52. Globally override xml Player View exo_simple_player_view.xml
53. Globally override xml Player View exo_simple_player_view.xml Buffering View : @id/exo_buffering Subtitles View : @id/exo_subtitles
54. By Setting Attributes Custom layout file Globally override xml
55. By Setting Attributes Custom layout file Globally override xml
56. Custom layout file
57. Custom layout file
58. Custom layout file <SimpleExoPlayerView android:id="@+id/player" ------ app:controller_layout_id="@layout/custom_ui" ------- />
59. Exo Player Internals
60. Exo Player HttpDataSource Track Selector Load Control Video Renderer Audio Renderer Media Source Renderer 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 TG
64. Exo Player HttpDataSource Track Selector Load Control Video Renderer Audio Renderer Media Source Renderer Exo Player Internals TG RC RC
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 TS
67. Exo Player HttpDataSource Track Selector Load Control Video Renderer Audio Renderer Media Source Renderer Exo Player Internals TS
68. Exo Player HttpDataSource Track Selector Load Control Video Renderer Audio Renderer Media Source Renderer Exo Player Internals TS
69. Load Control Exo Player HttpDataSource Video Renderer Audio Renderer Track Selector Renderer Media Source Exo Player Internals
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. Media Composition
79. Creating Playlist Play only a part of Video Add Subtitle to a video
80. Creating Playlist val firstSource = ProgressiveMediaSource.Factory() .createMediaSource(firstVideoUri) val secondSource = ProgressiveMediaSource.Factory() .createMediaSource(secondVideoUri) val concatenatedSource = ConcatenatingMediaSource(firstSource, secondSource)
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 Play only a part of Video Add Subtitle to a video
85. Creating Playlist Play only a part of Video Add Subtitle to a video
86. Play only a part of Video
87. Play only a part of Video ProgressiveMediaSource.Factory(..).createMediaSource(videoUri) val clippingSource = ClippingMediaSource( videoSource, /* startPositionUs= */ 15000000, /* endPositionUs= */ 20000000 )
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. Creating Playlist Play only a part of Video Add Subtitle to a video
91. Creating Playlist Play only a part of Video Add Subtitle to a video
92. 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)
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. Apk Size
97. 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'
98. Apk Size class Mp4ExtractorsFactory : ExtractorsFactory { override fun createExtractors(): Array<Extractor> { return arrayOf<Extractor>(Mp4Extractor()) } } ProgressiveMediaSource.Factory(mediaDataSourceFactory, Mp4ExtractorsFactory()) .createMediaSource(uri)
99. Apk Size class Mp4ExtractorsFactory : ExtractorsFactory { override fun createExtractors(): Array<Extractor> { return arrayOf<Extractor>(Mp4Extractor()) } } ProgressiveMediaSource.Factory(mediaDataSourceFactory, Mp4ExtractorsFactory()) .createMediaSource(uri)
100. Apk Size val player = ExoPlayerFactory.newSimpleInstance( context, AudioOnlyRenderersFactory(context), trackSelector ) class AudioOnlyRenderersFactory : RenderersFactory { override fun createRenderers(---): Array<Renderer> { } }
101. Apk Size val player = ExoPlayerFactory.newSimpleInstance( context, AudioOnlyRenderersFactory(context), trackSelector ) class AudioOnlyRenderersFactory : RenderersFactory { override fun createRenderers(---): Array<Renderer> { } }
102. references https://exoplayer.dev/ https://github.com/google/ExoPlayer
103. Thank You ! @iamBedant @brijeshmasrani We are hiring android devs.