我试图模仿这个页面。但是我的显示黑屏 "Click or tap to start video"

Question

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>

编辑：

我在控制台日志中收到一条错误消息

Answer 1

您似乎需要在 serve 、 nodejs 、 xampp 等本地主机环境中打开 HTML 文件，因为当您将此 HTML 文件拖动或打开到加载了 file:// 协议的浏览器和 aframe 无法使用此协议加载资产等

Answer 2

在开始使用 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 && 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.

我试图模仿这个页面。但是我的显示黑屏 "Click or tap to start video"

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

html

virtual-reality

aframe