0

我正在尝试构建一个 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>

谢谢你

4

2 回答 2

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>
于 2016-10-03T23:33:53.753 回答
2

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

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

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

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

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

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

于 2016-07-13T17:55:13.293 回答