Html 视频在手机中不起作用 360视频 _Html_Aframe

Html 视频在手机中不起作用 360视频

html aframe

Html 视频在手机中不起作用 360视频 ,html,aframe,Html,Aframe,这是截图。它不起作用用以下行替换视频链接代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>360 Video</title> <meta name="description" content="360 Video — A-Frame"> <meta name="apple-mobile-web-app-capable" cont

这是截图。它不起作用

用以下行替换视频链接代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>360 Video</title>
<meta name="description" content="360 Video — A-Frame">
<meta name="apple-mobile-web-app-capable" content="yes">
<script src="https://aframe.io/releases/0.6.0/aframe.js"></script>
</head>

<body>
<a-scene>
  <a-assets>
    <video id="video" autoplay="true" src="textures/videoplayback.mp4" loop webkit-playsinline></video>
  </a-assets>
   <a-entity camera position="2 0 3" look-controls wasd-controls>
  <a-entity cursor="fuse: true; fuseTimeout: 1000"
            position="0 0 -1"
            geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03"
            material="color: black; shader: flat">
    <a-animation begin="click" easing="ease-in" attribute="scale"
                 fill="backwards" from="0.1 0.1 0.1" to="1 1 1"></a-animation>
    <a-animation begin="cursor-fusing" easing="ease-in" attribute="scale"
                 fill="forwards" from="1 1 1" to="0.1 0.1 0.1"></a-animation>
  </a-entity>
</a-entity>
  <a-video src="#video" rotation="0 180 0" width="15" height="7" position="0 0 -10"></a-video>
</a-scene>
</body>
</html>

。。并确保您的“src”路径正确。

要在手机上播放视频，您需要一个用户手势来触发播放。即使如此，它仍然不是最可靠的，但fwiw以下是它的工作原理（在Chrome像素1上测试）：

不，它不起作用。视频不能在手机上播放。

<video id="video" autoplay="true" src="textures/videoplayback.mp4" loop webkit-playsinline playsinline></video>

  document.addEventListener("DOMContentLoaded", function(event) {
    var scene = document.querySelector("a-scene");
    var vid = document.getElementById("video");
    var videoEl = document.getElementById("vidEl");

    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();
      if(AFRAME.utils.device.isMobile()) {
         videoEl.components.material.material.map.image.play(); 
      }
    }
  })