Redimensionnement de la vue vidéo avec le SDK natif pour Android

Dans cette rubrique, vous allez apprendre à redimensionner/étirer la vue vidéo interne pour remplir le BrightcoveVideoView lorsque vous travaillez avec le SDK natif pour Android.

Aperçu

En tant que développeur, vous pouvez modifier le comportement par défaut d'affichage de la vidéo dans la vue vidéo. Vous pouvez redimensionner/étirer la vue vidéo interne (SurfaceView/TextureView ) pour remplir le BrightcoveVideoView (FrameLayout). Pour ce faire, vous pouvez écouter le EventType.VIDEO_SIZE_KNOWN événement, faites quelques calculs et définissez les valeurs d'affichage.

Il existe deux manières de modifier la vue vidéo :

Redimensionner le conteneur

Vous souhaiterez peut-être développer une application qui définit la vue vidéo pour qu'elle s'adapte à tout l'écran de l'appareil en mode portrait. Vous pouvez le faire en redimensionnant le conteneur (BaseVideoView/FrameLayout).

Définir la propriété du conteneur

Si vous voyez des marges noires autour de votre vidéo, vous pouvez essayer de régler le BrightcoveVideoView layout-height.

  1. Ouvrir le XML disposition déposer.
  2. Met le BrightcoveVideoView layout-height à wrap_content.
  3. Vous pouvez rencontrer un scintillement initial comme expliqué dans la note ci-dessus.

Définir la taille de la vue vidéo

Une autre façon de contrôler la vue vidéo consiste à définir la taille par programmation.

  1. Pour minimiser le scintillement initial, essayez de régler le layout_height à une valeur spécifique (par exemple 280dp). L'objectif est que la hauteur réglée soit proche de la hauteur calculée.
  2. Écoutez le EventType.VIDEO_SIZE_KNOWN un événement.
  3. Obtenir le Event.VIDEO_WIDTH et Event.VIDEO_HEIGHT
  4. Avec ces valeurs, déterminez le rapport hauteur/largeur.
  5. Utilisez le rapport hauteur/largeur pour calculer la largeur et la hauteur de l'écran.

Cette solution ressemblera à ceci :

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

Lors de l'ajout d'une vue, vous devrez remplacer les paramètres de mise en page. Pour plus de détails, consultez le Android: Ajouter une vue/Gérer la mise en page document.

Redimensionner la vidéo

Vous voudrez peut-être implémenter un double-clic qui remplit l'écran. Cela prendrait une vidéo 16:9 et remplirait l'écran sur un appareil 18:9 ou 19:9.

Vous pouvez le faire en redimensionnant la vidéo réelle (SurfaceView).

  1. Si vous réglez la largeur et la hauteur sur le renderView pour correspondre à la taille de l'affichage de l'appareil, la vidéo sera redimensionnée pour correspondre à l'écran entier. 

    //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. Le code ci-dessous met à jour la vue vidéo sous-jacente (par exemple SurfaceView ) pour correspondre à son parent BaseVideoView (FrameLayout). Il y a plusieurs choses à garder à l'esprit :

    • Vous devez écouter le VIDEO_SIZE_KNOWN événement lors de l'entrée et de la sortie du plein écran, et lors de la rotation de l'appareil.
    • Vous devez décider quand mettre à jour votre vue pour les conditions ci-dessus.

    Un scénario pourrait être que vous définissiez le BaseVideoView layout_height à 280dp puis redimensionner le SurfaceView correspondre 280dp. Le rapport hauteur/largeur sera légèrement modifié. Si un utilisateur passe en plein écran en mode portrait et updateVideoViewMatchToParent() est appelé, alors les deux BaseVideoView et SurfaceView remplira l'écran de l'appareil et le rapport hauteur/largeur de la vidéo sera légèrement modifié.

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

    Pour détecter le double tap, vous pouvez utiliser le GestureDetector.OnDoubleTapListener interface. Pour plus de détails, consultez le Détecter les gestes courants document.

Si vous souhaitez étirer la vidéo sans prendre en compte le rapport hauteur/largeur (sans recadrer la vidéo), vous pouvez essayer ceci :

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

Gardez à l'esprit que les valeurs que vous obtenez sont affectées par l'orientation de l'appareil. Pour étirer la vidéo en mode portrait et paysage, procédez comme suit :

  1. Remplacer ce qui suit Activity: 

    public void onConfigurationChanged(Configuration configuration)
  2. Réinitialiser la taille de la vidéo.