具有固定纵横比的 ExoPlayer 布局

Question

我正在尝试在 Android 上使用 ExoPlayer 构建类似 YouTube 的视图。我希望视频出现在顶部，然后是一些其他内容，如标题、描述等。我所有的视频都是 16:9，我希望SimpleExoPlayerView以 16:9 布局开始。使用下面的布局，播放器在切换到正确的视频纵横比之前占据整个屏幕几秒钟：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/root"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:keepScreenOn="true">

  <com.google.android.exoplayer2.ui.SimpleExoPlayerView android:id="@+id/player_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:resize_mode="fixed_width">

  </com.google.android.exoplayer2.ui.SimpleExoPlayerView>

  <TextView
    android:id="@+id/text_title"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="5dp"
    android:text="VideoTitle"
    android:textAppearance="@style/TextAppearance.AppCompat.Title" />

  <TextView
    android:id="@+id/text_description"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="5dp"
    android:text="description" />
</LinearLayout>

Answer 1

我们正在使用AspectRatioFrameLayoutExpoPlayer附带的捆绑包：

https://exoplayer.dev/doc/reference/com/google/android/exoplayer2/ui/AspectRatioFrameLayout.html

这就是你使用它的方式：

<com.google.android.exoplayer2.ui.AspectRatioFrameLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:resize_mode="fixed_width">

    <!-- Preview image -->
    <ImageView
        android:id="@+id/imageViewVideo"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:clickable="true"
        android:contentDescription="@string/img_content_training_video_preview"
        android:focusable="true"
        android:scaleType="centerCrop" />

    <!-- Play button -->
    <ImageView
        android:id="@+id/imageTrainingPreviewIcon"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_gravity="center"
        android:contentDescription="@string/img_content_training_video_preview"
        android:scaleType="fitCenter"
        android:src="@drawable/ic_play" />

    <!-- Video player -->
    <com.google.android.exoplayer2.ui.SimpleExoPlayerView
        android:id="@+id/player_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/colorBlack"
        android:visibility="gone" />

    <!-- ProgressBar -->
    <include layout="@layout/custom_video_loading_progressbar" />

</com.google.android.exoplayer2.ui.AspectRatioFrameLayout>

然后在您的 Activity 或 Fragment 上，您必须设置纵横比：

aspectRatioFrameLayout.setAspectRatio(16f/9f)

您还可以在代码中设置调整大小模式setResizeMode。

Answer 2

我们没有使用SimpleExoPlayer（我们只是使用 aSurface代替），但我们将其包装在FixedAspectRatioFrameLayout.

然后SimpleExoPlayer应该将 嵌套在其中FrameLayout，并将宽度和高度设置为match_parent，并且它应该填充正确的空间。

如果可行请告诉我。

[编辑] 在FixedAspectRatioFrameLayout中：

mAspectRatioWidth = a.getInt(R.styleable.FixedAspectRatioFrameLayout_aspectRatioWidth, 4);
mAspectRatioHeight = a.getInt(R.styleable.FixedAspectRatioFrameLayout_aspectRatioHeight, 3);

上面写着 4 和 3 的地方，就是你放置 16 和 9 的地方。