在iPhone的A帧框架下无法播放视频纹理

Question

我们使用此框架https://aframe.io/来开发虚拟现实网站。 我们的场景包含带有视频纹理的球体。 它在台式机和某些android设备上运行良好，但我们无法在iPhone 6上启动视频播放。MobileSafari仅显示视频的第一帧。 是否有人有解决此问题的想法？

这是代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Player</title>
    <meta name="description" content="Player">
    <script src="https://aframe.io/releases/latest/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
         <a-camera position="0 0 0" cursor="fuse: true; maxDistance: 30; timeout: 3000" wasd-controls-enabled="true"></a-camera>
         <!-- Creating 360 deg screen --> 
       <a-videosphere src="/images/super_cute_cat.mp4" autoplay="true" loop="true" rotation="0 0 0"></a-videosphere>
       </a-scene>
    </body>
</html>

Answer 1

有关此问题的详细信息，请参见https://github.com/aframevr/aframe/issues/316#issuecomment-183006679

iOS在播放嵌入式视频方面有限制。 我们需要在video元素上定义webkit-playsinline 。 并且我们需要将应用程序固定到主屏幕才能正常工作。

如果直到iOS重新审查此限制，我们目前正在为iOS使用模态，以帮助获得这种体验。

编辑：或者，您不必将应用程序固定到主屏幕。 但是视频纹理将在iOS视频播放器中启动。 用户可以关闭此视频，然后向上滚动以隐藏浏览器镶边。 但是，可以说，这种体验比将应用程序固定到主屏幕更糟，尤其是当您拥有多个视频纹理时。

Answer 2

目前，我已经在装有Firefox的Android上使用它，请确保已选中设置->高级->自动播放。

否则，如果将它固定在主屏幕上，则可以在iOS上使用。

我相信很多网络供应商都将致力于使VR与视频一起工作。

Answer 3

更新：（旧答案不再适用）

使用iphone-inline-video JS模块。 您可以让360视频在线播放（无需固定到主屏幕）。

我试图更新该模块的文档，以便它演示了如何与iOS使用AFRAME 这里。

这是完整性的来源（您的视频必须是本地的，请参见下文）：

<!DOCTYPE html>
<!-- Source: https://github.com/aframevr/aframe/blob/v0.3.2/examples/boilerplate/360-video/index.html -->
<html>
  <head>
    <meta charset="utf-8">
    <title>Aframe 360 Video with iOS Support</title>
    <meta name="description" content="360 Video — A-Frame">
    <style>
      #playoverlay { position: relative; }

      #play-button {
        position: absolute;
        bottom: 30px;
        left: 30px;
      }

      /* Hide native iOS controls */
      .IIV::-webkit-media-controls-play-button,
      .IIV::-webkit-media-controls-start-playback-button {
        opacity: 0;
        pointer-events: none;
        width: 5px;
      }
    </style>
  </head>
  <body>
    <a-scene>
      <a-assets>
        <video id="video" src="sample.mp4" autoplay loop crossorigin playsinline></video>
      </a-assets>
      <a-videosphere src="#video" rotation="0 180 0"></a-videosphere>
    </a-scene>

    <div id="playoverlay">
      <button id="play-button">Play / Pause</button>
    </div>

    <script src="https://aframe.io/aframe/dist/aframe.js"></script>
    <script src="../dist/iphone-inline-video.browser.js"></script>
    <script>
      (function() {
        var video = document.querySelector('#video');
        window.makeVideoPlayableInline(video, /* mute necessary for autoplay*/ false);

        var playButton = document.querySelector('#play-button');
        playButton.addEventListener('click', function(e) {
          if (video.paused) {
            video.play();
          } else {
            video.pause();
          }
        });
      })();
    </script>
  </body>
</html>

iOS /移动Safari警告：

在iOS ，视频源必须是本地的（iOS / Safari似乎是唯一的主要浏览器，该视频存在与视频src和AND（取决于软件/硬件）有关的CORS问题，因此视频可能需要处于特定分辨率下。例如，为了支持iPhone 5，我发现我无法播放任何大于1920x1080，YMMV ...

其他注意事项：

通过控件控制360视频的音频是必须的。 iOS Safari上的卷是只读的 （请参阅此处）。
iOS上的Safari不允许在iFrame中检测陀螺仪/传感器 -因此，如果您希望陀螺仪/加速器正常工作，请确保您的视频未嵌入其他任何地方（请参见此处），因此您的iOS用户将无法获得任何出色的体验A-Frame免费提供的运动控制。
iOS / Safari不支持全屏 （ iOS Safari doesn't have a fullscreen API, but we do on Chrome on Android, Firefox, and IE 11+ ），请参阅此处。仅当Safari退回到其本机播放器时，“ Safari支持视频中的全屏显示”的说法才有效（在这种情况下，A-Frame / Three.js围绕画布球体包裹的360视频纹理不起作用，因为360的视频，看上去很糟糕）。

要在iOS上播放视频（在我的情况下是360度视频）是一个很大的挑战，但可以有很多优惠。

在iPhone的A帧框架下无法播放视频纹理

问题描述

3 个解决方案

解决方案1
1 已采纳 2016-02-23 01:16:25

解决方案2
0 2016-05-10 03:37:58

解决方案3
0 2016-10-20 22:10:05

更新：（旧答案不再适用）

iOS /移动Safari警告：

在iPhone的A帧框架下无法播放视频纹理

问题描述

3 个解决方案

解决方案1 1 已采纳 2016-02-23 01:16:25

解决方案2 0 2016-05-10 03:37:58

解决方案3 0 2016-10-20 22:10:05

更新：（旧答案不再适用）

iOS /移动Safari警告：

解决方案1
1 已采纳 2016-02-23 01:16:25

解决方案2
0 2016-05-10 03:37:58

解决方案3
0 2016-10-20 22:10:05