CODEWITHSUNDEEP
aframe
Neeti Kumar
Neeti Kumar

Reputation: 27

How do I get video to auto-play in A-frame new window?

I'm trying to get a video to play automatically, but it's not working and I'm not sure why. I followed the guidelines and have set the video to auto-play. The video works when seeing the live site in split-screen, but it doesn't work when opening the site in a new window or accessing it through the link.

This is the code: https://glitch.com/edit/#!/vr-climate-change-memorial if anyone knows what's wrong, please let me know.

Upvotes: 0

Views: 1066

Answers (1)

Piotr Kolecki
Piotr Kolecki

Reputation: 380

You should not have whitespaces in your id nor should there be brackets ( ). It is not invalid but may cause issues, as I believe, happens in your example.

I canged this:

<video id="debbiesymons (small).mp4" autoplay loop playsinline webkit-playsinline src="..."></video>

to:

<video id="debbiesymons_small.mp4" autoplay loop playsinline webkit-playsinline src="..."></video>

And also this:

<a-video src="#debbiesymons (small).mp4" position="0 6 -200" scale="12.8 7.2 0"></a-video>

To:

<a-video src="#debbiesymons_small.mp4" position="0 6 -200" scale="12.8 7.2 0"></a-video>

And now the video is playing when the page loads.

AudioContext was not allowed to start

NOTE: Playing sound on iOS — in any browser — requires a physical user interaction. This is a browser limitation, and internal A-Frame events (like fusing cursors) do not count as interaction. Ways to deal with this include using a Begin Experience button to start ambient music, or creating audio sprites with libraries like Howler.js.

source

You need any kind of interaction with the page before playing the sound/ video.

A simple button to play the elements would do the trick, you can also make it your starting page. This is not elegant solution but will work for your case:

<a-scene background="color: #60860A" foo id="scene" style="display: none">
    //...
</a-scene>
<script>
  function startPlaying(event) {
    document.getElementById("scene").style.display = "block";
    document.getElementById("debbiesymons_small.mp4").play();
    document.getElementById("sound").components.sound.stopSound();
    document.getElementById("sound").components.sound.playSound();
    event.target.style.display="none";
  }
</script>
<input type="button" onclick="startPlaying(event)" style="width: 100px; height: 100px; position: fixed; top: 100px; left: 100px;">

Upvotes: 1

Related Questions