Question

我正在尝试构建一个aFrame项目并在此项目中附加一个360视频。我遇到的问题是360视频在我桌面上的Google Chrome上运行。但它在我的Android手机中无法使用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

移动浏览器在显示内嵌视频方面存在局限性。

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

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

要求用户互动以触发视频（例如点击或点击事件）。这些问题在GitHub上提交。我们计划通过以下方式改善用户体验：

向用户提供指示和用户界面以获取移动视频播放的必要步骤（引脚到主屏幕，点按）。开箱即用的组件，用于路由用户触发的事件以播放视频。

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浏览器中播放

2 个答案: