Javascript 视频在 chrome 中播放，但没有在 safari 浏览器中播放

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>