Video is playing in chrome,but it is not playing in safari browser

Question

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')
                })
            }
        }
    })
})

user_17541709 · Answer

It only works when including playsinline.

Second solution :

if the first solution doesn't work, you may need to set the controls="true" flag.

FYI: if you run it on apple device e.g. Ipad/Iphone and then turn off the low power mode it may works.

Video is playing in chrome,but it is not playing in safari browser

1 Answers