Why is my video or videosphere not playing on mobile in A-Frame VR?

Question

I have an A-Frame scene with a video or videosphere:

Answer 1

Check https://aframe.io/faq/#why-does-my-video-not-play-on-mobile

iOS Safari documentation on video limitations: https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html#//apple_ref/doc/uid/TP40009523-CH5-SW1

Mobile browsers have limitations with displaying inline video. The 2D mobile web is not very suited for playing inline videos. Because of an iOS platform restriction in order to get inline video (with or without autoplay), we must:

• Set the metatag (done by A-Frame).
• Set the webkit-playsinline attribute to the video element. (On iOS 10, renamed to just playsinline)
• Pin the webpage to the iOS homescreen.

And on certain Android devices or browsers:

• User interaction to trigger the video (e.g., listen tap/click). You could leverage the click on the Enter VR button.

With all of these steps, you should provide instructions and UI to the user for the necessary steps to get mobile video playing (pin-to-homescreen, tap).

We will try to have a complete example out that addresses these cases.

They also document that only one video can play at a time, and there are restrictions on the format/codecs:

Safari on iOS supports low-complexity AAC audio, MP3 audio, AIF audio, WAVE audio, and baseline profile MPEG-4 video. Safari on the desktop (Mac OS X and Windows) supports all media supported by the installed version of QuickTime, including any installed third-party codecs.

iOS Safari has recently announced support for inline videos in the next version, but we'll have to wait to see how that plays out.

Answer 2

Speaking of leveraging Enter VR button, try:

<a-scene>
<a-assets>
  <video id="video" src="anothervideo.mp4"></video>
</a-assets>
<a-video class="video" src="myvideo.mp4"></a-video>
<a-videosphere class="video" src="#video></a-videosphere>
</a-scene>

<script>
  function playVideo () {
    var els = document.querySelectorAll('.video')
    Array.prototype.slice.call(els).forEach(function(el) {
      el.components.material.material.map.image.play()
    })
  }

  document.querySelector('.a-enter-vr-button').addEventListener('click', playVideo)
</script>

Answer 3

I struggled a bit with getting the Enter VR button to trigger the video (mayognaise's solution unfortunately didn't get me there), but eventually cobbled together this script that did the trick:

<a-scene>
<a-assets>
  <video id="video" src="anothervideo.mp4"></video>
</a-assets>
<a-videosphere src="#video"></a-videosphere>
</a-scene>

<script type="text/javascript">
    var scene = document.querySelector("a-scene");
    var vid = document.getElementById("video");

    if (scene.hasLoaded) {
      run();
    } else {
      scene.addEventListener("loaded", run);
    }

    function run () {
        scene.querySelector(".a-enter-vr-button").addEventListener("click", function(e){
            console.log("VR Mode entered");
            this.style.display = "none";
            vid.play();
        }, false);
    }
</script>