时间到了，
如果我的电视圈加载，我会尝试显示闪屏。我使用这个代码 - > set a loading animation with a-frame在场景之前加载一个启动并且它工作得很完美，但是我需要让我的视频具有属性preload所以如果我启动它们他们需要一些时间来加载并且应该再次弹出启动画面。一些想法（也许是第二个听众说：如果视频加载显示启动画面）？
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';
});
});
有很多方法可以解决这个问题，具有不同的复杂程度。根据我的经验，视频的问题在于浏览器很少完全预加载视频;它们只加载到某一点，直到用户观看播放头移动的视频。
我注意到你在视频中设置了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 );
. . .
像这样 ？ @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>
...