Skip to content

Commit 898d35b

Browse files
CommandstoneCommandstone
authored
Create blogxg.html.
1 parent 74c18b2 commit 898d35b

File tree

1 file changed

+192
-0
lines changed

1 file changed

+192
-0
lines changed

‎blogxg.html.‎

Lines changed: 192 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,192 @@
1+
2+
<!DOCTYPE html>
3+
<html lang="zh-CN">
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>星轨🌟视频</title>
8+
<style>
9+
body {
10+
margin: 0;
11+
overflow: hidden;
12+
background-color: black;
13+
display: flex;
14+
justify-content: center;
15+
align-items: center;
16+
height: 100vh;
17+
}
18+
canvas {
19+
position: fixed;
20+
top: 0;
21+
left: 0;
22+
z-index: 1;
23+
}
24+
.video-container {
25+
position: relative;
26+
z-index: 2;
27+
width: 80%;
28+
max-width: 800px;
29+
}
30+
video {
31+
width: 100%;
32+
box-shadow: 0 0 20px rgba(0, 255, 0, 0.5);
33+
}
34+
.controls {
35+
background: rgba(0, 0, 0, 0.7);
36+
padding: 10px;
37+
display: flex;
38+
flex-direction: column;
39+
}
40+
.progress-container {
41+
width: 100%;
42+
height: 10px;
43+
background: #333;
44+
margin-bottom: 10px;
45+
cursor: pointer;
46+
}
47+
.progress {
48+
height: 100%;
49+
background: #4CAF50;
50+
width: 0%;
51+
}
52+
.buttons {
53+
display: flex;
54+
justify-content: space-between;
55+
}
56+
button {
57+
background: #333;
58+
color: white;
59+
border: none;
60+
padding: 5px 10px;
61+
cursor: pointer;
62+
}
63+
button:hover {
64+
background: #4CAF50;
65+
}
66+
</style>
67+
</head>
68+
<body>
69+
<canvas id="matrix"></canvas>
70+
71+
<div class="video-container">
72+
<video id="videoPlayer">
73+
<source src="xg-video.mp4" type="video/mp4">
74+
您的浏览器不支持HTML5视频
75+
</video>
76+
77+
<div class="controls">
78+
<div class="progress-container" id="progressContainer">
79+
<div class="progress" id="progress"></div>
80+
</div>
81+
82+
<div class="buttons">
83+
<button id="playBtn">播放/暂停</button>
84+
<button id="fullscreenBtn">全屏</button>
85+
<span id="time">00:00 / 00:00</span>
86+
</div>
87+
</div>
88+
</div>
89+
90+
<script>
91+
// 代码雨效果
92+
const canvas = document.getElementById('matrix');
93+
const ctx = canvas.getContext('2d');
94+
95+
canvas.width = window.innerWidth;
96+
canvas.height = window.innerHeight;
97+
98+
const katakana = 'アァカサタナハマヤャラワガザダバパイィキシチニヒミリヰギジヂビピウゥクスツヌフムユュルグズブヅプエェケセテネヘメレヱゲゼデベペオォコソトノホモヨョロヲゴゾドボポヴッン';
99+
const latin = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
100+
const nums = '0123456789';
101+
102+
const alphabet = katakana + latin + nums;
103+
104+
const fontSize = 16;
105+
const columns = canvas.width / fontSize;
106+
107+
const rainDrops = [];
108+
109+
for (let x = 0; x < columns; x++) {
110+
rainDrops[x] = 1;
111+
}
112+
113+
const draw = () => {
114+
ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
115+
ctx.fillRect(0, 0, canvas.width, canvas.height);
116+
117+
ctx.fillStyle = '#0F0';
118+
ctx.font = fontSize + 'px monospace';
119+
120+
for (let i = 0; i < rainDrops.length; i++) {
121+
const text = alphabet.charAt(Math.floor(Math.random() * alphabet.length));
122+
ctx.fillText(text, i * fontSize, rainDrops[i] * fontSize);
123+
124+
if (rainDrops[i] * fontSize > canvas.height && Math.random() > 0.975) {
125+
rainDrops[i] = 0;
126+
}
127+
rainDrops[i]++;
128+
}
129+
};
130+
131+
setInterval(draw, 30);
132+
133+
// 视频播放器控制
134+
const video = document.getElementById('videoPlayer');
135+
const playBtn = document.getElementById('playBtn');
136+
const progress = document.getElementById('progress');
137+
const progressContainer = document.getElementById('progressContainer');
138+
const fullscreenBtn = document.getElementById('fullscreenBtn');
139+
const timeDisplay = document.getElementById('time');
140+
141+
// 播放/暂停
142+
playBtn.addEventListener('click', () => {
143+
if (video.paused) {
144+
video.play();
145+
} else {
146+
video.pause();
147+
}
148+
});
149+
150+
// 更新进度条
151+
video.addEventListener('timeupdate', () => {
152+
const percent = (video.currentTime / video.duration) * 100;
153+
progress.style.width = `${percent}%`;
154+
155+
// 更新时间显示
156+
const currentMinutes = Math.floor(video.currentTime / 60);
157+
const currentSeconds = Math.floor(video.currentTime % 60);
158+
const durationMinutes = Math.floor(video.duration / 60);
159+
const durationSeconds = Math.floor(video.duration % 60);
160+
161+
timeDisplay.textContent = `${currentMinutes}:${currentSeconds < 10 ? '0' : ''}${currentSeconds} / ${durationMinutes}:${durationSeconds < 10 ? '0' : ''}${durationSeconds}`;
162+
});
163+
164+
// 点击进度条跳转
165+
progressContainer.addEventListener('click', (e) => {
166+
const width = progressContainer.clientWidth;
167+
const clickX = e.offsetX;
168+
const duration = video.duration;
169+
170+
video.currentTime = (clickX / width) * duration;
171+
});
172+
173+
// 全屏
174+
fullscreenBtn.addEventListener('click', () => {
175+
if (video.requestFullscreen) {
176+
video.requestFullscreen();
177+
} else if (video.webkitRequestFullscreen) {
178+
video.webkitRequestFullscreen();
179+
} else if (video.msRequestFullscreen) {
180+
video.msRequestFullscreen();
181+
}
182+
});
183+
184+
// 视频加载后更新总时长
185+
video.addEventListener('loadedmetadata', () => {
186+
const durationMinutes = Math.floor(video.duration / 60);
187+
const durationSeconds = Math.floor(video.duration % 60);
188+
timeDisplay.textContent = `00:00 / ${durationMinutes}:${durationSeconds < 10 ? '0' : ''}${durationSeconds}`;
189+
});
190+
</script>
191+
</body>
192+
</html>

0 commit comments

Comments
 (0)