Tengo 2 videos como fondo / índice z = 1. 2 columnas dividieron la pantalla en una proporción de 50/50 índice z = 3. Si el mouse se desplaza sobre la primera columna, entonces el primer video se reproduce en segundo plano, cuando el mouse se desplaza en la segunda columna, el primer video está oculto y el segundo video se reproduce en segundo plano.
Funciona en el navegador CHROME, pero no funciona en safari, no reproduce video ni sonido. ¿Puedes mostrarme cómo solucionarlo, por favor?
const boxes = document.querySelectorAll('.boxes') const video1 = document.querySelector('.video1') const video2 = document.querySelector('.video2') boxes.forEach(box => { box.addEventListener('mouseover', (e) => { e.preventDefault() const a = e.currentTarget.dataset.set console.log(a) if (a === '1') { var promise1 = video1.play(); if (promise1 !== undefined) { promise1.catch(error => { console.log(error); }).then(() => { video1.classList.remove('hiddn') video2.classList.add('hiddn') video2.pause() }) } } else if (a === '2') { var promise2 = video2.play(); if (promise2 !== undefined) { promise2.catch(error => { console.log(error); }).then(() => { video1.classList.add('hiddn') video1.pause() video2.classList.remove('hiddn') }) } } }) }) <video src="video1.mp4" width="100%" data-id="1" class="video1" type="video/mp4" autoplay="true"></video> <video src="video2.mp4" data-id="2" width="100%" class="hiddn video2" type="video/mp4" autoplay="true"></video>Solo funciona cuando incluye playsinline .
<video src="video1.mp4" width="100%" data-id="1" class="video1" type="video/mp4" autoplay="true" loop muted playsinline ></video> <video src="video2.mp4" data-id="2" width="100%" class="hiddn video2" type="video/mp4" autoplay="true" loop muted playsinline></video>Segunda solución:
si la primera solución no funciona, es posible que deba configurar el indicador de controles = "verdadero" .
<video loop autoplay controls="true" src="video1.mp4" width="100%" data-id="1" class="video1" type="video/mp4" ></video>FYI : si lo ejecuta en un dispositivo Apple, por ejemplo, Ipad/Iphone, y luego apaga el modo de bajo consumo, es posible que funcione.