CODEWITHSUNDEEP
iphoneios10aframewebvr
user3464409
user3464409

Reputation: 69

Aframe ios 10 displaying video sphere

I try to display a 360-video in a a-sphere using the a-frame framework.

My code is as follows:

<html>
<head>      
    <script src="https://aframe.io/releases/0.3.0/aframe.min.js"></script>
    <script src="https://rawgit.com/donmccurdy/aframe-extras/v2.1.1/dist/aframe-extras.loaders.min.js"></script>
    <title></title>
</head>
<body>
<a-scene>
     <a-assets
        <video id="antarctica" playsinline autoplay loop="true"  src="130.mp4">
     </a-assets>

          <a-videosphere src="#antarctica"></a-videosphere>


    <!-- Using the asset management system. -->


<a-camera position = "0 0 0">
    <a-cursor color=#FFFFFF></a-cursor>
</a-camera>

</a-scene>


<script>

</script>
</body>
</html>

The video is not displaying in the iphone browser, and as you can see i tried using the playsinline attribute. Can someone point me to the right direction?(It is working on desktop on android)

EDIT: I bookmarked the page to my home screen

Upvotes: 1

Views: 682

Answers (1)

rvdleun
rvdleun

Reputation: 11

Unfortunately, video does not autoplay on mobile browsers yet.

For some projects, I've solved this by hiding the a-scene and displaying a video element on the page that the user has to press to start the scene. After the user has pressed the play button, the video element is moved into a-assets element, the a-scene is made visible, and start the video with javascript. At this point, the video will be displayed on the videosphere.

Here's an example...

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Video example</title>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <script src="./bower_components/aframe/dist/aframe.js"></script>
    <script>
        window.addEventListener("load", function() {
            document.querySelector("#video").addEventListener("play", function() {
                var video = document.querySelector("video");
                var assets = document.querySelector("a-assets");
                var videosphere = document.querySelector("a-videosphere");
                var scene = document.querySelector("a-scene");

                assets.appendChild(video);
                videosphere.setAttribute("src", "#video");
                scene.removeAttribute("style");
                video.play();
            })
        });
    </script>
  </head>
  <body>
    <video id="video" controls="true" autobuffer height="100%" width="100%" webkit-playsinline src="./media/video.mp4" type="video/mp4"></video>
    <a-scene>
        <a-assets></a-assets>
        <a-videosphere></a-videosphere>
    </a-scene>  
  </body>
</html>

Edit: Just noticed your comment about iPhone. Have you also added a bookmark to your home screen?

Upvotes: 1

Related Questions