Question

我使用aframe添加视频圈。但在Android浏览器中它不起作用。我正在使用三星S6。在S6中，我查看了许多示例以及我的代码。这是行不通的。

<!DOCTYPE html>
<html>
<head>
<title>Hello, WebVR! - A-Frame</title>
<meta name="description" content="Hello, WebVR! - A-Frame">
<script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>
<script>
  document.addEventListener("DOMContentLoaded", function(event) {
    var scene = document.querySelector("a-scene");
    var vid = document.getElementById("video");
    var videoShere = document.getElementById("videoShere");

    if (scene.hasLoaded) {
      run();
    } else {
      scene.addEventListener("loaded", run);
    }

    function run () {
      if(AFRAME.utils.device.isMobile()) {
        document.querySelector('#splash').style.display = 'flex';
        document.querySelector('#splash').addEventListener('click', function () {
          playVideo();
          this.style.display = 'none';
        })
      } else {
          playVideo();
      }
    }

    function playVideo () {
      vid.play();
      videoShere.components.material.material.map.image.play();
    }
  })
</script>
</head>
<body>
<div id="splash" style="display:none;">
  <div id="start-button">Start</div>
</div>
<a-scene>
  <a-assets>
      <video id="video" src="https://ucarecdn.com/fadab25d-0b3a-45f7-8ef5-85318e92a261/" webkit-playsinline></video>
  </a-assets>

  <a-entity camera="userHeight: 1.6" look-controls cursor="rayOrigin: mouse"></a-entity>

  <a-videosphere id="videoShere" loop="true" src="#video" rotation="0 -90 0"></a-videosphere>
</a-scene>
</body>
</html>

这是我的代码。我的代码有什么问题？为什么它不适用于Android浏览器？有什么方法可以解决这个问题吗？

Answer 1

根据A-Frame文档（https://aframe.io/docs/0.8.0/primitives/a-videosphere.html#caveats），您应该在代码中包含以下行，以确保它们在尽可能多的设备中正常运行：

<head>
...
  <meta name="apple-mobile-web-app-capable" content="yes">
...
</head>

在<video>元素中，如果浏览器支持，您将需要使用此代码来确保视频内联播放并立即开始播放：

<video id="video" src="https://ucarecdn.com/fadab25d-0b3a-45f7-8ef5-85318e92a261/" autoplay loop playsinline webkit-playsinline crossorigin="anonymous"></video>

请注意，在使用托管在其他域上的资产时，应设置crossorigin="anonymous"。同样值得注意的是，即使您使用此代码，某些域名也不会让您这样做。

浏览器内部（A-Frame外）的用户交互可能需要触发默认情况下不允许自动播放的浏览器的视频。我稍微修改了你的模态以使其更加明显：

<div id="splash" style="display: flex; height: 100%; width: 100%; z-index: 999999; position: absolute; background: rgba(0, 0, 0, 0.8);">
  <div id="start-button">Start</div>
</div>

只需将以下代码放在结束</body>标记之前，即可简化javascript：

<script>
// User interaction modal to trigger video in some browsers/devices.
var modal = document.querySelector('#splash');
var video = document.querySelector('#video');

modal.addEventListener('click', function(e) {
  video.play();
  this.parentNode.removeChild(this);
});
</script>

现在，当用户点击模态启动画面时，事件监听器将捕获事件，播放视频，并完全从DOM中删除启动画面。

这是一个有效的演示：https://ultra-bass.glitch.me/

您可能需要添加用于检测移动设备的逻辑，或者更具体地说，需要添加需要此解决方法的设备。

Videosphere在Android浏览器

1 个答案: