1

我尝试使用 a-frame 框架在 a-sphere 中显示 360 度视频。

我的代码如下：

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

视频未显示在 iphone 浏览器中，如您所见，我尝试使用 playinline 属性。有人能指出我正确的方向吗？（它在安卓桌面上工作）

编辑：我将页面添加到我的主屏幕

4

1 回答 1

1

不幸的是，视频还不能在移动浏览器上自动播放。

对于某些项目，我通过隐藏 a 场景并在页面上显示用户必须按下才能启动场景的视频元素来解决此问题。用户按下播放按钮后，视频元素被移动到 a-assets 元素中，a-scene 可见，并使用 javascript 启动视频。此时，视频将显示在 videosphere 上。

这是一个例子......

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

编辑：刚刚注意到您对 iPhone 的评论。您是否还在主屏幕上添加了书签？

于 2016-10-06T17:29:55.287 回答