使用exo播放器添加全屏视频的添加按钮 [英] Add button for full screen video with exo player

问题描述

我正在使用exoPlayer将视频流式传输到我的应用程序，到目前为止效果还不错.我现在想做的是添加一些额外的功能，例如右下角的按钮充当全屏按钮".

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".

但是有两个问题.首先是ExoPlayer似乎没有提供任何Control类，因此您可以简单地添加按钮并覆盖其功能. 我猜想我必须在视频顶部显示该按钮，所以我可能必须将两者都包装在FrameLayout中，并为按钮添加gravity = bottom，否则还有其他方法吗?

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 ?

第二个问题是:如果用户单击全屏按钮，下一步该怎么做?要在全屏视频视图中添加另一个Fragment?但是，如何从用户单击按钮而不是从头开始的那一刻开始播放视频?我无法在exoPlayer中找到任何与从特定时间开始有关的内容.

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.

推荐答案

如果使用的是SimpleExoPlayerView，则有一种方法可以自定义Player的视图，尤其是Control的视图.查看SimpleExoPlayerView的文档:

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:

属性

在布局XML文件中使用时，可以在SimpleExoPlayerView上设置以下属性: ...

The following attributes can be set on a SimpleExoPlayerView when used in a layout XML file: ...

controller_layout_id -指定要由子级PlaybackControlView扩展的布局资源的ID.有关更多详细信息，请参见下文.

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

默认值: R.id.exo_playback_control_view

...

因此，基本上，您可以为控制器提供自己的布局文件(您可以复制文档中提到的 exo_playback_control_view 布局，这是默认布局，并根据需要进行自定义.请注意，您需要为现有控件提供相同的视图ID(因此最好实际复制它)，如PlaybackControlView的文档中所述:

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:

覆盖布局文件

要在整个应用程序中自定义PlaybackControlView的布局，或仅针对某些配置，可以在应用程序res/layout *目录中定义 exo_playback_control_view.xml 布局文件.这些布局将覆盖 ExoPlayer 库提供的布局，并且会被夸大供PlaybackControlView使用.该视图通过查找以下ID来标识并绑定其子代:

To customize the layout of PlaybackControlView throughout 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 by PlaybackControlView. The view identifies and binds its children by looking for the following ids:

• exo_play -播放按钮.

exo_pause -暂停按钮.

exo_ffwd -快进按钮.

exo_rew -快退按钮.

exo_prev -上一个曲目按钮.

exo_next -下一首曲目按钮.

exo_position -显示当前播放位置的文本视图.

exo_position - Text view displaying the current playback position.

exo_duration -显示当前媒体持续时间的文本视图.

exo_duration - Text view displaying the current media duration.

exo_progress -搜索期间在搜索过程中更新的搜索栏，允许搜索.

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.

下面是带有全屏按钮的自定义布局.您可以通过view.findViewById(R.id.exo_fullscreen_button)获得对该按钮的引用，并将OnClickListener附加到该按钮.在onClick()内部，您可以启动全屏活动(可以在 AndroidManifest.xml 中或通过编程将其定义为全屏)，或显示另一个片段，其中SimpleExoPlayerView占据了整个屏幕. 从第二点开始，您可以像这样获得播放位置:playbackPosition = player.getCurrentPosition()并将其作为Intent附加项传递到新的全屏活动/片段.然后，在全屏活动/片段中加载视频，提取该playbackPosition值并调用:

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>

这篇关于使用exo播放器添加全屏视频的添加按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！