Question

Hiho社区，

如果我的videosphere加载，我尝试显示启动屏幕。我使用此代码-> set a loading animation with a-frame在场景前加载启动画面，效果很好，但是我需要让我的视频具有预加载的属性，因此，如果我启动它们，它们也需要一些时间加载，因此应该初始屏幕再次弹出。一些想法（也许是第二个听众说：如果视频加载，则显示启动画面）？

HTML：

<body>
 <div id="splash">
   <div class="loading"></div>
 </div>

 <a-scene>
   <a-assets>
     <video id="vid" loop="false" preload="none" 
      crossorigin="anonymous">
          <source type="video/mp4" src="..." />
     </video>
   </a-assets>

   <a-videosphere src="#vid"></a-videosphere>

 </a-scene>
</body>

CSS：

#splash {
  position: absolute;

  display: flex;
  align-items: center;
  justify-content: center;

  top: 0;
  bottom: 0;
  left: 0;
  right: 0;

  width: 200px;
  height: 200px;

  margin: auto;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.loading {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 0.25rem solid rgba(255, 255, 255, 0.2);
  border-top-color: white;
  animation: spin 1s infinite linear;
}

javascript：

document.addEventListener('DOMContentLoaded', function() {
    var scene = document.querySelector('a-scene');
    var splash = document.querySelector('#splash');
    scene.addEventListener('loaded', function (e) {
        splash.style.display = 'none';
    });
});

Answer 1

有许多方法可以解决此问题，并具有不同的复杂度。从我的经验来看，视频的麻烦在于浏览器很少完全预载视频。它们只会加载到特定点，直到用户观看播放头的视频为止。

我注意到您在视频上设置了preload="none"；我会考虑将其更改为preload="auto"。

如果您有网络连接，我想到的最简单的方法是在特定间隔下检查视频的readyState。我尝试在loadeddata事件中执行此操作，但结果不一致，因此不建议这样做。

https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/readyState

您可以尝试这样的操作（最好在A-Frame系统或组件中）：

// The video element
var video = document.querySelector('#vid');

// Define interval in milliseconds
var interval = 1000;

// Check readyState immediately
checkVidState();

// Function to detect if video has enough data to play
function checkVidState() {

  if (video.readyState === 4) {
    removeSplash();
    return true;
  }

  // If readyState !== 4, check again at set interval
  setTimeout(checkVidState, interval);
  return false;

}

// Function for removing splash
function removeSplash() {
  // Logic for removing splash here...
}

如果您需要对多个视频执行此操作并且不使用A-Frame组件，则可以按以下方式定义函数：

function checkVidState( video, interval ) {
  // Same inner code as above
}

您只需要传递视频元素和检查间隔值即可。

然后为每个视频元素调用它们，或遍历它们的数组：

checkVideoState( video1, interval ); // or time in milleseconds
checkVideoState( video2, interval );
. . .

Answer 2

像这样吗？ @Dan S。

  // The video element
  var videoEl_1 = document.querySelector('#intro');
  var videoEl_2 = document.querySelector('#dach');
  var videoEl_3 = document.querySelector('#door');
  var videoEl_4 = document.querySelector('#grube');
  var videoEl_5 = document.querySelector('#schleifen');
  var videoEl_6 = document.querySelector('#outro');

  // Define interval in milliseconds
  var interval = 1000;

function checkVidState( videoEl_1, interval ) {

  // Check readyState immediately
  checkVidState();

  // Function to detect if video has enough data to play
  function checkVidState() {

    if (videoEl_1.readyState === 4) {
      removeSplash_2();
      return true;
    }

    /*if (videoEl_2.readyState === 4) {
      removeSplash_2();
      return true;
    }

    if (videoEl_3.readyState === 4) {
      removeSplash_2();
      return true;
    }

    if (videoEl_4.readyState === 4) {
      removeSplash_2();
      return true;
    }

    if (videoEl_5.readyState === 4) {
      removeSplash_2();
      return true;
    }

    if (videoEl_6.readyState === 4) {
      removeSplash_2();
      return true;
    }*/

    // If readyState !== 4, check again at set interval
    setTimeout(checkVidState, interval);
    return false;
  }

  // Function for removing splash
  function removeSplash_2() {
    var splash_2 = document.querySelector('#splash_2');
    splash_2.style.display = 'none';
  }
}

<a-box onclick="checkVideoState( videoEl_1, interval );"></a-box>
<a-box onclick="checkVideoState( videoEl_2, interval );"></a-box>
...

如果videopsphere加载，则会导致Aframe初始屏幕

2 个答案: