Can't play video texture under a-frame framework on iPhone

Question

We use this framework https://aframe.io/ to develop virual reality site. Our scene contains the sphere with video texture on it. It works well on desktops and some android devices, but we can't start videoplayback on iPhone 6. Mobile Safari shows only first frame of video. Does anybody has any ideas how to solve this problem?

here is the code:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Player</title>
    <meta name="description" content="Player">
    <script src="https://aframe.io/releases/latest/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
         <a-camera position="0 0 0" cursor="fuse: true; maxDistance: 30; timeout: 3000" wasd-controls-enabled="true"></a-camera>
         <!-- Creating 360 deg screen --> 
       <a-videosphere src="/images/super_cute_cat.mp4" autoplay="true" loop="true" rotation="0 0 0"></a-videosphere>
       </a-scene>
    </body>
</html>

ngokevin · Accepted Answer · 2016-02-24T22:33:09.303

1

This issue is detailed at https://github.com/aframevr/aframe/issues/316#issuecomment-183006679

iOS has restrictions on playing inline video. We need to define webkit-playsinline on the video element. And we need to pin the app to homescreen for that to work.

We are currently working on modals for iOS to help with this experience if and until iOS revisits this restriction.

EDIT: Alternatively, you don't have to pin the app to the homescreen. But the video texture will launch in the iOS video player. The user can close this video, and then scroll up to hide the browser chrome. But this experience is arguably worse than pinning the app to the homescreen, especially if you have more than one video texture.

edited Feb 24 '16 at 22:33

answered Feb 23 '16 at 01:16

ngokevin

12,980
2
38
84

Thanks! So we are focusing on Android devices – Justvova Feb 23 '16 at 09:15
Seems like some Android devices or browsers require user interaction to play. Some just work. As an update, we are trying to remove the pin-to-homescreen restriction via Firefox for iOS. – ngokevin Mar 29 '16 at 06:27

score 0 · Answer 2 · answered May 10 '16 at 03:37

Currently I have it working on Android with Firefox, make sure settings->Advanced->Autoplay is checked.

Otherwise with iOS it works for me if it is pinned to the home screen.

A lot of web vendors will I am sure work on this to get VR working with videos.

score 0 · Answer 3 · edited May 23 '17 at 11:53

Update: (Old Answer No Longer Applicable)

Use the iphone-inline-video JS module. You can get your 360 videos to play inline (without having to pin to home screen).

I have attempted to update the docs for that module so that it demonstrates how to use Aframe with iOS here.

Here's the source for completeness (your video MUST be local, see below):

<!DOCTYPE html>
<!-- Source: https://github.com/aframevr/aframe/blob/v0.3.2/examples/boilerplate/360-video/index.html -->
<html>
  <head>
    <meta charset="utf-8">
    <title>Aframe 360 Video with iOS Support</title>
    <meta name="description" content="360 Video — A-Frame">
    <style>
      #playoverlay { position: relative; }

      #play-button {
        position: absolute;
        bottom: 30px;
        left: 30px;
      }

      /* Hide native iOS controls */
      .IIV::-webkit-media-controls-play-button,
      .IIV::-webkit-media-controls-start-playback-button {
        opacity: 0;
        pointer-events: none;
        width: 5px;
      }
    </style>
  </head>
  <body>
    <a-scene>
      <a-assets>
        <video id="video" src="sample.mp4" autoplay loop crossorigin playsinline></video>
      </a-assets>
      <a-videosphere src="#video" rotation="0 180 0"></a-videosphere>
    </a-scene>

    <div id="playoverlay">
      <button id="play-button">Play / Pause</button>
    </div>

    <script src="https://aframe.io/aframe/dist/aframe.js"></script>
    <script src="../dist/iphone-inline-video.browser.js"></script>
    <script>
      (function() {
        var video = document.querySelector('#video');
        window.makeVideoPlayableInline(video, /* mute necessary for autoplay*/ false);

        var playButton = document.querySelector('#play-button');
        playButton.addEventListener('click', function(e) {
          if (video.paused) {
            video.play();
          } else {
            video.pause();
          }
        });
      })();
    </script>
  </body>
</html>

iOS/Mobile Safari Caveats:

On iOS the video source MUST be local (iOS/Safari seems to be the ONLY major browser that has CORS issues with video src, AND (depending on software/hardware), the video might need to be under a certain resolution. For example, to support iPhone 5, I found I couldn't play any videos larger than 1920x1080, YMMV...

Other considerations:

Controlling audio via controls for your 360 video is a no-go. The volume on iOS Safari is read-only (see here).
Safari on iOS does NOT allow for gyroscopic/sensor detection in iFrames - so make sure your video is not embedded anywhere else if you want the gyroscope/accelerometor to work (see here), so your iOS users won't get any of the nice movement control that A-Frame provides for free.
iOS/Safari does NOT support full-screen (iOS Safari doesn't have a fullscreen API, but we do on Chrome on Android, Firefox, and IE 11+), ref here. The argument that "Safari supports full screen in videos" ONLY works when it falls back to its native player (in which case the 360 video texture that A-Frame/Three.js wrap around a canvas sphere does not work because you have a flat 360 video that looks awful).

Getting videos (in my case 360 degree videos) to play on iOS has been quite a challenge, but is possible with a TON of concessions.

Can't play video texture under a-frame framework on iPhone

3 Answers3

Update: (Old Answer No Longer Applicable)

iOS/Mobile Safari Caveats:

Linked