如果videopsphere加载，则会出现Aframe启动画面 [英] Aframe splashscreen if videopsphere loads
问题描述
Hiho社区
如果视频球加载，我会尝试显示启动画面。我使用此代码-> 设置带有a帧的加载动画用于在场景之前加载启动画面，并且效果很好，但是我需要让我的视频具有预加载的属性，因此，如果我启动它们，它们也需要一些时间来加载，启动画面应该会再次弹出。一些想法（也许是第二个听众说：如果视频加载，则显示启动画面）？
i try to show a splashscreen if my videosphere loads. I use this code -> set a loading animation with a-frame for loading a splash before the scene and it works perfect, but i need to let my videos have the attribute preload so if i start them they need some time to load too and there should the splashscreen pops up again. Some ideas (maybe a second listener which says: show splashscreen if video loading)?.
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：
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';
});
});
推荐答案
有很多方法可以解决此问题的复杂性。从我的经验来看，视频的麻烦在于浏览器很少完全预载视频。它们只会加载到特定点，直到用户观看播放头移动的视频为止。
There are many ways to go about this with varying levels of complexity. The trouble with video, from my experience, is that browsers rarely completely preload the video; they only load until a certain point until the user watches the video of the play head moves.
我注意到您已设置 preload = none 在您的视频上；我会考虑将其更改为 preload = auto 。
I noticed that you have set preload="none" on your video; I would consider changing this to preload="auto".
如果您有网络连接，最简单的方法我可以想到的是，每隔一定时间检查视频的 readyState 。我曾尝试在 loadeddata 事件中执行此操作，但结果不一致，所以我不建议这样做。
If you have a network connection, the simplest way I can think of would be to check against the video's readyState at certain intervals. I've tried doing so on the loadeddata event with inconsistent results, so I can't recommend that.
https://developer.mozilla.org/zh-CN/ docs / Web / API / HTMLMediaElement / readyState
您可以尝试这样的操作（最好在A-Frame系统或组件中）：
You can try something like this (preferably within an A-Frame system or component):
// 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组件，则可以如下定义函数：
If you need to be able to do this for multiple videos and aren't using A-Frame components, you can define the function as follows:
function checkVidState( video, interval ) {
// Same inner code as above
}
您只需要传递视频元素和检查间隔值。
You just need to pass the video element and the check interval value.
然后为每个视频元素调用它们，或遍历它们的数组：
Then call them for each video element or loop through an array of them:
checkVideoState( video1, interval ); // or time in milleseconds
checkVideoState( video2, interval );
. . .
这篇关于如果videopsphere加载，则会出现Aframe启动画面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
