Question

我制作了这个小“应用程序”，基本上是一个壁炉和圣诞节歌曲的视频，都将循环播放。

我将其发送给拥有Iphone的朋友，并说视频中的音频或歌曲中的音频都没有播放。

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

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

由于我的应用触发了orientationchange，因此我将向无法使用手机或平板电脑的用户进行解释（很明显，我将发布代码）。

一旦您访问该网站，它就会告诉您将手机水平转动。完成后，将出现一个按钮，然后单击（轻击）按钮，视频和音频都将启动（至少在Adroid上）。因此，用户触发了 IS 事件。在该按钮下，“ {s}” play()用于音频和视频元素。这就是为什么，我不知道该怎么做才能使其在iOS上正常工作。

如果您想看看这里的网站

The Website

编辑：我尝试制作该片段，但由于某种原因它似乎已损坏，该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，因此我设法使其与{ {1}}，也可以通过更改条件语句的参数来实现。

我更改了事件触发器

resize

因此，新的JS是：

window.addEventListener('resize', functionName)

  function functionName() {

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

    //then do other stuff
    }
}

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

1 个答案: