0 Replies - 487 Views - Last Post: 29 October 2020 - 05:21 AM

#1 Matthew200   User is offline

  • New D.I.C Head

Reputation: 2
  • View blog
  • Posts: 49
  • Joined: 20-August 20

Sound of video and audio elements not playing on iOS (no autoplay)

Posted 29 October 2020 - 05:21 AM

I have made this little "app", which is basically a video of a fireplace and a Christmas song which will both play on a loop.

I sent it to a friend who has an Iphone and said that neither the audio from the video or the audio from the song is playing.

I have read many questions and documentations about this issue, but they all pretty much talk about how Apple don't let you use autoplay on load. Feature that (if I'm not wrong) Android uses too so that the audios need to be triggered by the user. But that's ok, 'cause it's what I have done.

How the audio is triggered on my app

Since my app has orientationchange trigger I'll explain it to those who has not access to a phone or tablet (and I'll post the code obviously).

Once you access the website it tells you to turn your phone horizontally. After you've done it, a button will appear and by clicking (tapping) on it, both the video and audios start (at least on Adroid). So there IS an event triggered by the user. Under that button "sits" the play() for both audio and video elements. That's why, I can't understand what else should I do to make it work on iOS.

The App

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


Is This A Good Question/Topic? 0
  • +

Page 1 of 1