Search code examples
htmlaframevirtual-reality

I am trying to mimic this page. but mine is showing black screen with "Click or tap to start video"

https://aframe.io/aframe/examples/boilerplate/360-video/

I am new to Aframe js. So, I'm trying to mimic this page. I have copied whole code but still its is not working.

<html>
  <head>
      <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
    </head>
    <body>
        <a-scene inspector="" keyboard-shortcuts="" screenshot="" vr-mode-ui="" device-orientation-permission-ui="">
            <a-assets>
                
                <video id="video" autoplay="" loop="" crossorigin="anonymous" playsinline="" webkit-playsinline="" src="https://bitmovin.com/player-content/playhouse-vr/progressive.mp4">
                </video>
            </a-assets>
            <a-videosphere rotation="0 -90 0" src="#video" play-on-click="" material="" geometry="" scale="">
            </a-videosphere>
            <a-camera camera="" position="" rotation="" look-controls="" wasd-controls="">
                <a-entity position="0 0 -1.5" text="align:center;
                                                    width:6;
                                                    wrapCount:100;
                                                    color: white;
                                                    value: Click or tap to start video" hide-on-play="#video">
                </a-entity>
            </a-camera>
            </a-scene>
        
        
        <div id="highlighter--hover-tools" style="display: none;">
            <div id="highlighter--hover-tools--container">
                <div class="highlighter--icon highlighter--icon-copy" title="Copy"></div>
                <div class="highlighter--separator"></div>
                <div class="highlighter--icon highlighter--icon-change-color" title="Change Color"></div>
                <div class="highlighter--separator"></div>
                <div class="highlighter--icon highlighter--icon-delete" title="Delete"></div>
            </div>
        </div></body>
</html>

Edit: enter image description here

I am receiving an error in my console log

Solution

  • You would want to read the Aframe documentation before starting to work with it:

    Use a Local Server
For the options below, we should develop projects using a local server so that files are properly served. Options of local servers include:

Downloading the Mongoose application and opening it from the same directory as your HTML file.
Running python -m SimpleHTTPServer (or python -m http.server for Python 3) in a terminal in the same directory as your HTML file.
Running npm install -g live-server && live-server in a terminal in the same directory as your HTML file.
Once we are running our server, we can open our project in the browser using the local URL and port which the server is running on (e.g., http://localhost:8000). Try not to open the project using the file:// protocol which does not provide a domain; absolute and relative URLs may not work.