来自视频和音频元素的声音无法在 iOS 上播放(不是自动播放问题)

Question

我制作了这个小"应用程序"，它基本上是壁炉的视频和圣诞歌曲，两者都会循环播放。

我把它发给一个有苹果手机的朋友，说视频中的音频和歌曲中的音频都没有播放。

我已经阅读了许多关于这个问题的问题和文档，但它们几乎都在谈论Apple如何不允许您在加载时使用自动播放。Android也使用的功能(如果我没记错的话)，因此音频需要由用户触发。但这没关系，因为这是我所做的。

如何在我的应用上触发音频

由于我的应用程序具有orientationchange触发器，我将向无法访问手机或平板电脑的人解释它(我显然会发布代码)。

访问网站后，它会告诉您水平转动手机。完成后，将出现一个按钮，通过单击(点击)它，视频和音频都会启动(至少在 Adroid 上)。因此，有一个事件由用户触发。在该按钮下"坐下"音频和视频元素的play()。这就是为什么，我不明白我应该做些什么才能让它在iOS上运行。

如果你想看看这里的网站

网站

编辑：我尝试制作片段，但不知何故它似乎坏了，JS代码出现在主页上。不知道为什么，所以我只会复制代码。

.HTML

<div class="container">
<img src="balls.png" width="180px" class="balls" alt="xmas-balls">
<div class="turncont">
<h3 class="turn">Turn your phone</h3>
<img src="turn.svg" class="turnicon" width="50px" alt="turn-smartphone-horizontally">
</div>
<h3 class="start">Start Magic</h3>

</div>
<video class="video" src="Fireplace.mp4" loop></video>
<p class="home">Home</p>
<img src="mobileup.svg" class="mobileup" width="30px" alt="">
<audio src="ThereIsNoPlace.mp3" class="audio" loop></audio>
<img src="frozen1.png" class="frozen1" alt="">
<img src="frozen2.png" class="frozen2" alt="">

.CSS

* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Mountains of Christmas', cursive;
}
body {
background: rgba(245,245,255);
}
.balls {
position: absolute;
left: 50vw;
transform: translateX(-50%);
}
.turncont {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: absolute;
top: 40vh;
left: 50vw;
transform: translateX(-50%);
width: 100vw;
margin: auto;
}
.turn {
font-size: 2em;
margin-bottom: 20px;
}
.start {
margin: auto;
font-size: 1.5em;
border: 1px solid black;
border-radius: .5em;
padding: .2em .9em;
margin-top: 2em;
letter-spacing: 1px;
box-shadow: 0 0 20px limegreen;
position: absolute;
bottom: 1em;
left: 50vw;
transform: translateX(-50%);
display: none;
}
.displaynone {
display: none;
}
.displayyes {
display: block;
}
.video {
display: none;
width: 100vw;
min-height: 100vh;
font-size: 0;
line-height: 0;
margin: 0;
padding: -5px;
}
.home {
position: absolute;
top: 45px;
left: 10px;
color: white;
text-shadow: 0 0 3px black, 0 0 3px black, 0 0 3px black;
letter-spacing: 1px;
display: none;
}
.mobileup {
position: absolute;
top: 10px;
left: 12px;
display: none;
}
.frozen1 {
width: 100vw;
position: absolute;
bottom: 0px;
z-index: -1;
}
.frozen2 {
width: 100vw;
position: absolute;
top: 0;
z-index: -1;
}

JAVASCRIPT

let start = document.querySelector('.start')
let turnStuff = document.querySelector('.turncont')
let balls = document.querySelector('.balls')
let mainCont = document.querySelector('.container')
let video = document.querySelector('.video')
let homeBtn = document.querySelector('.home')
let mobileUp = document.querySelector('.mobileup')
let audio = document.querySelector('.audio')
let frozen1 = document.querySelector('.frozen1')
let frozen2 = document.querySelector('.frozen2')
window.addEventListener('orientationchange', ()=> {
if(screen.orientation.angle == 90 || screen.orientation.angle == 270 ) {
start.addEventListener('click', ()=> {
mainCont.style.display = 'none'
video.style.display = 'flex'
video.play()
homeBtn.style.display = 'block'
mobileUp.style.display = 'block'
audio.play()
})
turnStuff.classList.add('displaynone')
start.classList.add('displayyes')
balls.style.top = '-10px'
balls.style.width = '150px'
frozen1.style.display = 'none'
frozen2.style.display = 'none'
}

if(screen.orientation.angle == 0) {
turnStuff.classList.remove('displaynone')
start.classList.remove('displayyes')
balls.style.top = '0px'
balls.style.width = '180px'
homeBtn.style.display = 'none'
video.style.display = 'none'
video.pause()
video.currentTime = 0
audio.pause()
audio.currentTime = 0
mainCont.style.display = 'block'
mobileUp.style.display = 'none'
frozen2.style.display = 'block'
frozen1.style.display = 'block'
}

})

Answer 1

我将自己回答它，因为我设法让它工作。

我希望这对那些遇到同样问题的人有所帮助。

我不是 100% 确定我会说的是真的，但是通过阅读一些文档，显然 iOS 或某些版本的 iOS 不支持orientationchange，所以我设法让它与resize一起使用，并且还通过更改条件语句的参数。

我更改了事件触发器

window.addEventListener('resize', functionName)
function functionName() {
if(window.innerWidth > window.innerHeight) {

//then do stuff
}

if(window.innerWidth < window.innerHeight) {
//then do other stuff
}
}

所以新的JS是：

let start = document.querySelector('.start')
let turnStuff = document.querySelector('.turncont')
let balls = document.querySelector('.balls')
let mainCont = document.querySelector('.container')
let video = document.querySelector('.video')
let homeBtn = document.querySelector('.home')
let mobileUp = document.querySelector('.mobileup')
let audio = document.querySelector('.audio')
let snowCont = document.querySelector('.snowflakes')
let frozen1 = document.querySelector('.frozen1')
let frozen2 = document.querySelector('.frozen2')
window.addEventListener('resize', whenTurn)
function whenTurn() {
if(window.innerWidth > window.innerHeight) {
turnStuff.classList.add('displaynone')
start.classList.add('displayyes')
balls.style.top = '-10px'
balls.style.width = '150px'
frozen1.style.display = 'none'
frozen2.style.display = 'none'
}

if(window.innerWidth < window.innerHeight) {
turnStuff.classList.remove('displaynone')
start.classList.remove('displayyes')
snowCont.style.display = 'block'
balls.style.top = '0px'
balls.style.width = '180px'
homeBtn.style.display = 'none'
video.style.display = 'none'
video.pause()
video.currentTime = 0
audio.pause()
audio.currentTime = 0
mainCont.style.display = 'block'
mobileUp.style.display = 'none'
frozen2.style.display = 'block'
frozen1.style.display = 'block'
}

}
start.addEventListener('touchend', ()=> {
mainCont.style.display = 'none'
snowCont.style.display = 'none'
video.style.display = 'flex'
video.play()
homeBtn.style.display = 'block'
mobileUp.style.display = 'block'
audio.play()
})