<a-videosphere> 未在 Android 浏览器中播放

Question

我正在尝试构建一个 aFrame 项目并在该项目中附加一个 360 度全景视频。我遇到的问题是 360 视频在我的桌面上 Google Chrome 上工作。但它在我的 Android phone Chrome 和 Firefox 中都不起作用。

这是源代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>360 Videoss</title>
    <meta name="description" content="360 Video — A-Frame">
    <script src="aframe.js"></script>
 <script src="aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-assets>
  <video id="video" src="vid.mp4"></video> 
      </a-assets>
      <a-videosphere src="#video" rotation="0 180 0" loop webkit-playsinline></a-videosphere>
    </a-scene>
  </body>
</html>

谢谢

Answer 1

勾选https://aframe.io/faq/#why-does-my-video-not-play-on-mobile

Mobile browsers have limitations with displaying inline video.

由于 iOS 平台限制，为了获得内联视频（有或没有自动播放），我们必须：

设置元标记。将 webkit-playsinline 属性设置为视频元素。将网页固定到 iOS 主屏幕。在某些 Android 设备或浏览器上，我们必须：

需要用户交互来触发视频（例如点击或点按事件）。这些问题已在 GitHub 上提交。我们计划通过提供以下内容来改善用户体验：

向用户说明并UI 播放移动视频的必要步骤（固定到主屏幕，点击）。开箱即用的组件，用于路由用户触发的事件以播放视频。

Answer 2

正如@ngokevin 所提到的，除非事先有用户交互，否则浏览器基本上不会自动播放任何内容。

对我有用的是从所有媒体（音频和视频）资产中删除自动播放，并创建一个通过单击按钮触发所有内容的功能。

<head>
    <meta charset="utf-8">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <script src="https://aframe.io/releases/0.3.0/aframe.min.js"></script>
    <style>
        #play-button{
          position: fixed;
          top: calc(50% - 1em);
          left: calc(50% - 100px);
          width: 200px;
          height: 2em;
          z-index: 10;
        }
    </style>
  </head>
    <body>
    <button id="play-button">Begin Your Experience</button>
    <a-scene>
         <a-assets>
             <!-- VIDEO AND AUDIO ASSETS -->
             <audio id="n1" src="snd/narration.mp3" autoplay="false"  preload="auto">
             <video id="v1" src="video/sky.mp3" preload="auto" autoplay loop crossorigin webkit-playsinline></video>
         </a-assets>
         <!-- VIDEO AND AUDIO ENTITIES -->
         <a-videosphere id="theVideo" autoplay="false" src="#v1" rotation="0 90 0" radius="400"></a-videosphere> 
         <a-sound id="theAudio" src="#n1" autoplay="false" position="0 0 0" volume="1"></a-sound>
    </a-scene>
</body>
<script>

// Play button, required by browsers to grab user interaction before autoplaying videos.
document.querySelector('#play-button').addEventListener("click", function(e){
startStuff();  // launch the first voice over
this.style.display = 'none';
}, false);

function startStuff(){
    var theVideo = document.querySelector('#n1');
    theVideo.play();

    var theAudio = document.querySelector('#v1');
    theAudio.components.sound.playSound();
}
</script>

<a-videosphere> 未在 Android 浏览器中播放

<a-videosphere> is not playing in Android browsers

javascript

webvr

aframe