Question

我尝试使用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浏览器中显示，正如您所见，我尝试使用了playsinline属性。有人能指出我正确的方向吗？（它在android上的桌面上工作）

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

Answer 1

Unfortunately, video does not autoplay on mobile browsers yet

对于某些项目，我通过隐藏a场景并在用户必须按下以启动场景的页面上显示视频元素来解决这个问题。在用户按下播放按钮之后，视频元素被移动到资源元素中，使得场景可见，并且使用javascript启动视频。此时，视频将显示在视频圈上。

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

<!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的评论。您是否还在主屏幕上添加了书签？

Aframe ios 10显示视频领域

1 个答案: