Я пытаюсь имитировать эту страницу. но у меня отображается черный экран с надписью "Нажмите или коснитесь, чтобы начать видео"

#html #aframe #virtual-reality

Вопрос:

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

Я новичок в Aframe js. Итак, я пытаюсь имитировать эту страницу. Я скопировал весь код, но он все еще не работает.

 <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>

Редактировать:

Я получаю сообщение об ошибке в журнале моей консоли

1. Я запустил ваш код, и все работает нормально. проверьте консоль вашего браузера на наличие ошибок, таких как CROS

2. Спасибо за упоминание. Я действительно проверил показанное там предупреждение. Я добавил скриншот предупреждений здесь

3. похоже, вам нужно открыть свой HTML-файл в среде локального хостинга, такой как serve , nodejs, xampp или etc, потому что, когда вы перетаскиваете или открываете этот HTML-файл в браузере, он загружается с помощью file: // protocol, и aframe не может загружать ресурсы и т. Д. С помощью этого протокола

Ответ №1:

Вы бы хотели прочитать документацию Aframe, прежде чем начинать с ней работать:

 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 amp;amp; 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.

Ответ №2:

похоже, вам нужно открыть свой HTML-файл в среде локального хостинга, такой как serve , nodejs, xampp или etc, потому что, когда вы перетаскиваете или открываете этот HTML-файл в браузере, он загружается с помощью file: // protocol, и aframe не может загружать ресурсы и т. Д. С помощью этого протокола