視頻在 chrome 中播放，但在 safari 瀏覽器中不播放

Question

我有 2 個視頻作為背景/z-index = 1。2 列以 50/50 的比例划分屏幕 z-index = 3。如果鼠標懸停在第一列上，則第一個視頻在后台播放，當鼠標懸停時在第二列中，第一個視頻被隱藏，第二個視頻在后台播放。

它在 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>

Answer 1

它僅在包含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>

第二種解決方案：

如果第一個解決方案不起作用，您可能需要設置controls="true"標志。

<video loop autoplay controls="true"  src="video1.mp4" width="100%" data-id="1" class="video1" type="video/mp4" ></video>

僅供參考：如果您在蘋果設備（例如 Ipad/Iphone）上運行它，然后關閉低功耗模式，它可能會工作。