问题
I'm using exoPlayer to stream video to my app and so far works fine. What I would like to do now is to add some extra functionality such as a button on the bottom right edge to act as a "full screen button".
But there are two problems. The first is that ExoPlayer doesn't seems to provide any Control class so you can simple add a button and override its functionality.
What I guess is that I have to display that button on top of the video so I might have to wrap both in a FrameLayout and add gravity = bottom for the button or is there another way ?
The second problem is : if user clicks the full screen button what should I do next? Add another Fragment with the video view in full screen ? But how can I start the video from the point it was when user click the button and not start it from the beginning ? I cant find in exoPlayer anything relative to start from a specific time.
回答1:
If you are using SimpleExoPlayerView, there is a way to customize the Player's view, especially the Control's view. Check the documentation of SimpleExoPlayerView:
Attributes
The following attributes can be set on a
SimpleExoPlayerViewwhen used in a layout XML file: ...controller_layout_id - Specifies the id of the layout resource to be inflated by the child
PlaybackControlView. See below for more details.
Corresponding method: None
Default: R.id.exo_playback_control_view
...
So basically you can provide your own layout file for the controller (you can copy the exo_playback_control_view layout mentioned in the docs, which is the default one, and customize that as you want. Note that you'll need to provide the same view ids for the existing controls (so it's best to actually copy that), as mentioned in the docs of PlaybackControlView:
Overriding the layout file
To customize the layout of
PlaybackControlViewthroughout your app, or just for certain configurations, you can define exo_playback_control_view.xml layout files in your application res/layout* directories. These layouts will override the one provided by the ExoPlayer library, and will be inflated for use byPlaybackControlView. The view identifies and binds its children by looking for the following ids:
exo_play - The play button.
exo_pause - The pause button.
exo_ffwd - The fast forward button.
exo_rew - The rewind button.
exo_prev - The previous track button.
exo_next - The next track button.
exo_position - Text view displaying the current playback position.
exo_duration - Text view displaying the current media duration.
exo_progress - Seek bar that's updated during playback and allows seeking.
All child views are optional and so can be omitted if not required, however where defined they must be of the expected type.
Below is the customized layout with fullscreen button. You get the reference to the button by view.findViewById(R.id.exo_fullscreen_button) and attach the OnClickListener to the button. Inside onClick() you can start your full screen activity (you can define it's full screen either in the AndroidManifest.xml or programatically) or show another fragment, that has the SimpleExoPlayerView occupying the whole screen.
As of your second point you can get the playback position like this: playbackPosition = player.getCurrentPosition()and pass it to the new full screen Activity/Fragment as an Intent extra. Then, in that full screen Activity/Fragment you load the video, extract that playbackPosition value and call:
player.seekTo(playbackPosition);
player.setPlayWhenReady(true);
Here is the control layout file:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:paddingTop="4dp"
android:orientation="horizontal">
<ImageButton android:id="@id/exo_prev"
style="@style/ExoMediaButton.Previous"/>
<ImageButton android:id="@id/exo_rew"
style="@style/ExoMediaButton.Rewind"/>
<ImageButton android:id="@id/exo_play"
style="@style/ExoMediaButton.Play"/>
<ImageButton android:id="@id/exo_pause"
style="@style/ExoMediaButton.Pause"/>
<ImageButton android:id="@id/exo_ffwd"
style="@style/ExoMediaButton.FastForward"/>
<ImageButton android:id="@id/exo_next"
style="@style/ExoMediaButton.Next"/>
// This is the custom button
<ImageButton
android:id="@+id/exo_fullscreen_button"
style="@style/ExoMediaButton"
android:src="@drawable/ic_fullscreen"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:gravity="center_vertical"
android:orientation="horizontal">
<TextView android:id="@id/exo_position"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="14sp"
android:textStyle="bold"
android:paddingLeft="4dp"
android:paddingRight="4dp"
android:includeFontPadding="false"
android:textColor="#FFBEBEBE"/>
<SeekBar android:id="@id/exo_progress"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="32dp"
android:focusable="false"
style="?android:attr/progressBarStyleHorizontal"/>
<TextView android:id="@id/exo_duration"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="14sp"
android:textStyle="bold"
android:paddingLeft="4dp"
android:paddingRight="4dp"
android:includeFontPadding="false"
android:textColor="#FFBEBEBE"/>
</LinearLayout>
</LinearLayout>
回答2:
Solution with a new full screen Activity on top of the current one, passing the playback position to it
The other answer is great and points you in the right direction, but it's rather theoretical, and I still had to fill some gaps and solve a few things when writing the code. I'll try to complement it.
Start by copying the layout exo_playback_control_view.xml from the ExoPlayer library to res/layout. File link: https://github.com/google/ExoPlayer/blob/release-v2/library/ui/src/main/res/layout/exo_playback_control_view.xml
Modify the layout to add the full screen button, which can be something like this:
<FrameLayout
android:id="@+id/exo_fullscreen_button"
android:layout_width="32dp"
android:layout_height="32dp"
android:layout_gravity="end">
<ImageView
android:layout_width="18dp"
android:layout_height="18dp"
android:layout_gravity="center"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
android:src="@drawable/ic_fullscreen_expand"
android:focusable="true" />
</FrameLayout>
Note that you can have different layouts for different PlayerViews by using the attribute app:controller_layout_id. You can also remove player buttons if you don't want them. This is covered in the docs: https://exoplayer.dev/ui-components.html#overriding-layout-files
Once you have the full screen button, set an OnClickListener on it:
findViewById<View>(R.id.exo_fullscreen_button).setOnClickListener {
player.playWhenReady = false // pause current video if it's playing
startActivity(
FullScreenVideoActivity.newIntent(
context,
videoUrl,
player.currentPosition
)
)
}
Add the FullScreenVideoActivity:
private const val EXTRA_VIDEO_URL = "EXTRA_VIDEO_URL"
private const val EXTRA_PLAYBACK_POSITION_MS = "EXTRA_PLAYBACK_POSITION_MS"
private const val STATE_PLAYBACK_POSITION_MS = "STATE_PLAYBACK_POSITION_MS"
class FullScreenVideoActivity : AppCompatActivity() {
companion object {
fun newIntent(packageContext: Context, videoUrl: String, playbackPositionMs: Long): Intent {
val intent =
Intent(packageContext, FullScreenVideoActivity::class.java)
intent.putExtra(EXTRA_VIDEO_URL, videoUrl)
intent.putExtra(EXTRA_PLAYBACK_POSITION_MS, playbackPositionMs)
return intent
}
}
private lateinit var player: SimpleExoPlayer
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_full_screen_video)
val videoUrl = intent.getStringExtra(EXTRA_VIDEO_URL)
var playbackPositionMs = intent.getLongExtra(EXTRA_PLAYBACK_POSITION_MS, 0)
if (savedInstanceState != null) {
// The user rotated the screen
playbackPositionMs = savedInstanceState.getLong(STATE_PLAYBACK_POSITION_MS)
}
findViewById<View>(R.id.exo_fullscreen_button).setOnClickListener {
finish()
}
val playerView: PlayerView = findViewById(R.id.player_view)
player = ExoPlayerFactory.newSimpleInstance(this)
val userAgent = Util.getUserAgent(this, getString(R.string.app_name))
val dataSourceFactory = DefaultDataSourceFactory(this, userAgent)
val mediaSource: MediaSource =
ProgressiveMediaSource.Factory(dataSourceFactory).createMediaSource(Uri.parse(videoUrl))
player.prepare(mediaSource)
player.seekTo(playbackPositionMs)
player.playWhenReady = true
playerView.player = player
}
override fun onPause() {
super.onPause()
player.playWhenReady = false
}
override fun onDestroy() {
super.onDestroy()
player.release()
}
override fun onSaveInstanceState(outState: Bundle) {
super.onSaveInstanceState(outState)
outState.putLong(STATE_PLAYBACK_POSITION_MS, player.currentPosition)
}
}
Add the activity to the Manifest:
<activity
android:name=".ui.FullScreenVideoActivity"
android:screenOrientation="landscape" <-- this is optional
android:theme="@style/AppTheme.NoActionBar.FullScreen" />
Finally add the theme to styles.xml:
<style name="AppTheme.NoActionBar.FullScreen">
<item name="android:windowFullscreen">true</item>
<item name="android:windowContentOverlay">@null</item>
</style>
That's all! Hope it helps.
Alternative solution in current Activity
The above solution works fine and it's trivial. However it requires re-downloading bits of the video you've already downloaded, which interrupts the playback :/
I've been trying to avoid this by following this directions. This is what I have so far:
activity!!.requestedOrientation = ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE
val fullScreenPlayerView = PlayerView(context)
val dialog = object : Dialog(context!!, android.R.style.Theme_Black_NoTitleBar_Fullscreen) {
override fun onBackPressed() {
activity!!.requestedOrientation = ActivityInfo.SCREEN_ORIENTATION_PORTRAIT
PlayerView.switchTargetView(player, fullScreenPlayerView, playerView)
super.onBackPressed()
}
}
dialog.addContentView(
fullScreenPlayerView,
ViewGroup.LayoutParams(
ViewGroup.LayoutParams.MATCH_PARENT,
ViewGroup.LayoutParams.MATCH_PARENT
)
)
dialog.show()
PlayerView.switchTargetView(player, playerView, fullScreenPlayerView)
Note that for this to work you have to set android:configChanges="orientation|screenSize|layoutDirection" to your Activity in the Manifest.
来源：https://stackoverflow.com/questions/36990193/add-button-for-full-screen-video-with-exo-player