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