Video en mensajes dentro de la aplicación HTML personalizados

Este artículo aplica a los mensajes HTML personalizados en el editor tradicional.

Incrustar videos

Para reproducir un video en un mensaje dentro de la aplicación HTML, incluye el siguiente elemento <video> en tu HTML y reemplaza los nombres de video con el nombre de tu archivo (o la URL del activo remoto). Puedes encontrar otras opciones posibles de <video> en MDN Web Docs.

1
2
3
4
5
<video class="video" autoplay muted playsinline controls>
  <source src="https://video-provider.com/YOUR_VIDEO_FILE.mp4" type="video/mp4">
  <source src="https://video-provider.com/YOUR_VIDEO_FILE.ogg" type="video/ogg">
  Your device does not support playing this video.
</video>

Para usar un activo de video local, asegúrate de incluir este archivo al cargar activos a tu campaña.

Consideraciones para Android

Para incrustar video y otro contenido HTML5 en mensajes dentro de la aplicación HTML en Android, se requiere que la aceleración por hardware esté habilitada en la Activity donde se muestra el mensaje dentro de la aplicación. Para más información, consulta la guía para desarrolladores de Android.

Reproducción automática: Incluso con la aceleración por hardware habilitada, los WebViews de Android pueden requerir un gesto del usuario para iniciar la reproducción de medios. Si necesitas reproducción automática, configura el WebView utilizado para renderizar mensajes dentro de la aplicación HTML para desactivar el requisito de gesto del usuario estableciendo WebSettings.setMediaPlaybackRequiresUserGesture(false). Esto requiere personalización a nivel de SDK de cómo se muestran los mensajes dentro de la aplicación HTML. Para orientación sobre la configuración, consulta Personalizar mensajes dentro de la aplicación para el SDK de Braze.

Consideraciones para iOS

Para dar soporte a dispositivos iOS:

• Debes incluir el atributo playsinline porque la reproducción a pantalla completa no es compatible.
• La reproducción automática no está garantizada en iOS. El comportamiento de reproducción en iOS depende de WKWebView y las políticas de medios a nivel del sistema operativo, y puede requerir un gesto del usuario incluso cuando autoplay y muted están configurados. Prueba tu mensaje dentro de la aplicación HTML en tus versiones y dispositivos iOS objetivo.

Si la reproducción automática es necesaria y tus pruebas muestran que no funciona de forma predeterminada, puedes personalizar la WKWebViewConfiguration utilizada por los mensajes dentro de la aplicación HTML para ajustar el requisito de acción del usuario para la reproducción de medios, por ejemplo, estableciendo la propiedad mediaTypesRequiringUserActionForPlayback. Esto requiere personalización a nivel de SDK. Para recursos de Swift, consulta Personalizar mensajes dentro de la aplicación para el SDK de Braze y Agregar la interfaz JavaScript de Braze a WebViews para Swift.

Consideraciones para Web

La mayoría de los navegadores modernos permiten la reproducción automática solo bajo ciertas condiciones (comúnmente cuando el video está silenciado). Si usas autoplay en un mensaje dentro de la aplicación web, incluye muted y prueba en tus navegadores y dispositivos compatibles, ya que las políticas de los navegadores varían y pueden requerir un gesto del usuario en algunos casos.

Para reproducir automáticamente videos de YouTube en un mensaje dentro de la aplicación web, agrega el parámetro de URL &autoplay=1. Por ejemplo, el siguiente video se reproducirá automáticamente, estará silenciado (&mute=1) y no mostrará controles (&controls=0):

1
<iframe class="video" src="https://www.youtube.com/embed/VPIPAc4oQqw?autoplay=1&mute=1&controls=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Cómo se muestran los videos de YouTube

• Los mensajes dentro de la aplicación con YouTube incrustado pueden mostrarse directamente dentro de la aplicación o en una pestaña separada dentro de la aplicación, dependiendo de la plataforma.
• Es posible que el texto del mensaje dentro de la aplicación no se muestre cuando se presenta el video incrustado de YouTube.

Solución de problemas

Si tu mensaje dentro de la aplicación no muestra tu video:

• Confirma que tu URL es válida.
• Confirma que no falta la declaración type="video/mp4" (para video que no sea de YouTube).
• Agrega cualquier etiqueta de cierre faltante y corrige errores tipográficos.