Para reproducir automáticamente videos en una página web es una excelente manera de mostrar grabaciones de pantalla y videos en bucle sin usar animaciones gif granuladas y pesadas. Aquí se explica cómo reproducir videos automáticamente en Divi sin romper la política de reproducción automática de navegadores web como Chrome, Firefox y Safari.

Por qué la reproducción automática de vídeo puede ser complicada

Google Chrome decidió bloquear los videos reproducidos automáticamente en abril de 2018. De hecho, casi todos los principales navegadores web tienen la misma política estricta sobre la reproducción automática. Google Chrome resume las razones detrás de esto:

Experiencia de usuario mejorada, incentivos minimizados para instalar bloqueadores de anuncios y consumo de datos reducido.

Sin embargo, no hay reglas sin expectativas. La política de Google Chrome establece:

«Las políticas de reproducción automática de Chrome son simples:

• Siempre se permite la reproducción automática silenciada.
• Se permite la reproducción automática con sonido si:
• El usuario ha interactuado con el dominio (clic, toque, etc.).
• En el escritorio, se ha cruzado el umbral del índice de participación en medios del usuario, lo que significa que el usuario ha reproducido previamente vídeo con sonido.
• El usuario ha agregado el sitio a su pantalla de inicio en el móvil o ha instalado la PWA en el escritorio.
• Los fotogramas superiores pueden delegar el permiso de reproducción automática a sus iframes para permitir la reproducción automática con sonido.

En este tutorial, vamos a usar el módulo de video Divi, silenciar el video de forma predeterminada y habilitar la reproducción automática. De esta manera, el video comenzará a reproducirse automáticamente sin ser pausado por el navegador. ¡Vamos!

Método 1: reproducción automática de vídeo y botones de control de pantalla al pasar el cursor

Demostración en vivo: El vídeo comienza a reproducirse automáticamente. Desplace el video para usar los controles de video para reproducir, pausar, desplazarse por la línea de tiempo, reactivar, silenciar, controlar el volumen, ver a pantalla completa y más opciones.

1. Vaya a Divi » Opciones de tema » Integración y pegue el código a continuación en el segundo campo: Agregar código al < cuerpo > y haga clic en Guardar cambios.

   <script>
   jQuery(document).ready(function($) {
   if ($('.dm-autoplay-btn .et_pb_video_box').length !== 0) {
   $('.dm-autoplay-btn .et_pb_video_box').find('video').prop('muted', true);
   $(".dm-autoplay-btn .et_pb_video_box").find('video').attr('loop', 'loop');
   $(".dm-autoplay-btn .et_pb_video_box").find('video').attr('playsInline', '');
   $(".dm-autoplay-btn .et_pb_video_box").each(function() {
   $(this).find('video').get(0).play();
   });
   }
   });
   </script>

   Consejo profesional: Si no desea que el script se lea en todas las páginas (por razones de velocidad de página), un método alternativo es agregar el código en un módulo de código Divi en las publicaciones y páginas específicas donde desea usar la reproducción automática.

2. Vaya a la página o publicación donde desea incrustar el video de reproducción automática y habilite el Divi Visual Builder.
3. Inserte un módulo de video, coloque el video predeterminado de Divi YouTube en la pestaña Contenido y haga clic en el icono de la papelera para eliminarlo.
4. Haga clic en Agregar video y elija un video existente de su biblioteca multimedia de WordPress o cargue uno nuevo. Los formatos mp4 y mov funcionan bien. Salvar.
5. Dirígete a Advanced » CSS ID & Classes en el módulo de video y agrega la clase CSS dm-autoplay-btn

Guarde sus cambios y obtenga una vista previa en el frontend. La reproducción automática solo funciona en frontend, no en Visual Builder. Borre la memoria caché del navegador y la caché del sitio web si no puede ver la reproducción automática.

Método 2: reproducción automática de vídeo y ocultar todos los botones de control

Demostración en vivo: El video comienza a reproducirse automáticamente y todos los botones de control de video están ocultos tanto en reposo como en el desplazamiento. Este es el mismo estilo que Elegant Themes usa en su página de inicio para mostrar la interfaz de usuario de Divi Visual Builder.

1. Vaya a Divi » Opciones de tema » Integración y pegue el código a continuación en el segundo campo: Agregar código al < cuerpo > y haga clic en Guardar cambios.

   <script>
   jQuery(document).ready(function($) {
   if ($('.dm-autoplay .et_pb_video_box').length !== 0) {
   $('.dm-autoplay .et_pb_video_box').find('video').prop('muted', true);
   $(".dm-autoplay .et_pb_video_box").find('video').attr('loop', 'loop');
   $(".dm-autoplay .et_pb_video_box").find('video').attr('playsInline', '');
   $(".dm-autoplay .et_pb_video_box").each(function() {
   $(this).find('video').get(0).play();
   });
   $('.dm-autoplay .et_pb_video_box').find('video').removeAttr('controls');
   }
   });
   </script>

   Consejo profesional: Si no desea que el script se lea en todas las páginas (por razones de velocidad de página), un método alternativo es agregar el código en un módulo de código Divi en las publicaciones y páginas específicas donde desea usar la reproducción automática.

2. Vaya a la página o publicación donde desea incrustar el video de reproducción automática y habilite el Divi Visual Builder.
3. Inserte un módulo de video, coloque el video predeterminado de Divi YouTube en la pestaña Contenido y haga clic en el icono de la papelera para eliminarlo.
4. Haga clic en Agregar video y elija un video existente de su biblioteca multimedia de WordPress o cargue uno nuevo. Los formatos mp4 y mov funcionan bien. Salvar.
5. Dirígete a Advanced » CSS ID & Classes en el módulo de video y agrega la clase CSS dm-autoplay

Guarde sus cambios y obtenga una vista previa en el frontend. La reproducción automática solo funciona en frontend, no en Visual Builder. Borre la memoria caché del navegador y la caché del sitio web si no puede ver la reproducción automática.

Método 3: reproducción automática de vídeo y agregar reactivar el sonido al hacer clic

Demostración en vivo: El video comienza a reproducirse automáticamente y todos los botones de control de video están ocultos tanto en reposo como en el desplazamiento. Si el usuario hace clic en cualquier parte del fotograma de vídeo, el sonido se desactivará y comenzará a reproducirse.

1. Vaya a Divi » Opciones de tema » Integración y pegue el código a continuación en el segundo campo: Agregar código al < cuerpo > y haga clic en Guardar cambios.

   <script>
   jQuery(document).ready(function($) {
   if ($('.dm-autoplay-click .et_pb_video_box').length !== 0) {
   $('.dm-autoplay-click .et_pb_video_box').find('video').prop('muted', true);
   $(".dm-autoplay-click .et_pb_video_box").find('video').attr('loop', 'loop');
   $(".dm-autoplay-click .et_pb_video_box").find('video').attr('playsInline', '');
   $(".dm-autoplay-click .et_pb_video_box").each(function() {
   $(this).find('video').get(0).play();
   });
   $('.dm-autoplay-click .et_pb_video_box').find('video').removeAttr('controls');
   }
   $('.dm-autoplay-click' ).on( 'click', function() {
   var $video = $( this ).find( 'video' );
   var muted = $video.prop( 'muted' );
   $video.prop('muted', muted = !muted );
   });
   });
   </script>

   Consejo profesional: Si no desea que el script se lea en todas las páginas (por razones de velocidad de página), un método alternativo es agregar el código en un módulo de código Divi en las publicaciones y páginas específicas donde desea usar la reproducción automática.

2. Vaya a la página o publicación donde desea incrustar el video de reproducción automática y habilite el Divi Visual Builder.
3. Inserte un módulo de video, coloque el video predeterminado de Divi YouTube en la pestaña Contenido y haga clic en el icono de la papelera para eliminarlo.
4. Haga clic en Agregar video y elija un video existente de su biblioteca multimedia de WordPress o cargue uno nuevo. Los formatos mp4 y mov funcionan bien. Salvar.
5. Dirígete a Advanced » CSS ID & Classes en el módulo de video y agrega la clase CSS dm-autoplay-click

Guarde sus cambios y obtenga una vista previa en el frontend. La reproducción automática solo funciona en frontend, no en Visual Builder. Borre la memoria caché del navegador y la caché del sitio web si no puede ver la reproducción automática.

Bono: agregue un cursor de mouse personalizado para reactivar el audio al hacer clic ️

Demostración en vivo: ¡Seamos creativos! El video comienza a reproducirse automáticamente y todos los botones de control de video están ocultos tanto en reposo como en el desplazamiento. Si el usuario coloca el cursor del ratón de imagen personalizado y el vídeo se desactivará si el usuario hace clic en cualquier parte del fotograma de vídeo.

1. Utilice exactamente el mismo código que en el método 4 anterior.
2. Cargue un icono de cursor de mouse personalizado en su biblioteca multimedia de WordPress. Lea nuestra publicación de blog Cómo usar imágenes como cursores del mouse para obtener especificaciones sobre formatos y más.
3. Vaya a Divi » Personalizador de temas » CSS adicional y agregue este fragmento:

   .dm-autoplay-click {
   cursor: url('/my-folder/my-cursor.png'), auto;
   }

4. Reemplace /my-folder/my-cursor.png por la URL del archivo de imagen del cursor del ratón.

Guarde sus cambios y obtenga una vista previa en el frontend. La reproducción automática solo funciona en frontend, no en Visual Builder. Borre la memoria caché del navegador y la caché del sitio web si no puede ver la reproducción automática.

¡Eso es todo por hoy!

Espero que hayas disfrutado de este post. Suscríbete a DiviMundo en YouTube y únete a nuestro grupo de Facebook para obtener contenido más nítido sobre WordPress y diseño web.

👉 Post relacionado: Cómo crear impresionantes menús móviles con Divi Toolbox

👉 Curso gratuito: Crear un sitio web desde cero con Divi