Cambiar el tamaño de la vista de video con el SDK nativo para Android

En este tema, aprenderá cómo cambiar el tamaño/estirar la vista de video interna para llenar el BrightcoveVideoView cuando se trabaja con Native SDK para Android.

Resumen

Como desarrollador, puede cambiar el comportamiento predeterminado de cómo se muestra el video en la vista de video. Puede cambiar el tamaño / estirar la vista de video interna (SurfaceView/TextureView ) para llenar el BrightcoveVideoView (FrameLayout). Para hacer esto, puede escuchar el EventType.VIDEO_SIZE_KNOWN evento, haga algunos cálculos matemáticos y establezca los valores de visualización.

Hay dos formas de cambiar la vista de video:

Cambiar el tamaño del contenedor

Es posible que desee desarrollar una aplicación que configure la Vista de video para que se ajuste a toda la pantalla del dispositivo en modo vertical. Puede hacer esto cambiando el tamaño del contenedor (BaseVideoView/FrameLayout).

Establecer la propiedad del contenedor

Si ve márgenes negros alrededor de su video, puede intentar configurar el BrightcoveVideoView layout-height.

  1. Abra el XML diseño expediente.
  2. Selecciona el BrightcoveVideoView layout-height a wrap_content.
  3. Puede experimentar un parpadeo inicial como se explica en la nota anterior.

Establecer el tamaño de la vista de video

Otra forma de controlar la Vista de video es establecer el tamaño mediante programación.

  1. Para minimizar el parpadeo inicial, intente configurar el layout_height a un valor específico (por ejemplo, 280 dp). El objetivo es que la altura establecida se acerque a la altura calculada.
  2. Escuche el EventType.VIDEO_SIZE_KNOWN evento.
  3. Consigue el Event.VIDEO_WIDTH y Event.VIDEO_HEIGHT
  4. Con esos valores, determine la relación de aspecto.
  5. Utilice la relación de aspecto para calcular el ancho y el alto en la pantalla.

Esta solución se verá similar a esto:

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

Al agregar una vista, deberá anular los parámetros de diseño. Para obtener más detalles, consulte la Androide: Agregar vista / administrar diseño documento.

Cambiar el tamaño del video

Es posible que desee implementar un doble toque que llene la pantalla. Esto tomaría un video 16: 9 y llenaría la pantalla en un dispositivo 18: 9 o 19: 9.

Puede hacer esto cambiando el tamaño del video real (SurfaceView).

  1. Si establece el ancho y el alto en el renderView para que coincida con el tamaño de la pantalla del dispositivo, el video cambiará de tamaño para que coincida con la pantalla completa. 

    //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. El siguiente código actualiza la vista de video subyacente (p. Ej. SurfaceView ) para que coincida con su padre BaseVideoView (FrameLayout). Hay varias cosas a tener en cuenta:

    • Necesitas escuchar el VIDEO_SIZE_KNOWN evento al entrar y salir de la pantalla completa, y al girar el dispositivo.
    • Debe decidir cuándo actualizar su vista para las condiciones anteriores.

    Un escenario podría ser que establezca el BaseVideoView layout_height a 280dp y luego cambiar el tamaño del SurfaceView para igualar 280dp. La relación de aspecto se modificará ligeramente. Si un usuario pasa a pantalla completa en modo vertical y updateVideoViewMatchToParent() se llama, entonces tanto el BaseVideoView y SurfaceView llenará la pantalla del dispositivo y la relación de aspecto del video se modificará ligeramente.

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

    Para detectar el doble toque, puede utilizar el GestureDetector.OnDoubleTapListener interfaz. Para obtener más detalles, consulte la Detecta gestos comunes documento.

Si desea estirar el video sin tener en cuenta la relación de aspecto (sin recortar el video), puede intentar esto:

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

Tenga en cuenta que los valores que obtiene se ven afectados por la orientación del dispositivo. Para estirar el video tanto en vertical como en horizontal, debe hacer lo siguiente:

  1. Anule lo siguiente Activity: 

    public void onConfigurationChanged(Configuration configuration)
  2. Restablece el tamaño del video.