Set width height ratio for EMVideoView

[VAdaihiep]

Thanks for your nice work!
I think it's better when have feature set width height ratio for EMVideoView.
And could you make a demo about fullscreen playback. E.g click button -> fullscreen mode; click back -> normal mode.

[brianwernick]

I'll add a full screen demo later today.

As far as the ability to set the width/height ratio goes, are you asking for the ability to have the EMVideoView wrap content (be the exact height and width of the video)?

[VAdaihiep]

I mean we can fixed ratio of video view like com.google.android.exoplayer.VideoSurfaceView.setVideoWidthHeightRatio(16f/9);

I tried to implement this and it works 😃

EMVideoView.java

 public EMVideoView(Context context, AttributeSet attrs) {
        super(context, attrs);
        getCustomAttrs(context, attrs);
        setup(context);
    }

    @TargetApi(Build.VERSION_CODES.HONEYCOMB)
    public EMVideoView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        getCustomAttrs(context, attrs);
        setup(context);
    }

    @TargetApi(Build.VERSION_CODES.LOLLIPOP)
    public EMVideoView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
        getCustomAttrs(context, attrs);
        setup(context);
    }

  private float widthHeightRatio;

    public float getWidthHeightRatio() {
        return widthHeightRatio;
    }

    public void setWidthHeightRatio(float widthHeightRatio) {
        this.widthHeightRatio = widthHeightRatio;
    }

    private void getCustomAttrs(Context context, AttributeSet attrs) {
        TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.EMVideoView);

        widthHeightRatio = a.getFloat(R.styleable.EMVideoView_width_height_ratio, -1);

        a.recycle();
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        if (widthHeightRatio == -1) {
            super.onMeasure(widthMeasureSpec, heightMeasureSpec);
            return;
        }

        int originalWidth = MeasureSpec.getSize(widthMeasureSpec);

        int originalHeight = MeasureSpec.getSize(heightMeasureSpec);

        int calculatedHeight = (int) (originalWidth / widthHeightRatio);

        int finalWidth, finalHeight;

        if (calculatedHeight > originalHeight) {
            finalWidth = (int) (originalHeight * widthHeightRatio);
            finalHeight = originalHeight;
        } else {
            finalWidth = originalWidth;
            finalHeight = calculatedHeight;
        }

        super.onMeasure(
                MeasureSpec.makeMeasureSpec(finalWidth, MeasureSpec.EXACTLY),
                MeasureSpec.makeMeasureSpec(finalHeight, MeasureSpec.EXACTLY));
    }

activity_main.xml

 <com.devbrackets.android.exomedia.EMVideoView
        android:id="@+id/video_play_activity_video_view"
        android:layout_width="match_parent"
        android:layout_centerHorizontal="true"
        android:layout_height="wrap_content"
        va:width_height_ratio="1.77" />

Or in java code:
emVideoView.setWidthHeightRatio(16.0f/9);

[brianwernick]

Just to make sure; this is to force the specified aspect ratio to always be used, even if the actual video has an aspect ratio different from the specified one?

e.g.
If you specify 1.77 (16/9) and the video has 1.33 (4/3) it will still use the 1.77 (16/9) ratio.

PS:
I just pushed a commit with the requested fullscreen demo (f7c638b)

[VAdaihiep]

Yes, i mean force aspect ratio. Like Youtube android app: If video has other aspect ratio (4/3, etc), it will have black side (in the left and right with video 4/3).

About fullscreen demo, i'm going to run it now, thank you.

[brianwernick]

So currently the EMVideoView will add black bars (you can specify the color) to the sides, or to the bottom & top in order to keep the view itself at the specified size without skewing the video. This is done when the video content is first loaded (https://github.com/brianwernick/ExoMedia/blob/master/library/src/main/java/com/devbrackets/android/exomedia/EMVideoView.java#L916)

This should have the same effect that you are seeing in the YouTube app

[VAdaihiep]

So how to put some view below VideoView in not full screen mode?

When i write layout like this, but screen not show textview.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.devbrackets.android.exomedia.EMVideoView
        android:id="@+id/video_play_activity_video_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <TextView
        android:layout_below="@id/video_play_activity_video_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Desciption about this video" />
</RelativeLayout>

BTW, I think we should add android:configChanges="keyboardHidden|orientation|screenSize" to avoid restart video when rotate screen.

[brianwernick]

Good point on the orientation change, I'll add that.

When I get some more time this weekend I'll look at the EMVideoView and figure out why the wrap_content isn't working correctly. Thanks for pointing it out.

[VAdaihiep]

And a small issue about Fullscreen Activity, i just tested in Samsung Galaxy S2 (Android 4.0.3) and it not fullscreen, still have action bar and status bar.

[brianwernick]

@VAdaihiep: sorry it is taking me so long to work on this, I've been pretty busy this last week. Looking a little more in to it, I'm not sure I like the wrap_content aspect of it, as video sizes will change and the Android VideoView will have no size until a video is loaded which will cause layout popping.

In the end I will probably end up implementing something very similar to your fixed aspect ratio example above.

[VAdaihiep]

Exactly, only video size change. Wish you could fix soon.

[brianwernick]

@VAdaihiep Sorry for the long wait, I've been busy with work lately. It looks like I will need to re-work the basic backing UI for the EMVideoView to enable both this and other resizing options (such as cropping). I will be out this weekend as well but hopefully next week I will be able to fix this issue.

[VAdaihiep]

Thanks for come back.

[brianwernick]

Because this can now be achieved with the percent layouts provided by google (support libraries) There is no reason to include this anymore.

[neil-bh]

Hi @brianwernick

I've read through this thread as I seem to be trying to achieve what @VAdaihiep mentioned regarding displaying a 4:3 video and a 16:9 video in the most maximum size, but I cannot seem to find that an answer was suggested (apart from the mention of google percent layouts which I cannot see how that'd work as a solution).

To put into context, I have a "half screen" emVideoView (as seen in my layout example below i.e. the RelativeLayout surrounding the emVideoView is fixed at 200dp height). If I play a stream that is a 16:9 ratio, the video fits perfectly in the space provided. However if I play a stream that is 4:3 ratio, it seems the aspect ratio is kept to fit inside the 200dp high RelativeLayout container, so this results in the width of the video not filling the entire width of the RelativeLayout container.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
            xmlns:EMVideoView="http://schemas.android.com/apk/res-auto"
            android:id="@+id/em_videoviewcontainer"
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:background="@android:color/black">

            <com.devbrackets.android.exomedia.ui.widget.EMVideoView
                android:id="@+id/em_videoview"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@android:color/black"
                EMVideoView:useDefaultControls="true" />

</RelativeLayout>

The ideal outcome is to have both 16:9 and 4:3 streams fit inside a 200dp height container, but the width of the video should always fill 100% of its container - perhaps a centercrop approach to the video would work?

Is this something that it feasible to achieve?

PS> I took a look at an archived copy of my project which uses the same layout, however it is using ExoMedia 2.5.6 - and the aspect ration is shown exactly as desired. What is it in 3.x that has changed? have you changed the way this works in 3.x version @brianwernick ?

I appropriate your time and reply. Thanks in advanced.

[neil-bh]

After playing with different options, I found emVideoView.setScaleType(ScaleType.NONE); does exactly what I need. Great!