Définir des mises en page avec un VideoCompositorSettings personnalisé

Les utilisateurs peuvent souhaiter modifier plusieurs éléments multimédias ensemble afin que plusieurs éléments multimédias apparaissent en même temps dans la vidéo finale. Cela inclut l'organisation des éléments dans des mises en page telles que l'image dans l'image, côte à côte ou une grille. Voici quelques exemples de projets de ce type :

Vous pouvez explorer une implémentation de ces mises en page dans l' application de démonstration Composition.

Implémenter un VideoCompositorSettings

L'interface VideoCompositorSettings contient deux méthodes :

• getOutputSize(List<Size> inputSizes), que vous pouvez utiliser pour spécifier la taille de chaque entrée EditedMediaItemSequence
• getOverlaySettings(int inputId, long presentationTimeUs), où vous pouvez spécifier comment chaque séquence doit apparaître dans le frame

Configurer la présentation d'une séquence avec un OverlaySettings

Votre implémentation de getOverlaySettings() doit renvoyer une instance de l' OverlaySettings interface pour chaque séquence de votre projet. Le paramètre inputId identifie la séquence à laquelle les paramètres seront appliqués. Pour créer une instance, vous pouvez utiliser la StaticOverlaySettings classe incluse dans Media3. Consultez la page de référence StaticOverlaySettings.Builder pour obtenir la liste complète des options de configuration, qui incluent des modifications visuelles telles que la transparence alpha et la luminance HDR, des modifications de position telles que le point d’ancrage et l’emplacement dans le frame, ainsi que des transformations telles que la rotation et l’échelle.

override fun getOverlaySettings(inputId: Int, presentationTimeUs: Long): OverlaySettings {
  return when (inputId) {
    // Position the first sequence in the top-left
    0 -> {
      StaticOverlaySettings.Builder()
        // Scale the video down to 1/4th the size of the frame
        .setScale(0.5f, 0.5f)
        // Anchor the sequence in the middle of frame
        .setOverlayFrameAnchor(0f, 0f)
        // Position the video in the top-left section of the frame
        .setBackgroundFrameAnchor(-0.5f, 0.5f)
        .build()
    }
    // Add more cases for remaining input sequences
    else -> StaticOverlaySettings.Builder().build()
  }
}
VideoCompositorSettings.kt

À l'aide du paramètre presentationTimeUs de la méthode getOverlaySettings(), vous pouvez modifier ces paramètres en fonction de la position de la vidéo, comme le montre l'exemple d'image dans l'image en mouvement plus haut sur cette page.

override fun getOverlaySettings(inputId: Int, presentationTimeUs: Long): OverlaySettings {
  return if (inputId == 0) {
    // Use the first sequence as the overlay
    val cycleRadians = 2 * PI * (presentationTimeUs.toDouble() / cycleTimeUs)
    StaticOverlaySettings.Builder()
      // Scale the overlay down
      .setScale(0.35f, 0.35f)
      // Anchor the overlay in the top-middle of the frame
      .setOverlayFrameAnchor(0f, 1f)
      // Move the overlay over time
      .setBackgroundFrameAnchor(sin(cycleRadians).toFloat() * 0.5f, -0.2f)
      // Rotate the overlay over time
      .setRotationDegrees(cos(cycleRadians).toFloat() * -10f)
      .build()
  } else {
    // Present the second sequence in the background as normal
    StaticOverlaySettings.Builder().build()
  }
}
VideoCompositorSettings.kt

Commentaires

Si vous avez des commentaires ou des demandes de fonctionnalités concernant les cas d'utilisation de la composition vidéo, signalez un problème dans le dépôt GitHub Media3.