我正在使用 Ionic2 和 Aframe 制作 VR 360 应用程序。这应该很容易,因为您只需要 Aframe 即可(您设置视频资产并从 videosphere 原语加载它)但我没有得到想要的结果。我有 Ios 的问题(在 Android 和浏览器中运行良好),当我在我的 iphone 中运行应用程序时,视频在 Iphone 播放器而不是在我的应用程序中播放,因此我没有 360 效果。我添加playinline就像文档说的那样,我添加
<meta name="apple-mobile-web-app-capable" content="yes"/>
也是,但不起作用。我使用下一个代码:
<a-scene>
<a-assets>
<video id="video" src="assets/img/video1.mp4" loop crossorigin playsinline></video>
<img id="cubes-thumb" crossorigin="anonymous" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/thumb-cubes.jpg">
<img id="cubes" crossorigin="anonymous" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/cubes.jpg">
</a-assets>
<a-videosphere src="#video" rotation="0 180 0"></a-videosphere>
<a-image class="link" src="#cubes" position="0 0 -1"></a-image>
<!--<a-entity id="links" layout="type: line; margin: 1.5" position="0 -1 -4">
<a-entity template="src: #cubes" data-src="#cubes" data-thumb="#cubes-thumb"></a-entity>
</a-entity>-->
<a-entity camera look-controls>
<a-cursor id="cursor"
animation__click="property: scale; startEvents: click; from: 0.1 0.1 0.1; to: 1 1 1; dur: 150"
animation__fusing="property: fusing; startEvents: fusing; from: 1 1 1; to: 0.1 0.1 0.1; dur: 1500"
event-set__1="_event: mouseenter; color: green"
event-set__2="_event: mouseleave; color: black"
raycaster="objects: .link"
material="color:black">
</a-cursor>
</a-entity>
</a-scene>
我认为问题可能是自动播放,我已禁用它并使用按钮触发播放,但结果相同。
知道我还能尝试什么吗?
谢谢。