Javascript Can'；t在iPhone上的a帧框架下播放视频纹理_Javascript_Ios_Video_Webvr

Javascript Can'；t在iPhone上的a帧框架下播放视频纹理

javascript ios video

Javascript Can'；t在iPhone上的a帧框架下播放视频纹理,javascript,ios,video,webvr,Javascript,Ios,Video,Webvr,我们使用这个框架来开发虚拟现实网站。我们的场景包含带有视频纹理的球体。它在台式机和一些安卓设备上运行良好，但我们无法在iPhone6上开始视频播放。Mobile Safari仅显示视频的第一帧。有人知道如何解决这个问题吗代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Player</title> <met

我们使用这个框架来开发虚拟现实网站。我们的场景包含带有视频纹理的球体。它在台式机和一些安卓设备上运行良好，但我们无法在iPhone6上开始视频播放。Mobile 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>


玩家

有关此问题的详细信息，请参见

iOS对播放在线视频有限制。我们需要在视频元素上定义

webkit playsinline

。我们需要将应用程序固定在主屏幕上，这样才能工作

我们目前正在为iOS开发modals，以便在iOS重新访问此限制之前帮助您获得此体验

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

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

否则，对于iOS，如果它被固定在主屏幕上，它对我有效

我相信很多网络供应商都会致力于此，让虚拟现实与视频一起工作。

更新：（旧答案不再适用）使用JS模块。您可以在线播放360度视频（无需固定到主屏幕）

我尝试更新该模块的文档，以便它演示如何在iOS中使用框架

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


支持iOS的Aframe 360视频
#播放覆盖{位置：相对；}
#播放按钮{
位置：绝对位置；
底部：30px；
左：30px；
}
/*隐藏本机iOS控件*/
.IIV:：-webkit媒体控件播放按钮，
.IIV:：-webkit媒体控件开始播放按钮{
不透明度：0；
指针事件：无；
宽度：5px；
}
)
iOS上的Safari不允许iFrame中的陀螺仪/传感器检测-因此，如果您希望陀螺仪/加速计工作，请确保您的视频未嵌入任何其他位置（请参阅），这样您的iOS用户将无法免费获得A-Frame提供的任何出色的运动控制
iOS/Safari不支持全屏（iOS Safari没有全屏API，但我们在Android、Firefox和IE 11+上的Chrome上有全屏API），参考。“Safari支持视频中的全屏显示”的论点只有在回到其本机播放器时才起作用（在这种情况下，A-Frame/Three.js环绕画布球体的360视频纹理不起作用，因为您有一个看起来很糟糕的平面360视频）


让视频（在我的例子中是360度视频）在iOS上播放是一个相当大的挑战，但有很多优惠是可能的。谢谢！因此，我们将重点放在Android设备上，比如一些Android设备或浏览器需要用户交互才能玩。有些只是工作。作为更新，我们正在尝试通过Firefox for iOS删除pin到主屏幕的限制。
<!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>