Me encontré con un problema, tal vez alguien me pueda ayudar con eso.
Hay un script que debe reiniciarse y reproducir un video en un evento ( play video.play(); ). En otros navegadores como Chrome, etc. funciona, excepto Safari.
En Safari, simplemente restablece el video a 0, pero no lo reproduce.
Parece que video.play() no funciona en ese navegador.
La reproducción automática y Mured están activados.
¿Alguien ha tenido este problema?
Aquí está el sitio web https://luna-wealth-3b31bac5f1f8e980696881bf9d5.webflow.io/client-online-access
<script>
window.addEventListener('DOMContentLoaded', function () {
const video = document.getElementById("573dfe8f-6592-57e6-c48c-8e93fbdae2e3-video");
const trigger = document.getElementById("trigger");
const observerVideo = new IntersectionObserver((entries) => {
if (entries[0].isIntersecting) {
if (video.currentTime === 0) {
video.muted = true;
video.play();
}
}
}, { threshold: 1 });
const observerTrigger = new IntersectionObserver((entries) => {
if (entries[0].isIntersecting) {
if (video.currentTime !== 0) {
video.currentTime = 0
}
}
}, { threshold: 0 });
observerTrigger.observe(trigger);
observerVideo.observe(video);
})
</script>
El problema se resolvió de esta manera. Eliminamos el parámetro de ancho del 100 % del video y configuramos el contenedor que contiene el video para que se flexione el centro de justificación. Y el script comenzó a reproducir el video en Safari correctamente.
En algunas resoluciones, el video se extendía más allá de su resolución real y Safari no quería reproducirlo en el evento...
Por supuesto que era extraño, pero funcionó =)