I have 2 videos as a background / z-index = 1. 2 columns divided the screen in 50/50 ratio z-index = 3. if mouse is hovering over first column, then first video is playing in background, when mouse is hovering in second column, first video is hidden and second video is playing in background.
It is working in CHROME browser, but it is not working in safari-doesnt play video nor sound. Can you show me how to fix it please?
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>It only works when including 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>
Second solution :
if the first solution doesn't work, you may need to set the controls="true" flag.
<video loop autoplay controls="true" src="video1.mp4" width="100%" data-id="1" class="video1" type="video/mp4" ></video>
FYI: if you run it on apple device e.g. Ipad/Iphone and then turn off the low power mode it may works.