VideoView匹配父高度并保持纵横比

时间:2012-11-28 11:03:37

标签: android android-videoview dimensions aspect-ratio

我有一个像这样设置的VideoView:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
  android:id="@+id/player" 
  android:orientation="vertical"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent">

    <VideoView
        android:id="@+id/video"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_centerInParent="true"
        android:layout_centerVertical="true" />

    <ProgressBar
        android:id="@+id/loader"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true" />

</RelativeLayout>

但VideoView匹配父容器的宽度,然后根据加载的影片的宽高比设置高度。
我想做的恰恰相反,我希望VideoView与父级的高度相匹配,同时保持宽高比不变,视频将被剪裁在两侧。

我设法拉伸VideoView来填充父级,但不保留宽高比。

另一件事是,我正在将MediaController添加到VideoView中:

MediaController controllers = new MediaController(this) {
    @Override
    public void hide() {
        if (state != State.Hidden) {
            this.show();
        }
        else {
            super.hide();
        }
    }
};
controllers.setAnchorView(videoView);
videoView.setMediaController(controllers);

videoView.setOnPreparedListener(new OnPreparedListener() {
    @Override
    public void onPrepared(MediaPlayer mediaPlayer) {
        controllers.show();
    }
});

这很好用,控制器总是保持打开状态,但在计算放置视频的位置时(因为它是垂直居中的),控制器的高度不会被考虑在内。

我的两个问题是:

  1. 如何使VideoView与父级的高度匹配,同时保持宽高比?
  2. 如何让VideoView考虑到控制器的高度?
  3. 感谢。

12 个答案:

答案 0 :(得分:21)

您应该从内置视频视图扩展。

在显示视频观看之前调用setVideoSize,您可以从视频中提取的缩略图中获取视频大小。

因此,当调用视频视图的onMeasure时,mVideoWidth和{ mVideoHeight是&gt; 0

如果您想考虑控制器的高度,可以使用onMeasure方法自行完成。

希望会有所帮助。

public class MyVideoView extends VideoView {

        private int mVideoWidth;
        private int mVideoHeight;

        public MyVideoView(Context context, AttributeSet attrs) {
            super(context, attrs);
        }

        public MyVideoView(Context context, AttributeSet attrs, int defStyle) {
            super(context, attrs, defStyle);
        }

        public MyVideoView(Context context) {
            super(context);
        }

        public void setVideoSize(int width, int height) {
            mVideoWidth = width;
            mVideoHeight = height;
        }

        @Override
        protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
            // Log.i("@@@", "onMeasure");
            int width = getDefaultSize(mVideoWidth, widthMeasureSpec);
            int height = getDefaultSize(mVideoHeight, heightMeasureSpec);
            if (mVideoWidth > 0 && mVideoHeight > 0) {
                if (mVideoWidth * height > width * mVideoHeight) {
                    // Log.i("@@@", "image too tall, correcting");
                    height = width * mVideoHeight / mVideoWidth;
                } else if (mVideoWidth * height < width * mVideoHeight) {
                    // Log.i("@@@", "image too wide, correcting");
                    width = height * mVideoWidth / mVideoHeight;
                } else {
                    // Log.i("@@@", "aspect ratio is correct: " +
                    // width+"/"+height+"="+
                    // mVideoWidth+"/"+mVideoHeight);
                }
            }
            // Log.i("@@@", "setting size: " + width + 'x' + height);
            setMeasuredDimension(width, height);
        }
}

答案 1 :(得分:7)

我用布局解决了这个问题。看起来它固定在角落时效果很好,但却导致视频歪斜。为了测试我将相对布局的背景更改为#990000以查看红色戳穿。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/relative_parent"
    android:background="#000000">
    <VideoView
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:focusable="false"
        android:focusableInTouchMode="false"
        android:id="@+id/videoView" />
</RelativeLayout>

答案 2 :(得分:7)

关于问题1,我很惊讶没有人提到可能使用MediaPlayer的缩放模式。 https://developer.android.com/reference/android/media/MediaPlayer.html#setVideoScalingMode(int)

它有2种模式。它们都总是填满视图区域。要在保留纵横比的同时填充空间,从而裁剪长边,您需要切换到第二种模式VIDEO_SCALING_MODE_SCALE_TO_FIT_WITH_CROPPING。这解决了问题的一部分。另一部分是改变VideoView的测量行为,正如其他一些答案所示。这是我这样做的方式,主要是出于懒惰而不熟悉其他人使用的元数据API,欢迎您使用此方法或其他方法之一来修复视图的大小。毯式捕获确保在mMediaPlayer存在之前调用时的安全性,因为它可能被多次调用,并且如果字段名称发生变化,也会回退到旧的行为。

class FixedSizeVideoView : VideoView {
    constructor(ctx: Context) : super(ctx)
    constructor(ctx: Context, attrs: AttributeSet) : super(ctx, attrs)

    // rather than shrink down to fit, stay at the size requested by layout params. Let the scaling mode
    // of the media player shine through. If the scaling mode on the media player is set to the one
    // with cropping, you can make a player similar to AVLayerVideoGravityResizeAspectFill on iOS
    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
        try {
            val mpField = VideoView::class.java.getDeclaredField("mMediaPlayer")
            mpField.isAccessible = true
            val mediaPlayer: MediaPlayer = mpField.get(this) as MediaPlayer

            val width = View.getDefaultSize(mediaPlayer.videoWidth, widthMeasureSpec)
            val height = View.getDefaultSize(mediaPlayer.videoHeight, heightMeasureSpec)
            setMeasuredDimension(width, height)
        }
        catch (ex: Exception) {
            super.onMeasure(widthMeasureSpec, heightMeasureSpec)
        }
    }
}

因此,在布局中使用此类,只需在有机会的地方更改媒体播放器上的缩放模式。如:

        video.setOnPreparedListener { mp: MediaPlayer ->
            mp.setVideoScalingMode(MediaPlayer.VIDEO_SCALING_MODE_SCALE_TO_FIT_WITH_CROPPING)
            mp.isLooping = true
            mp.setScreenOnWhilePlaying(false)
        }
        video.start()

答案 3 :(得分:6)

MERGE TABLE1 AS TARGET
USING TABLE2 AS SOURCE 
ON  (SOURCE.ID = TARGET.ID AND SOURCE.seq = TARGET.seq)

WHEN MATCHED THEN 
UPDATE SET 
name=SOURCE.name,
designation=SOURCE.designation,
company=SOURCE.company

WHEN NOT MATCHED BY TARGET THEN 
INSERT(ID,seq,name,designation,company)
VALUES(SOURCE.ID,SOURCE.seq,SOURCE.name,SOURCE.designation,SOURCE.company)

--If You want to delete rows found in TARGET and not found in SOURCE add the following line

WHEN NOT MATCHED BY SOURCE THEN 
DELETE

答案 4 :(得分:4)

使用ConstraintLayout可以实现此目的,请参考下面的xml代码。

当layout_width和layout_height为0dp时,VideoView的大小和位置是根据其他约束条件动态计算的。 layout_constraintDimensionRatio属性指示当应用计算VideoView的大小时,宽度与高度之比应为3:4。这种限制使视频的长宽比保持不变,并防止视图在任一方向上拉伸得太远(取决于设备的旋转方式)。

根据需求纵向/横向更改layout_constraintDimensionRatio值。

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <VideoView
        android:id="@+id/videoView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintDimensionRatio="3:4"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

答案 5 :(得分:3)

快速有效的修复程序:

无需创建从VideoView扩展的自定义视图。只需将一个足够大的值设置为android:layout_width。这会将视频视图的widthSpecMode设置为View.MeasureSpec.AT_MOST,然后VideoView的onMeasure()方法将自动调整其宽度,并保持比例。

<VideoView
     android:id="@+id/video"
     android:layout_width="2000dp"
     android:layout_height="match_parent" />

答案 6 :(得分:0)

我尝试了很多解决方案,而我的视频总是1000 * 1000格式,所以我为那些了解其宽高比的人创建了一个简单的解决方案。首先在RelativeLayout中创建一个VideoView,如下所示:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
      android:id="@+id/video_holder"
      android:layout_width="wrap_content"
      android:layout_height="fill_parent"
      android:clipToPadding="false">

      <VideoView  
          android:id="@+id/videoView"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          android:layout_alignParentBottom="true"
          android:layout_alignParentEnd="true"
          android:layout_alignParentStart="true"
          android:layout_alignParentTop="true" />
</RelativeLayout>

然后在加载视频之前更改高度并以编程方式更改:

    int i = videoView.getHeight() > videoView.getWidth() ? videoView.getHeight() : videoView.getWidth();
    video_holder.setLayoutParams(new ConstraintLayout.LayoutParams(i, i));

当然这仅适用于1:1的宽高比,但你可以使用宽高比来改变高度或宽度。

答案 7 :(得分:0)

问题第一次回答了我的问题,而不是回答!! 我的问题是,全屏视频下有空白。我将layout_height设置为match_parent。解决方法是将其设置为wrap_content并为父级设置黑色背景。这样,并使VideoView在其父级中垂直居中。

  

我将此写为评论,但随后认为某人可能有相同的看法   我遇到的问题,所以这也是答案。

答案 8 :(得分:0)

我一直在寻找在VideoView中以纵横比显示视频的方法,但是在尝试了许多解决方案后,它们似乎都不起作用。

所以我实现了以下方法,并且对我有用:

代码:

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

    // getting screen size
    ((Activity) getContext()).getWindowManager().getDefaultDisplay().getMetrics(displayMetrics);
    int width = displayMetrics.widthPixels;
    int height = displayMetrics.heightPixels;

    double videoSizeRatio = (double) mVideoHeight / mVideoWidth;
    double screenSizeRatio = (double) height / width;

    if (mVideoWidth > 0 && mVideoHeight > 0) {
        if (videoSizeRatio > screenSizeRatio) { // screen is wider than video width
            height = (int) (videoSizeRatio * width);
        } else if (videoSizeRatio < screenSizeRatio) {
            width = (int) (height / videoSizeRatio);
        }

    }
    setMeasuredDimension(width, height);
}

布局:

 <YourCustomizedVideoView
    android:id="@+id/videoView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    />

答案 9 :(得分:-1)

乔布特在科特林的答案,以防有人需要:

val max = if (videoView.height > videoView.width) videoView.height else videoView.width
videoView.layoutParams = ConstraintLayout.LayoutParams(max, max)

答案 10 :(得分:-1)

只需将VideoView放在RelativeLayout内,然后为该相对布局设置所需的尺寸即可。像下面的代码一样,

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="300dp">

    <VideoView
        android:id="@+id/videoView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_centerInParent="true" />

</RelativeLayout>

它将起作用。

答案 11 :(得分:-3)

您只需要将Videoview小部件放在RelativeLayout中(仅在xml文件中进行更改)

这是参考答案link