javascript - <a-videosphere> 无法在 Android 浏览器中播放

标签 javascript aframe webvr

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

谢谢

最佳答案

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

Mobile browsers have limitations with displaying inline video.

由于 iOS 平台的限制,为了获得内嵌视频(无论是否自动播放),我们必须:

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

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

向用户提供播放移动视频所需的说明和 UI(固定到主屏幕,点击)。 用于路由用户触发事件以播放视频的开箱即用组件。

关于javascript - <a-videosphere> 无法在 Android 浏览器中播放,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38303517/

相关文章:

javascript - 如何使用 A-Frame 显示一段/一段文字?

javascript - 朝我看的方向移动(webvr、三个js、Oculus Rift)

javascript - 如何使div的顶部和底部透明

javascript - 关闭弹出窗口后,模态弹出背景淡入淡出仍然出现

mozilla - 禁用检查器

javascript - aFrame.io 创建超链接和下载链接

javascript - 使用框架检测头部/相机运动

javascript - 通过 Javascript 从其他页面平滑滚动

javascript - 将数据属性条件语句传递到循环中会导致浏览器崩溃

javascript - A 型框架轨道 Controller 重置摄像机位置