¿Cómo reproducir vídeos automáticamente en páginas de ventas?
Autoplay en páginas de ventas
Los navegadores, por defecto, no permiten el autoplay de videos con sonido, esta es una política para mejorar la experiencia del usuario, más detalles en el blog de Chrome . En una página de ventas, lo que queremos es que el visitante se enganche lo más rápido posible con el contenido, especialmente en video. El video solo se puede reproducir con autoplay con sonido si el usuario interactúa con la página, es decir, un clic es suficiente para que el navegador permita que el video se ejecute con audio.
Debemos recordar al usuario que haga clic en el video para que funcione el autoplay. De esta manera, podemos iniciar un video en silencio y con un aviso grande pedirle al usuario que haga clic en el video. Este recurso aumenta tu conversión en las páginas de venta, ya que crea un mayor compromiso del usuario.
SmartAutoplay
Actualmente, ya disponemos de varios recursos que puedes implementar dentro de tu dashboard. A través de este enlace , puedes activar de forma práctica el SmartAutoplay y realizar configuraciones adicionales, como activar el indicador de silencio y personalizarlo según tus preferencias.
Continuar desde donde Paró
A través de este artículo es posible guardar el progreso del video en el navegador. Con esta funcionalidad, permites que el usuario elija si desea reiniciar el video o retomar desde donde lo dejó .
Algunos recursos están disponibles modificando el código embed. Cuando copias un código embed del dashboard de Panda, observa que parte del código está dentro del src. Este es el bloque que controla el player y su comportamiento. Para activar el mutedIndicator (indicador de silencio), necesitamos añadir algunos parámetros en el código embed (próximamente esto estará disponible en la plataforma de una manera más sencilla).
Algunos parámetros que deben añadirse:
autoplay = true
muted = true
mutedIndicatorIcon = true
mutedIndicatorClickRestart = true
mutedIndicatorTextTop = Texto de arriba
mutedIndicatorTextBottom = Texto de abajo
saveProgress = false
controls = play-large
Con los parámetros anteriores, el video comenzará con autoplay, en silencio y con el indicador de silencio ( mutedIndicator ). Al hacer clic en el ícono, el video se reinicia (sin recargar, gracias al parámetro mutedIndicatorClickRestart ) y sin guardar el progreso del video ( saveProgress ). También se eliminaron los controles, dejando solo el play-large (control de reproducción) para no distraer al usuario.
Así, el código final es:
Observa que al final se agregó la parte &muted=true&autoplay=true&mutedIndicatorIcon=true&mutedIndicatorTextTop=Texto de arriba&mutedIndicatorTextBottom=Texto de abajo&saveProgress=false&mutedIndicatorClickRestart=true&controls=play-large. Por supuesto, puedes cambiar el texto de arriba y abajo como desees.
Es importante mencionar que en controls puedes incluir cualquier valor separado por comas para habilitar los controles del player, como play-large,play,progress,current-time,volume,captions,settings,pip,fullscreen.
Cualquier duda, ¡solo háznoslo saber!
Si necesitas más ayuda o ajustes, no dudes en pedírmelo.
Los navegadores, por defecto, no permiten el autoplay de videos con sonido, esta es una política para mejorar la experiencia del usuario, más detalles en el blog de Chrome . En una página de ventas, lo que queremos es que el visitante se enganche lo más rápido posible con el contenido, especialmente en video. El video solo se puede reproducir con autoplay con sonido si el usuario interactúa con la página, es decir, un clic es suficiente para que el navegador permita que el video se ejecute con audio.
Debemos recordar al usuario que haga clic en el video para que funcione el autoplay. De esta manera, podemos iniciar un video en silencio y con un aviso grande pedirle al usuario que haga clic en el video. Este recurso aumenta tu conversión en las páginas de venta, ya que crea un mayor compromiso del usuario.
¿Cómo implementar directamente desde el Dashboard?
SmartAutoplay
Actualmente, ya disponemos de varios recursos que puedes implementar dentro de tu dashboard. A través de este enlace , puedes activar de forma práctica el SmartAutoplay y realizar configuraciones adicionales, como activar el indicador de silencio y personalizarlo según tus preferencias.
Continuar desde donde Paró
A través de este artículo es posible guardar el progreso del video en el navegador. Con esta funcionalidad, permites que el usuario elija si desea reiniciar el video o retomar desde donde lo dejó .
¿Cómo implementar a través de Parámetros?
Algunos recursos están disponibles modificando el código embed. Cuando copias un código embed del dashboard de Panda, observa que parte del código está dentro del src. Este es el bloque que controla el player y su comportamiento. Para activar el mutedIndicator (indicador de silencio), necesitamos añadir algunos parámetros en el código embed (próximamente esto estará disponible en la plataforma de una manera más sencilla).
Algunos parámetros que deben añadirse:
autoplay = true
muted = true
mutedIndicatorIcon = true
mutedIndicatorClickRestart = true
mutedIndicatorTextTop = Texto de arriba
mutedIndicatorTextBottom = Texto de abajo
saveProgress = false
controls = play-large
Con los parámetros anteriores, el video comenzará con autoplay, en silencio y con el indicador de silencio ( mutedIndicator ). Al hacer clic en el ícono, el video se reinicia (sin recargar, gracias al parámetro mutedIndicatorClickRestart ) y sin guardar el progreso del video ( saveProgress ). También se eliminaron los controles, dejando solo el play-large (control de reproducción) para no distraer al usuario.
Así, el código final es:
<div style=""position:relative;padding-top:56.25%;""><iframe id=""panda-player"" src=""https://player-vz-ded14ebd-85a.tv.pandavideo.com.br/embed/?v=3b101f05-84aa-4de0-9b64-71f1855388af&muted=true&autoplay=true&mutedIndicatorIcon=true&mutedIndicatorTextTop=Texto de arriba&mutedIndicatorTextBottom=Texto de abajo&saveProgress=false&mutedIndicatorClickRestart=true&controls=play-large"" style=""border:none;position:absolute;top:0;height:100%;width:100%"" allow=""accelerometer;gyroscope;autoplay;encrypted-media;picture-in-picture"" allowfullscreen=true></iframe></div>Observa que al final se agregó la parte &muted=true&autoplay=true&mutedIndicatorIcon=true&mutedIndicatorTextTop=Texto de arriba&mutedIndicatorTextBottom=Texto de abajo&saveProgress=false&mutedIndicatorClickRestart=true&controls=play-large. Por supuesto, puedes cambiar el texto de arriba y abajo como desees.
Es importante mencionar que en controls puedes incluir cualquier valor separado por comas para habilitar los controles del player, como play-large,play,progress,current-time,volume,captions,settings,pip,fullscreen.
Cualquier duda, ¡solo háznoslo saber!
Si necesitas más ayuda o ajustes, no dudes en pedírmelo.
Actualizado el: 09/12/2024
¡Gracias!