Thema DAWN escuchar sonido en video pagina principal

[PaolaBuendia]

En la pagina central he añadido una seccion liquido personalizado para poner un video.... el codigo es el siguiente

<style>
video {
width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
</style>
<video muted autoplay playsinline loop>
<source src="https://cdn.shopify.com/videos/c/o/v/76a5d5c62f4548d6b9bcd8a27e2c22ae.mp4"
type="video/mp4">

</video>

Todo esta bien, salvo que no escucho el sonido.... Alguien me podria ayudar ? Gracias de antemano 

[Ann]

Hola @PaolaBuendia,

Gracias por acudir a los foros de la Comunidad con tus dudas. Entiendo que estás usando el tema Dawn y agregaste un video a la página de inicio a través de la sección de Liquid personalizado. Con todo, solo puedes ver el video, pero no puedes escuchar el sonido, ¿cierto? Será un placer ayudarte a revisar el problema que presentas.

Antes que nada quisiera preguntarte, ¿tienes conocimientos de HTML y CSS o alguien más creo el código por ti?

Estuve replicando la situación desde una tienda de prueba y pude encontrar el problema. Si te fijas, dentro del opening tag del video aparece la palabra "muted", la cual da la instrucción de que el video se muestre sin sonido. Dicho esto, para solucionar el problema solo debes eliminar la palabra muted y el sonido se escuchará correctamente. Si aún presentas problemas después de esto, por favor déjanos saber y lo revisamos nuevamente. 

Acá te dejo este documento con más información sobre cómo agregar Liquid personalizados a tu tema, para que lo tengas de referencia.

Por el momento, ¿qué tipo de tienda estás creando? ¿Ya terminaste de configurar todas las áreas de la cuenta? ¿Ya abriste la tienda al público?

[PaolaBuendia]

Hola Ann,

Muchas gracias por tu respuesta.

Sí tengo conocimientos en HTML y CSS.

Elimine el atributo "muted"  y el video no se reproducía automáticamente y se veía todo en negro.

Añadí el atributo "controls" para mostrar los controles de reproducción del video. 

Ya se escucha el sonido, pero no se reproduce automáticamente.

<style>
video {
width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
</style>
<video controls autoplay playsinline loop>
<source src="https://cdn.shopify.com/videos/c/o/v/76a5d5c62f4548d6b9bcd8a27e2c22ae.mp4"
type="video/mp4">
</video>

La tienda ya esta abierta al publico  https://personnalities.com/

[Ann]

Hola @PaolaBuendia,

Gracias por tu respuesta. Estuve revisando nuevamente el video en una tienda de prueba y al remover el atributo "muted", en un inicio se muestra el sonido correctamente; sin embargo, después se muestra negro, tal y como lo mencionas tú. 

Ensayé incluyendo el atributo "controls" y removiendo "autoplay" y el video y sonido se reproducen automáticamente. Es decir quedaría <video controls playsinline loop>. Te comparto como se ve el video desde una tienda de prueba: https://shopify.link/qaKQ.

Una vez lo repliques, déjanos saber si funciona bien en tu tienda. 

Por el momento, le estuve echando una mirada a tu tienda y pude notar que aún no has incluido las políticas, las cuales son importantes para dar a conocer a tus clientes información legal sobre tu negocio. Te comparto estos enlaces que pueden serte útiles para crearlas: 

• Términos y condiciones
• Política de reembolso
• Política de privacidad
• Política de envío

[PaolaBuendia]

Hola Ann,

Muchas gracias por tu respuesta y muchas gracias por tu consejo de incluir las politicas, voy a integrarlas.

He cambiado el codigo como me has dicho <video controls playsinline loop>, y sigo sin escuchar el sonido.

He probado el video desde una tienda de prueba: https://shopify.link/qaKQ. Y sigo sin escuchar el sonido.

He probado los 2 casos en el navegador Chrome y Edge, y no escucho el sonido en ninguno de los 2

[Ann]

Hola @PaolaBuendia,

Es un gusto saludarte nuevamente. Disculpa por los inconvenientes, pero estoy teniendo problemas para enviarte el video con sonido. Sin embargo, he vuelto a revisarlo en una tienda de prueba que usa el tema Dawn y puedo comprobar que se reproduce con sonido y automáticamente. Adicionalmente, repliqué la situación utilizando otro tema distinto (en este caso un tema de un desarrollador externo) y el video también se reproduce sin inconvenientes.

Dicho esto, te recomiendo realizar estos pasos que pueden ayudarte a solucionar el problema: 

• Borra el caché y cookies en tu navegador y reinicia completamente el navegador. 
• Prueba en otro navegador web o en una ventana incógnito.
• Asegúrate de que el navegador web esté actualizado en la última versión y que estés usando un navegador soportado por Shopify.
• Prueba con otro dispositivo o en la aplicación móvil Shopify.
• Prueba con otra conexión a Internet (por ejemplo, cambia a una red celular en un teléfono en lugar de wifi).

Si después de esto aún presentas problemas, necesitaremos ingresar a tu cuenta para revisar qué puede estar ocurriendo. Dado que desde acá no tenemos acceso a cuentas específicas, te recomendamos contactar a nuestro equipo de soporte por correo o chat a través del Centro de Ayuda. Sin embargo, ten en cuenta que en el equipo de soporte el conocimiento relacionado con código y lenguaje Liquid puede ser limitado. En caso de que no te puedan ayudar con esta personalización, te recomiendo contactar a uno de los partners de Shopify, los cuales son desarrolladores independientes que ayudan a nuestros comerciantes a adaptar distintas funcionalidades en sus tiendas.

Si hay algo más en lo que podamos ayudarte desde acá, por favor déjanos saber y con gusto lo revisamos. Saludos.

[PaolaBuendia]

Hola Ann,

Muchísimas gracias por tu respuesta.

He realizado los pasos que me has aconsejado.

He probado en una copia, el problema es que la primera vez hay que darle play para poner en marcha el video, después ya se escucha en bucle.

Te transmito una captura de pantalla 

Muchas gracias por tu ayuda

[Ann]

Hola @PaolaBuendia,

Estuve revisando nuevamente y en mi tienda de prueba sucede lo mismo. Aunque el video se reproduce automáticamente, la primera vez es necesario poner "play" para que se reproduzca. 

Estuve investigando más a fondo el asunto y encontré que los vídeos de reproducción automática pueden tener un impacto negativo en la accesibilidad, ya que pueden causar molestias, o incluso dolor, a algunos usuarios sensibles al movimiento o al sonido. Si el cliente controla la reproducción del vídeo, el sitio será más accesible para un público más amplio.

Adicionalmente, pude encontrar que a partir de abril de 2018, Google Chrome, que es uno de los navegadores más populares, desactivó por defecto la reproducción automática en los vídeos que tienen sonido. Puedes consultar este artículo donde se explica más sobre este cambio. Así mismo, no es de esperar que la reproducción automática funcione en todos los dispositivos y navegadores, ya que hay muchas formas de desactivar la reproducción automática en los dispositivos/navegadores, como explica uno de nuestros partners en este artículo.

Dicho esto, esta es una personalización que no recomendamos ni es soportada por nuestro equipo especializado. Si aún deseas que el video se reproduzca automáticamente, te recomendaría contactar a uno de los partners de Shopify para que te preste soporte adicional. Saludos.