无法在 iPhone 上的 a-frame 框架下播放视频纹理答案

【问题标题】：Can't play video texture under a-frame framework on iPhone无法在 iPhone 上的 a-frame 框架下播放视频纹理
【发布时间】：2016-02-22 14:15:48
【问题描述】：

我们使用这个框架https://aframe.io/ 来开发虚拟现实网站。我们的场景包含带有视频纹理的球体。它在台式机和一些安卓设备上运行良好，但我们无法在 iPhone 6 上开始视频播放。移动版 Safari 仅显示第一帧视频。有没有人知道如何解决这个问题？

代码如下：

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

【问题讨论】：

标签： javascript ios video webvr

【解决方案1】：

这个问题在https://github.com/aframevr/aframe/issues/316#issuecomment-183006679有详细说明

iOS 对播放内嵌视频有限制。我们需要在视频元素上定义webkit-playsinline。我们需要将应用固定到主屏幕才能正常工作。

我们目前正在为 iOS 开发模式，以在 iOS 重新访问此限制之前提供这种体验。

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

【讨论】：

谢谢！所以我们专注于 Android 设备
似乎某些 Android 设备或浏览器需要用户交互才能播放。有些只是工作。作为更新，我们正在尝试通过 Firefox for iOS 移除固定到主屏幕的限制。

【解决方案2】：

目前我在 Android 上使用 Firefox，确保设置->高级->自动播放被选中。

否则，如果它固定在主屏幕上，它适用于我的 iOS。

我相信很多网络供应商都会致力于让 VR 处理视频。

【讨论】：

【解决方案3】：

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

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

我已尝试更新该模块的文档，以便演示如何将 Aframe 与 iOS here 一起使用。

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

<!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 存在 CORS 问题的主要浏览器，并且（取决于软件/硬件），视频可能需要位于一定的分辨率，比如支持iPhone 5，发现不能播放大于1920x1080的视频，YMMV...

其他注意事项：

通过控件来控制 360 度全景视频的音频是不可行的。 iOS Safari 上的音量是只读的（请参阅here）。
iOS 上的 Safari 不允许在 iFrames 中检测陀螺仪/传感器 - 因此，如果您希望陀螺仪/加速器正常工作，请确保您的视频没有嵌入到其他任何位置（请参阅 here），因此您的 iOS用户不会获得 A-Frame 免费提供的任何漂亮的移动控制。
iOS/Safari 不支持全屏 (iOS Safari doesn't have a fullscreen API, but we do on Chrome on Android, Firefox, and IE 11+)，参考here。 “Safari 支持全屏视频”的论点仅在它回退到其本机播放器时才有效（在这种情况下，A-Frame/Three.js 环绕画布球体的 360 度视频纹理不起作用，因为您有一个平面360 度全景视频，看起来很糟糕）。

让视频（在我的例子中是 360 度视频）在 iOS 上播放是一个相当大的挑战，但有很多让步是可能的。

【讨论】：