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

Posted 2023-03-05

【中文标题】VideoView 匹配父高度并保持纵横比

【英文标题】：VideoView to match parent height and keep aspect ratio

【发布时间】：2012-11-16 05:08:48

【问题描述】：

我有一个这样设置的 VideoView：

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

    <VideoView
        android:id="@+id/video"
        android:layout_
        android:layout_
        android:layout_centerInParent="true"
        android:layout_centerVertical="true" />

    <ProgressBar
        android:id="@+id/loader"
        android:layout_
        android:layout_
        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();
    
);

这很好用，并且控制器始终保持打开状态，但在计算放置视频的位置时并未考虑控制器的高度（因为它是垂直居中的）。

我的两个问题是：

如何使 VideoView 与父级的高度匹配，同时保持纵横比？ 如何让 VideoView 考虑其控制器的高度？

谢谢。

【问题讨论】：

你说的是 WebView 还是 VideoView？你改变了大约一半。

第一次一个问题回答了我的问题而不是答案！我的问题是我在全屏视频下有一个空白区域。我将layout_height 设置为match_parent。解决方案是将其设置为wrap_content 并为父级设置黑色背景。即，让 VideoView 在其父级中垂直居中。

【参考方案1】：

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

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

因此，当调用视频视图的 onMeasure 时，mVideoWidth 和 mVideoHeight 都 > 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);
        

【讨论】：

这绝对有帮助，但我还需要将视图设置为大于屏幕，如下所示：***.com/questions/3813049/…

@ax003d 我试过这个 videoView.setLayoutParams(params); videoView.setDimensions(params.width,params.width); videoView.getHolder().setFixedSize(params.width,params.height);但它仍然没有设置我的视频视图高度

这是一个不错的答案，但我不会手动使用 setVideoSize()，而是重写加载视频的方法：@Override public void setVideoURI(Uri uri) MediaMetadataRetriever retriever = new MediaMetadataRetriever();检索器.setDataSource(this.getContext(), uri); mVideoWidth = Integer.parseInt(retriever.extractMetadata(MediaMetadataRetriever.METADATA_KEY_VIDEO_WIDTH)); mVideoHeight = Integer.parseInt(retriever.extractMetadata(MediaMetadataRetriever.METADATA_KEY_VIDEO_HEIGHT)); super.setVideoURI(uri);

像魅力一样工作。一点提示：如果您使用mediaPlayer 将视频托管到videoView：您不能使用setVideoUri。对于这种情况，setVideoSize 方法完全没问题。 （顺便说一句，我正在使用 Xamarin (C#)）。

setMeasuredDimension 没有效果它没有改变视频的大小，我不知道为什么

【参考方案2】：

我用布局解决了这个问题。当它被固定在角落时，它似乎工作正常，但它导致视频倾斜。为了测试，我将相对布局的背景更改为 #990000 以查看红色戳穿。

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

【讨论】：

好吧，它的工作，但我不明白为什么它不能在框架布局和约束布局等其他布局下工作，如果你有使用其他布局的解决方案，请分享。

Its, Works + 1, It's because of android:layout_alignParentLeft="true" android:layout_alignParentRight="true", videoview 适合相对布局的左右两边。

【参考方案3】：

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

它有两种模式。它们都总是填充视图区域。要让它在保持纵横比的同时填充空间，从而裁剪长边，您需要切换到第二种模式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()

【讨论】：

这不是安卓吗？

Kotlin，亲爱的先生 :)

由于这个答案仍然相关，我们应该牢记自 Android 9 以来新的 SDK 反射限制。有人可能会考虑这个问题：***.com/questions/11185874/…。此外，从 Android 11 开始，VideoView.mMediaPlayer 字段仍被正式列入“灰名单”。

如何获取IOS上存在的AVLayerVideoGravityResizeAspect效果

【参考方案4】：

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);
    


    @Override
    public void setVideoURI(Uri uri) 
        MediaMetadataRetriever retriever = new MediaMetadataRetriever();
        retriever.setDataSource(this.getContext(), uri);
        mVideoWidth = Integer.parseInt(retriever.extractMetadata(MediaMetadataRetriever.METADATA_KEY_VIDEO_WIDTH));
        mVideoHeight = Integer.parseInt(retriever.extractMetadata(MediaMetadataRetriever.METADATA_KEY_VIDEO_HEIGHT));
        super.setVideoURI(uri);
    

    @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);
    

【参考方案5】：

使用ConstraintLayout我们可以做到这一点，参考下面的xml代码。

当 layout_width 和 layout_height 为 0dp 时，VideoView 的大小和位置是根据其他约束动态计算的。 layout_constraintDimensionRatio 属性表示app在计算VideoView的大小时，宽高比应该是3:4。此约束使视频的纵横比保持不变，并防止视图在任一方向上被拉伸得太远（取决于设备的旋转方式）。

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

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_
    android:layout_>

    <VideoView
        android:id="@+id/videoView"
        android:layout_
        android:layout_
        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>

【讨论】：

这与问题提出的相反。他希望它被裁剪。

【参考方案6】：

快速有效的修复：

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

<VideoView
     android:id="@+id/video"
     android:layout_
     android:layout_ />

【讨论】：

我真的很希望这项工作，但它什么也没做。

【参考方案7】：

第一次一个问题回答了我的问题而不是答案！ 我的问题是我在全屏视频下有一个空白区域。我将layout_height 设置为match_parent。解决方案是将其设置为wrap_content 并为父级提供黑色背景。那就是让VideoView 在其父级中垂直居中。

我写了这篇评论，但后来认为有人可能有同样的看法 我有问题，所以这里也作为答案。

【参考方案8】：

我尝试了很多解决方案，而我的视频始终为 1000*1000 格式，因此我为了解宽高比的人创建了一个简单的解决方案。首先在 RelativeLayout 中创建一个 VideoView，如下所示：

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

      <VideoView  
          android:id="@+id/videoView"
          android:layout_
          android:layout_
          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 的纵横比，但您可以使用纵横比来更改高度或宽度。

【讨论】：

这里应该是RelativeLayout而不是ConstraintLayout，但是还是不行。

@MartinErlic 你说得对，但它确实对我有用，这就是我发布它的原因。如果您愿意，请将您的代码发布到 github/lab 并在此处链接，我会为您检查。

【参考方案9】：

Jobbert 在 Kotlin 中的回答，以防万一有人需要：

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

【参考方案10】：

我一直在寻找在 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_
    android:layout_
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    />

【讨论】：

和mVideoWidth / mVideoHeight是怎么计算的？？

mVideoWidth / mVideoHeight 顾名思义，它们是视频的宽度和高度

代码很好，但我们只需要你计算出来的地方吗？ displayMetrics 的声明在哪里？

【参考方案11】：

只需将您的 VideoView 放入 RelativeLayout 并为该相对布局设置所需的大小。就像下面的代码，

<RelativeLayout
    android:layout_
    android:layout_>

    <VideoView
        android:id="@+id/videoView"
        android:layout_
        android:layout_
        android:layout_centerInParent="true" />

</RelativeLayout>

它会起作用的。

【参考方案12】：

您只需将 Videoview 小部件放入 RelativeLayout（仅限 xml 文件中的更改）

这里是参考答案link