Question

Hidiho，

当我的360度视频在背景中加载时，我尝试显示360度图像。所以我建立了两个领域：外部a-sky与我的图像和内部a-videosphere与不透明度0.现在我试着说在视频完全加载时将不透明度设置为1，但它想在这里工作我的代码：

<!DOCTYPE html>
<html>
  <head>
<!-----------Meta-Daten--------------------------------------->
    <title>zoom-default-vrvideoscene(videosphere)</title>
    <meta charset="utf-8">
    <meta author="Zoom-Worker" inhalt="vr-defaultvideo-nur-video">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>
  </head>

  <body>
    <a-scene>
<!-----------footage------------------------------------------>      
      <a-assets timeout="0">
        <img id="sky" src="https://cdn.glitch.com/710c25d4-6d3f-48ef-910b-36ddf7e5e6b9%2FB02-003_Showreel3-Vehikel_30fps_grade-1.jpeg?1528884380856" crossorigin="anonymous">
        <video id="video" style="display:none" autoplay onload="freezedframe()" controls
               loop="true" crossorigin="anonymous" playsinline webkit-playsinline>
          <source type="video/mp4"
               src="https://cdn.glitch.com/710c25d4-6d3f-48ef-910b-36ddf7e5e6b9%2FB02-003_Showreel3-Vehikel_30fps_grade.mp4?1528884406713" />
        </video>
      </a-assets>
<!--------------Szene----------------------------------------->     

      <a-sky radius="101" src="#sky"></a-sky>

      <a-videosphere id="vidsphere" radius="100" src="#video" opacity="0.5"><a-animation attribute="opacity" begin="fade" dur="2000" to="1">
      </a-animation></a-videosphere>

<!--------camera---------->    
<a-entity rotation="0 90 0">
  <a-camera user-height="0" look-controls>
 </a-camera>  
</a-entity>  

    </a-scene>

     <script>
      function freezedframe() {
      document.querySelector( "#vidsphere" ).emit('fade');
         alert("vid is loaded");
      }
    </script>

  </body>
</html>

Aframe显示图像，直到加载视频

0 个答案: