Resizing Video View with the Native SDK for Android

Overview

As a developer, you can change the default behavior for how the Video is displayed on the Video View. You can resize/stretch the inner Video View (SurfaceView/TextureView) to fill the BrightcoveVideoView (FrameLayout). To do this, you can listen for the EventType.VIDEO_SIZE_KNOWN event, do some math and set the display values.

There are two ways to change the Video View:

• Resizing the container (BaseVideoView/FrameLayout)
• Resizing the video (SurfaceView)

Resizing the container

You may want to develop an app that sets the Video View to fit the entire device screen in portrait mode. You can do this by resizing the container (BaseVideoView/FrameLayout).

Set the container property

If you see black margins around your video, you can try setting the BrightcoveVideoView layout-height.

1. Open the XML layout file.
2. Set the BrightcoveVideoView layout-height to wrap_content.
3. You may experience an initial flicker as explained in the note above.

Set the Video View size

Another way to control the Video View is to set the size programmatically.

1. To minimize the initial flicker, try setting the the layout_height to a specific value (e.g. 280dp). The goal is for the height set to be close to the calculated height.
2. Listen for the EventType.VIDEO_SIZE_KNOWN event.
3. Get the Event.VIDEO_WIDTH and Event.VIDEO_HEIGHT
4. With those values, determine the aspect ratio.
5. Use the aspect ratio to calculate the width and height on the display.

This solution will look similar to this:

//Event sent when we know the Video dimensions.
eventEmitter.on(EventType.VIDEO_SIZE_KNOWN, new EventListener() {
  @Override
  public void processEvent(Event event) {
    // Get the width and height
    float width = event.getIntegerProperty(Event.VIDEO_WIDTH);
    float height = event.getIntegerProperty(Event.VIDEO_HEIGHT);
    float aspectRatio = height/width;

    //Get the display metrics
    DisplayMetrics metrics = new DisplayMetrics();
    getWindowManager().getDefaultDisplay().getMetrics(metrics);
    int videoWidth = metrics.widthPixels; // We cover the entire display's width
    int videoHeight = (int) (videoWidth*aspectRatio); //Calculate the height based on the ratio

    // Set the layout params
    brightcoveVideoView.setLayoutParams(new FrameLayout.LayoutParams(videoWidth,videoHeight));
  }
});

When adding a View, you will need to override the layout params. For details, see the Android: Adding View/Managing Layout document.

Resizing the video

You may want to implement a double-tap that fills the screen. This would take a 16:9 video and fill the screen on an 18:9 or 19:9 device.

You can do this by resizing the actual video (SurfaceView).

1. If you set the width and the height to the renderView to match the size of the device display, the video will resize to match the entire screen.

   //Event sent when we know the Video dimensions.
   eventEmitter.on(EventType.VIDEO_SIZE_KNOWN, new EventListener() {
     @Override
     public void processEvent(Event event) {
       // Get the width and height
       float width = event.getIntegerProperty(Event.VIDEO_WIDTH);
       float height = event.getIntegerProperty(Event.VIDEO_HEIGHT);
       float aspectRatio = height/width;
   
       //Get the display metrics
       DisplayMetrics metrics = new DisplayMetrics();
       getWindowManager().getDefaultDisplay().getMetrics(metrics);
       int videoWidth = metrics.widthPixels; // We cover the entire display's width
       int videoHeight = (int) (videoWidth*aspectRatio); //Calculate the height based on the ratio
   
       // Set the video size
       brightcoveVideoView.getRenderView().setVideoSize(videoWidth, videoHeight);
     }
   });
   

2. The code below updates the underlying video view (e.g. SurfaceView) to match its parent BaseVideoView (FrameLayout). There are several things to keep in mind:

   • You need to listen for the VIDEO_SIZE_KNOWN event when entering and exiting full screen, and when rotating the device.
   • You need to decide when to update your view for the above conditions.

   One scenario could be that you set the BaseVideoView layout_height to 280dp and then resize the SurfaceView to match 280dp. The aspect ratio will be modified slightly. If a user goes to full screen in portrait mode and updateVideoViewMatchToParent() is called, then both the BaseVideoView and SurfaceView will fill the device’s display and the video aspect ratio will be slightly modified.

   public void updateVideoViewMatchToParent(@NonNull BaseVideoView brightcoveVideoView) {
     RenderView renderView = brightcoveVideoView.getRenderView();
     if (renderView != null) {
         renderView.setVideoSize(brightcoveVideoView.getWidth(), brightcoveVideoView.getHeight());
     }
   }
   

   To detect the double tap, you can use the GestureDetector.OnDoubleTapListener interface. For details, see the Detect common gestures document.

If you want to stretch the video without taking the aspect ratio into account (without cropping the video), you can try this:

eventEmitter.on(EventType.VIDEO_SIZE_KNOWN, new EventListener() {
  @Override
  public void processEvent(Event event) {
      //Get the display metrics
      DisplayMetrics metrics = new DisplayMetrics();
      getWindowManager().getDefaultDisplay().getMetrics(metrics);

      int videoHeight = metrics.heightPixels;
      int videoWidth = metrics.widthPixels;
      brightcoveVideoView.getRenderView().setVideoSize(videoWidth, videoHeight);
  }
});

Keep in mind that the values you get are affected by the orientation of the device. To stretch the video for both portrait and landscape, you need to do the following:

1. Override the following Activity:

   public void onConfigurationChanged(Configuration configuration)
   

2. Reset the video size.