mirror of
https://github.com/Funkoala14/knowledgebase_law.git
synced 2025-06-08 02:58:16 +08:00
176 lines
7.0 KiB
HTML
176 lines
7.0 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<link rel="icon" type="image/svg+xml" href="" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>北京中兆律师事务所 智能知识库</title>
|
||
<!-- 预加载视频文件，设置最高优先级 -->
|
||
<link rel="preload" href="OpenDoor.mp4" as="video" type="video/mp4" fetchpriority="high">
|
||
<style>
|
||
/* 加载动画全屏覆盖 */
|
||
#root-loading {
|
||
position: fixed;
|
||
z-index: 9999;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: #A32B23; /* 使用律所的红色背景 */
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* 确保视频填满屏幕 */
|
||
#door-animation-video {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover; /* 使用cover确保填满整个屏幕 */
|
||
}
|
||
|
||
/* 备用加载动画 */
|
||
.backup-loader {
|
||
width: 80px;
|
||
height: 80px;
|
||
border: 8px solid rgba(255, 255, 255, 0.3);
|
||
border-radius: 50%;
|
||
border-top-color: #fff;
|
||
animation: spin 1s linear infinite;
|
||
display: none;
|
||
}
|
||
|
||
@keyframes spin {
|
||
to { transform: rotate(360deg); }
|
||
}
|
||
|
||
/* React容器初始隐藏 */
|
||
#root {
|
||
display: none;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<!-- 加载动画容器 -->
|
||
<div id="root-loading">
|
||
<!-- 用视频替换GIF，视频可以设置不循环 -->
|
||
<video
|
||
id="door-animation-video"
|
||
autoplay
|
||
muted
|
||
playsinline
|
||
disablePictureInPicture
|
||
disableRemotePlayback
|
||
preload="auto"
|
||
>
|
||
<source src="OpenDoor.mp4" type="video/mp4">
|
||
<!-- 备用GIF，如果视频无法播放 -->
|
||
<img id="door-animation" src="OpenDoor.gif" alt="Loading..." style="width:100%; height:100%; object-fit:cover;" />
|
||
</video>
|
||
<div class="backup-loader" id="backup-loader"></div>
|
||
</div>
|
||
|
||
<!-- React应用容器 -->
|
||
<div id="root"></div>
|
||
|
||
<script>
|
||
// 优化视频播放的主脚本
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
// 获取元素引用
|
||
var video = document.getElementById('door-animation-video');
|
||
var backupLoader = document.getElementById('backup-loader');
|
||
var isVideoPlayed = false;
|
||
var videoLoadStartTime = Date.now();
|
||
|
||
// 视频加载时间监控
|
||
var loadTimeout = setTimeout(function() {
|
||
// 如果5秒后视频仍未开始播放，显示备用加载器
|
||
if (!isVideoPlayed && !video.currentTime) {
|
||
console.warn('视频加载时间过长，准备备用方案');
|
||
}
|
||
}, 5000);
|
||
|
||
// 视频元数据加载完成后隐藏静态首帧
|
||
video.onloadedmetadata = function() {
|
||
console.log('视频元数据已加载');
|
||
};
|
||
|
||
// 视频可以播放时（已缓冲足够数据）
|
||
video.oncanplay = function() {
|
||
console.log('视频可以开始播放');
|
||
|
||
clearTimeout(loadTimeout);
|
||
};
|
||
|
||
// 处理视频加载错误
|
||
video.onerror = function() {
|
||
console.error('无法加载开门动画视频', video.error);
|
||
clearTimeout(loadTimeout);
|
||
|
||
var doorAnimation = document.getElementById('door-animation');
|
||
if (doorAnimation) {
|
||
doorAnimation.style.display = 'block';
|
||
doorAnimation.onerror = function() {
|
||
doorAnimation.style.display = 'none';
|
||
backupLoader.style.display = 'block';
|
||
};
|
||
} else {
|
||
backupLoader.style.display = 'block';
|
||
}
|
||
|
||
// 5秒后无论如何都显示应用
|
||
setTimeout(function() {
|
||
window.doorAnimationCompleted = true;
|
||
if (window.reactAppReady) {
|
||
showReactApp();
|
||
}
|
||
}, 5000);
|
||
};
|
||
|
||
// 监听视频播放结束事件
|
||
video.onended = function() {
|
||
if (!isVideoPlayed) {
|
||
isVideoPlayed = true;
|
||
console.log('视频播放完成');
|
||
|
||
// 记录视频加载到播放完成的总时间
|
||
var totalTime = Date.now() - videoLoadStartTime;
|
||
console.log('视频总播放时间: ' + totalTime + 'ms');
|
||
|
||
// 通知main.jsx视频已播放完成
|
||
window.doorAnimationCompleted = true;
|
||
|
||
// 如果React已经准备好，显示应用
|
||
if (window.reactAppReady) {
|
||
showReactApp();
|
||
}
|
||
}
|
||
};
|
||
|
||
// 函数：显示React应用
|
||
window.showReactApp = function() {
|
||
var rootElement = document.getElementById('root');
|
||
var loadingElement = document.getElementById('root-loading');
|
||
|
||
if (rootElement) rootElement.style.display = 'block';
|
||
if (loadingElement) loadingElement.style.display = 'none';
|
||
};
|
||
|
||
// 确保视频加载失败或其他意外情况下，应用最终会显示（安全措施）
|
||
setTimeout(function() {
|
||
if (!window.doorAnimationCompleted) {
|
||
console.warn('应用显示安全措施触发');
|
||
window.doorAnimationCompleted = true;
|
||
if (window.reactAppReady) {
|
||
showReactApp();
|
||
}
|
||
}
|
||
}, 12000); // 12秒后无论如何都显示应用
|
||
});
|
||
</script>
|
||
|
||
<script type="module" src="/src/main.jsx"></script>
|
||
</body>
|
||
</html>
|