2025-04-11 23:47:09 +08:00
|
|
|
|
<!DOCTYPE html>
|
2025-04-13 01:32:20 +08:00
|
|
|
|
<html lang="zh-CN">
|
2025-04-11 23:47:09 +08:00
|
|
|
|
<head>
|
|
|
|
|
|
<meta charset="UTF-8" />
|
2025-04-13 01:37:11 +08:00
|
|
|
|
<link rel="icon" type="image/jpeg" href="http://www.zzlawfirm.cn/upload/202004/1586226141.jpg" />
|
2025-04-11 23:47:09 +08:00
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
|
|
|
|
<title>北京中兆律师事务所 智能知识库</title>
|
2025-04-13 01:32:20 +08:00
|
|
|
|
<!-- 预加载视频文件，设置最高优先级 -->
|
|
|
|
|
|
<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>
|
2025-04-11 23:47:09 +08:00
|
|
|
|
</head>
|
|
|
|
|
|
<body>
|
2025-04-13 01:32:20 +08:00
|
|
|
|
<!-- 加载动画容器 -->
|
|
|
|
|
|
<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应用容器 -->
|
2025-04-11 23:47:09 +08:00
|
|
|
|
<div id="root"></div>
|
2025-04-13 01:32:20 +08:00
|
|
|
|
|
|
|
|
|
|
<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>
|
|
|
|
|
|
|
2025-04-11 23:47:09 +08:00
|
|
|
|
<script type="module" src="/src/main.jsx"></script>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
</html>
|
