论坛发帖可以使用的HTML代码

风萧

带歌词的音频播放器代码
推荐版·自动滚动歌词

1. <div style="width:100%;max-width:540px;margin:10px auto;border:1px solid #ddd;border-radius:14px;overflow:hidden;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);box-shadow:0 6px 20px rgba(0,0,0,0.15);font-family:'Microsoft YaHei','PingFang SC',Arial,sans-serif;color:#fff;font-size:14px;">
   
2. 
   
3.   <!-- ========== 顶部：封面 + 歌曲信息 ========== -->
   
4.   <div style="display:flex;align-items:center;padding:16px;background:rgba(0,0,0,0.18);">
   
5.     <img src="你的封面图片URL.jpg" alt="专辑封面" style="width:84px;height:84px;border-radius:10px;object-fit:cover;border:2px solid rgba(255,255,255,0.35);margin-right:16px;flex-shrink:0;" onerror="this.style.display='none';">
   
6.     <div style="flex:1;min-width:0;">
   
7.       <div style="font-size:19px;font-weight:bold;margin-bottom:6px;letter-spacing:0.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">♫ 声声慢</div>
   
8.       <div style="font-size:13px;opacity:0.8;margin-bottom:4px;">演唱：韩菁英</div>
   
9.       <div style="font-size:12px;opacity:0.6;">专辑：最美女声</div>
   
10.     </div>
    
11.   </div>
    
12. 
    
13.   <!-- ========== 中部：歌词滚动区 ========== -->
    
14.   <div style="padding:14px 16px;background:rgba(255,255,255,0.08);">
    
15.     <div style="text-align:center;font-size:12px;opacity:0.7;margin-bottom:10px;letter-spacing:2px;">━━━ 歌  词 ━━━</div>
    
16. 
    
17.     <!-- marquee：HTML原生滚动标签，direction=up向上滚动，scrollamount控制速度 -->
    
18.     <marquee direction="up" scrollamount="1" scrolldelay="130" height="180" style="text-align:center;line-height:2.1;font-size:15px;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,0.3);">
    
19. <p>作词 : 崔开潮</p>
    
20. <p>作曲 : 崔开潮</p>
    
21. <p>青砖伴瓦漆</p>
    
22. <p>白马踏新泥</p>
    
23. <p>山花蕉叶暮色丛染红巾</p>
    
24. <p>屋檐洒雨滴</p>
    
25. <p>炊烟袅袅起</p>
    
26. <p>蹉跎辗转宛然的你在哪里</p>
    
27. <p>寻寻觅觅</p>
    
28. <p>冷冷清清</p>
    
29. <p>月落乌啼月牙落孤井</p>
    
30. <p>零零碎碎</p>
    
31. <p>点点滴滴</p>
    
32. <p>梦里有花梦里青草地</p>
    
33. <p>长发引涟漪</p>
    
34. <p>白布展石矶</p>
    
35. <p>河童撑杆摆长舟渡古稀</p>
    
36. <p>屋檐洒雨滴</p>
    
37. <p>炊烟袅袅起</p>
    
38. <p>蹉跎辗转宛然的你在哪里</p>
    
39. <p>寻寻觅觅</p>
    
40. <p>冷冷清清</p>
    
41. <p>月落乌啼月牙落孤井</p>
    
42. <p>零零碎碎</p>
    
43. <p>点点滴滴</p>
    
44. <p>梦里有花梦里青草地</p>
    
45. <p>青砖伴瓦漆</p>
    
46. <p>白马踏新泥</p>
    
47. <p>山花蕉叶暮色丛染红巾</p>
    
48. <p>屋檐洒雨滴</p>
    
49. <p>炊烟袅袅起</p>
    
50. <p>蹉跎辗转宛然的你在哪里</p>
    
51. 
    
52.       <span style="opacity:0.5;">—— 完 ——</span>
    
53.     </marquee>
    
54.   </div>
    
55. 
    
56.   <!-- ========== 底部：原生音频控件 ========== -->
    
57.   <div style="padding:12px 14px;background:rgba(0,0,0,0.25);">
    
58.     <audio src="https://www.joy127.com/url/158097.mp3" controls="controls" loop="loop" autoplay preload="metadata" style="width:100%;height:44px;outline:none;border-radius:6px;"></audio>
    
59.   </div>
    
60. 
    
61.   <!-- 底部小提示条 -->
    
62.   <div style="text-align:center;font-size:11px;opacity:0.55;padding:6px 0 10px;letter-spacing:1px;">
    
63.     点击播放器 ▶ 按钮开始播放
    
64.   </div>
    
65. </div>

复制代码

---

手动滚动歌词

1. <div style="width:100%;max-width:540px;margin:10px auto;border:1px solid #ddd;border-radius:14px;overflow:hidden;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);box-shadow:0 6px 20px rgba(0,0,0,0.15);font-family:'Microsoft YaHei','PingFang SC',Arial,sans-serif;color:#fff;font-size:14px;">
   
2. 
   
3.   <div style="display:flex;align-items:center;padding:16px;background:rgba(0,0,0,0.18);">
   
4.     <img src="你的封面图片URL.jpg" alt="专辑封面" style="width:84px;height:84px;border-radius:10px;object-fit:cover;border:2px solid rgba(255,255,255,0.35);margin-right:16px;flex-shrink:0;" onerror="this.style.display='none';">
   
5.     <div style="flex:1;min-width:0;">
   
6.       <div style="font-size:19px;font-weight:bold;margin-bottom:6px;letter-spacing:0.5px;">♫ 声声慢</div>
   
7.       <div style="font-size:13px;opacity:0.8;margin-bottom:4px;">演唱：韩菁英</div>
   
8.       <div style="font-size:12px;opacity:0.6;">专辑：最美女声</div>
   
9.     </div>
   
10.   </div>
    
11. 
    
12.   <!-- 手动滚动歌词区：overflow:auto 自动生成滚动条 -->
    
13.   <div style="padding:14px 16px;background:rgba(255,255,255,0.08);">
    
14.     <div style="text-align:center;font-size:12px;opacity:0.7;margin-bottom:10px;letter-spacing:2px;">━━━ 歌  词（鼠标滚轮滑动） ━━━</div>
    
15.     <div style="height:180px;overflow-y:auto;overflow-x:hidden;text-align:center;line-height:2.1;font-size:15px;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,0.3);scrollbar-width:thin;scrollbar-color:rgba(255,255,255,0.4) transparent;">
    
16. <p>作词 : 崔开潮</p>
    
17. <p>作曲 : 崔开潮</p>
    
18. <p>青砖伴瓦漆</p>
    
19. <p>白马踏新泥</p>
    
20. <p>山花蕉叶暮色丛染红巾</p>
    
21. <p>屋檐洒雨滴</p>
    
22. <p>炊烟袅袅起</p>
    
23. <p>蹉跎辗转宛然的你在哪里</p>
    
24. <p>寻寻觅觅</p>
    
25. <p>冷冷清清</p>
    
26. <p>月落乌啼月牙落孤井</p>
    
27. <p>零零碎碎</p>
    
28. <p>点点滴滴</p>
    
29. <p>梦里有花梦里青草地</p>
    
30. <p>长发引涟漪</p>
    
31. <p>白布展石矶</p>
    
32. <p>河童撑杆摆长舟渡古稀</p>
    
33. <p>屋檐洒雨滴</p>
    
34. <p>炊烟袅袅起</p>
    
35. <p>蹉跎辗转宛然的你在哪里</p>
    
36. <p>寻寻觅觅</p>
    
37. <p>冷冷清清</p>
    
38. <p>月落乌啼月牙落孤井</p>
    
39. <p>零零碎碎</p>
    
40. <p>点点滴滴</p>
    
41. <p>梦里有花梦里青草地</p>
    
42. <p>青砖伴瓦漆</p>
    
43. <p>白马踏新泥</p>
    
44. <p>山花蕉叶暮色丛染红巾</p>
    
45. <p>屋檐洒雨滴</p>
    
46. <p>炊烟袅袅起</p>
    
47. <p>蹉跎辗转宛然的你在哪里</p>
    
48.       <span style="opacity:0.5;">—— 完 ——</span>
    
49.     </div>
    
50.   </div>
    
51. 
    
52.   <div style="padding:12px 14px;background:rgba(0,0,0,0.25);">
    
53.     <audio src="https://www.joy127.com/url/158097.mp3" controls="controls" loop="loop" autoplay preload="metadata" style="width:100%;height:44px;outline:none;border-radius:6px;"></audio>
    
54.   </div>
    
55. 
    
56.   <div style="text-align:center;font-size:11px;opacity:0.55;padding:6px 0 10px;letter-spacing:1px;">
    
57.     点击播放器 ▶ 按钮开始播放
    
58.   </div>
    
59. </div>

复制代码

风萧

非常漂亮的多歌列表播放器

1. <style type="text/css">
   
2. /* ========== 外层容器（不影响外部页面） ========== */
   
3. .audio-playlist-container {
   
4.     max-width: 800px;
   
5.     margin: 15px auto;
   
6.     font-family: "Microsoft YaHei", "微软雅黑", sans-serif;
   
7.     background: #1a1a1a;
   
8.     border-radius: 10px;
   
9.     overflow: hidden;
   
10.     box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    
11.     color: #fff;
    
12.     box-sizing: border-box;
    
13. }
    
14. /* 容器内局部 reset —— 只影响播放器内部，不会改到论坛页面 */
    
15. .audio-playlist-container, .audio-playlist-container * {
    
16.     box-sizing: border-box;
    
17. }
    
18. .audio-playlist-container * {
    
19.     margin: 0;
    
20.     padding: 0;
    
21. }
    
22. 
    
23. /* ===== 主播放区（替代视频画面） ===== */
    
24. .audio-playlist-container .audio-main {
    
25.     position: relative;
    
26.     background: linear-gradient(135deg, #1a1a1a 0%, #0d0d0d 100%);
    
27.     padding: 30px 20px 20px;
    
28.     min-height: 280px;
    
29.     display: flex;
    
30.     flex-direction: column;
    
31.     align-items: center;
    
32.     justify-content: center;
    
33.     overflow: hidden;
    
34. }
    
35. /* 背景柔光 */
    
36. .audio-playlist-container .audio-main::before {
    
37.     content: "";
    
38.     position: absolute;
    
39.     width: 300px; height: 300px;
    
40.     background: radial-gradient(circle, rgba(231,76,60,0.25) 0%, transparent 70%);
    
41.     top: 50%; left: 50%;
    
42.     transform: translate(-50%, -50%);
    
43.     pointer-events: none;
    
44. }
    
45. .audio-playlist-container .audio-info-bar {
    
46.     position: absolute;
    
47.     top: 0; left: 0; right: 0;
    
48.     background: linear-gradient(to bottom, rgba(0,0,0,0.75), transparent);
    
49.     padding: 15px 20px;
    
50.     z-index: 10;
    
51. }
    
52. .audio-playlist-container .audio-title {
    
53.     font-size: 16px;
    
54.     font-weight: bold;
    
55.     margin-bottom: 5px;
    
56.     text-shadow: 0 1px 3px rgba(0,0,0,0.6);
    
57. }
    
58. .audio-playlist-container .audio-index {
    
59.     font-size: 12px;
    
60.     opacity: 0.8;
    
61. }
    
62. 
    
63. /* 唱片封面 */
    
64. .audio-playlist-container .disc-wrap {
    
65.     position: relative;
    
66.     width: 180px;
    
67.     height: 180px;
    
68.     margin-top: 20px;
    
69.     z-index: 2;
    
70. }
    
71. .audio-playlist-container .disc {
    
72.     width: 100%;
    
73.     height: 100%;
    
74.     border-radius: 50%;
    
75.     background:
    
76.         radial-gradient(circle at center, #e74c3c 0 18%, #111 18.5% 22%, #222 22.5% 50%, #111 50.5% 52%, #222 52.5% 100%);
    
77.     box-shadow: 0 8px 30px rgba(0,0,0,0.7), inset 0 0 20px rgba(0,0,0,0.8);
    
78.     position: relative;
    
79.     animation: apc-spin 8s linear infinite;
    
80.     animation-play-state: paused;
    
81. }
    
82. .audio-playlist-container .disc::after {
    
83.     content: "♪";
    
84.     position: absolute;
    
85.     top: 50%; left: 50%;
    
86.     transform: translate(-50%, -50%);
    
87.     color: #fff;
    
88.     font-size: 28px;
    
89.     text-shadow: 0 0 10px rgba(255,255,255,0.3);
    
90. }
    
91. .audio-playlist-container .disc.playing { animation-play-state: running; }
    
92. @keyframes apc-spin {
    
93.     from { transform: rotate(0deg); }
    
94.     to   { transform: rotate(360deg); }
    
95. }
    
96. /* 唱针 */
    
97. .audio-playlist-container .needle {
    
98.     position: absolute;
    
99.     top: -10px; right: 10px;
    
100.     width: 60px; height: 90px;
     
101.     z-index: 3;
     
102.     transform-origin: top right;
     
103.     transform: rotate(-25deg);
     
104.     transition: transform 0.4s;
     
105. }
     
106. .audio-playlist-container .needle.playing { transform: rotate(-5deg); }
     
107. .audio-playlist-container .needle::before {
     
108.     content: "";
     
109.     position: absolute;
     
110.     top: 0; right: 0;
     
111.     width: 14px; height: 14px;
     
112.     border-radius: 50%;
     
113.     background: #666;
     
114.     border: 2px solid #888;
     
115. }
     
116. .audio-playlist-container .needle::after {
     
117.     content: "";
     
118.     position: absolute;
     
119.     top: 8px; right: 6px;
     
120.     width: 3px; height: 75px;
     
121.     background: linear-gradient(to bottom, #999, #ccc 30%, #555 100%);
     
122.     border-radius: 2px;
     
123.     transform: rotate(15deg);
     
124.     transform-origin: top;
     
125. }
     
126. 
     
127. /* 音频波形 */
     
128. .audio-playlist-container .waveform {
     
129.     display: flex;
     
130.     align-items: center;
     
131.     gap: 3px;
     
132.     height: 32px;
     
133.     margin-top: 18px;
     
134.     z-index: 2;
     
135. }
     
136. .audio-playlist-container .waveform span {
     
137.     display: block;
     
138.     width: 4px;
     
139.     background: linear-gradient(to top, #c0392b, #e74c3c);
     
140.     border-radius: 2px;
     
141.     height: 6px;
     
142.     transition: height 0.15s;
     
143. }
     
144. .audio-playlist-container .waveform.playing span {
     
145.     animation: apc-wave 1s ease-in-out infinite;
     
146. }
     
147. .audio-playlist-container .waveform span:nth-child(1) { animation-delay: 0s; }
     
148. .audio-playlist-container .waveform span:nth-child(2) { animation-delay: 0.1s; }
     
149. .audio-playlist-container .waveform span:nth-child(3) { animation-delay: 0.2s; }
     
150. .audio-playlist-container .waveform span:nth-child(4) { animation-delay: 0.3s; }
     
151. .audio-playlist-container .waveform span:nth-child(5) { animation-delay: 0.4s; }
     
152. .audio-playlist-container .waveform span:nth-child(6) { animation-delay: 0.3s; }
     
153. .audio-playlist-container .waveform span:nth-child(7) { animation-delay: 0.2s; }
     
154. .audio-playlist-container .waveform span:nth-child(8) { animation-delay: 0.1s; }
     
155. .audio-playlist-container .waveform span:nth-child(9) { animation-delay: 0s; }
     
156. @keyframes apc-wave {
     
157.     0%, 100% { height: 6px; }
     
158.     50%      { height: 28px; }
     
159. }
     
160. 
     
161. /* audio 元素 */
     
162. .audio-playlist-container .audio-main audio {
     
163.     width: 100%;
     
164.     margin-top: 18px;
     
165.     z-index: 2;
     
166.     outline: none;
     
167. }
     
168. .audio-playlist-container .audio-main audio::-webkit-media-controls-panel {
     
169.     background-color: #2a2a2a;
     
170. }
     
171. 
     
172. /* ===== 控制栏 ===== */
     
173. .audio-playlist-container .audio-controls-bar {
     
174.     display: flex;
     
175.     justify-content: space-between;
     
176.     align-items: center;
     
177.     padding: 10px 15px;
     
178.     background: #222;
     
179.     color: #fff;
     
180.     flex-wrap: wrap;
     
181.     gap: 8px;
     
182. }
     
183. .audio-playlist-container .control-group {
     
184.     display: flex;
     
185.     gap: 10px;
     
186.     align-items: center;
     
187. }
     
188. .audio-playlist-container .ctrl-btn {
     
189.     background: #444;
     
190.     border: none;
     
191.     color: #fff;
     
192.     padding: 6px 12px;
     
193.     border-radius: 4px;
     
194.     cursor: pointer;
     
195.     font-size: 12px;
     
196.     font-family: inherit;
     
197.     transition: background 0.2s;
     
198.     line-height: 1.4;
     
199. }
     
200. .audio-playlist-container .ctrl-btn:hover { background: #666; }
     
201. .audio-playlist-container .ctrl-btn.active { background: #e74c3c; }
     
202. 
     
203. /* ===== 播放列表 ===== */
     
204. .audio-playlist-container .playlist {
     
205.     max-height: 500px;
     
206.     overflow-y: auto;
     
207.     background: #1a1a1a;
     
208. }
     
209. /* 局部滚动条 —— 只改播放器内部列表，不影响论坛页面滚动条 */
     
210. .audio-playlist-container .playlist::-webkit-scrollbar { width: 6px; }
     
211. .audio-playlist-container .playlist::-webkit-scrollbar-track { background: #1a1a1a; }
     
212. .audio-playlist-container .playlist::-webkit-scrollbar-thumb { background: #555; border-radius: 3px; }
     
213. 
     
214. .audio-playlist-container .playlist-item {
     
215.     display: flex;
     
216.     align-items: center;
     
217.     padding: 12px 15px;
     
218.     border-bottom: 1px solid #333;
     
219.     cursor: pointer;
     
220.     transition: all 0.2s;
     
221.     color: #ccc;
     
222. }
     
223. .audio-playlist-container .playlist-item:hover { background: #2a2a2a; }
     
224. .audio-playlist-container .playlist-item.playing {
     
225.     background: linear-gradient(90deg, #c0392b 0%, #e74c3c 100%);
     
226.     color: #fff;
     
227. }
     
228. .audio-playlist-container .playlist-item.played { opacity: 0.6; }
     
229. .audio-playlist-container .item-index {
     
230.     width: 28px;
     
231.     height: 28px;
     
232.     border-radius: 50%;
     
233.     background: #333;
     
234.     display: flex;
     
235.     align-items: center;
     
236.     justify-content: center;
     
237.     font-size: 12px;
     
238.     margin-right: 12px;
     
239.     flex-shrink: 0;
     
240. }
     
241. .audio-playlist-container .playlist-item.playing .item-index {
     
242.     background: #fff;
     
243.     color: #e74c3c;
     
244. }
     
245. .audio-playlist-container .item-info { flex: 1; min-width: 0; }
     
246. .audio-playlist-container .item-title {
     
247.     font-size: 14px;
     
248.     margin-bottom: 3px;
     
249.     white-space: nowrap;
     
250.     overflow: hidden;
     
251.     text-overflow: ellipsis;
     
252. }
     
253. .audio-playlist-container .item-duration {
     
254.     font-size: 11px;
     
255.     opacity: 0.7;
     
256. }
     
257. .audio-playlist-container .playing-indicator {
     
258.     margin-left: 10px;
     
259.     font-size: 12px;
     
260.     flex-shrink: 0;
     
261. }
     
262. 
     
263. @media (max-width: 600px) {
     
264.     .audio-playlist-container .audio-title { font-size: 14px; }
     
265.     .audio-playlist-container .playlist-item { padding: 10px; }
     
266.     .audio-playlist-container .disc-wrap { width: 140px; height: 140px; margin-top: 30px; }
     
267.     .audio-playlist-container .audio-main { min-height: 260px; padding-top: 40px; }
     
268.     .audio-playlist-container .ctrl-btn { padding: 6px 10px; font-size: 12px; }
     
269. }
     
270. </style>
     
271. 
     
272. <div class="audio-playlist-container">
     
273.     <div class="audio-main">
     
274.         <div class="audio-info-bar">
     
275.             <div class="audio-title" id="audioTitle">个人收藏的单曲合集</div>
     
276.             <div class="audio-index" id="audioIndex">第 1 首 / 共 N 首</div>
     
277.         </div>
     
278. 
     
279.         <div class="disc-wrap">
     
280.             <div class="needle" id="needle"></div>
     
281.             <div class="disc" id="disc"></div>
     
282.         </div>
     
283. 
     
284.         <div class="waveform" id="waveform">
     
285.             <span></span><span></span><span></span><span></span><span></span>
     
286.             <span></span><span></span><span></span><span></span>
     
287.         </div>
     
288. 
     
289.         <audio id="mainAudio" controls preload="metadata" playsinline webkit-playsinline>
     
290.             您的浏览器不支持HTML5音频播放，请升级浏览器。
     
291.         </audio>
     
292.     </div>
     
293. 
     
294.     <div class="audio-controls-bar">
     
295.         <div class="control-group">
     
296.             <button class="ctrl-btn" onclick="prevAudio()">⏮ 上一首</button>
     
297.             <button class="ctrl-btn" onclick="nextAudio()">下一首 ⏭</button>
     
298.         </div>
     
299.         <div class="control-group">
     
300.             <button class="ctrl-btn active" id="autoPlayBtn" onclick="toggleAutoPlay()">🔁 连播: 开</button>
     
301.             <button class="ctrl-btn" id="loopBtn" onclick="toggleLoop()">🔂 循环: 关</button>
     
302.         </div>
     
303.     </div>
     
304. 
     
305.     <div class="playlist" id="playlist"></div>
     
306. </div>
     
307. 
     
308. <script type="text/javascript">
     
309. // ======== 音频列表配置（替换为你自己的音频地址）========
     
310. var audioList = [
     
311.     {
     
312.         title: "第一首：笑纳 - 花僮",
     
313.         url: "https://www.joy127.com/url/158119.mp3",
     
314.         duration: ""
     
315.     },
     
316.     {
     
317.         title: "第二首：浪子闲话 - 花僮",
     
318.         url: "https://www.joy127.com/url/158118.mp3",
     
319.         duration: ""
     
320.     },
     
321.     {
     
322.         title: "第三首：秒针 - 阿梨粤",
     
323.         url: "https://www.joy127.com/url/158117.mp3",
     
324.         duration: ""
     
325.     },
     
326.     {
     
327.         title: "第四首：精忠报国 - 屠龙刚",
     
328.         url: "https://www.joy127.com/url/158116.mp3",
     
329.         duration: ""
     
330.     },
     
331.     {
     
332.         title: "第五首：赤伶 - 谭晶",
     
333.         url: "https://www.joy127.com/url/158115.mp3",
     
334.         duration: ""
     
335.     },
     
336.     {
     
337.         title: "第六首：客官不可以 - 麦小兜",
     
338.         url: "https://www.joy127.com/url/158114.mp3",
     
339.         duration: ""
     
340.     },
     
341.     {
     
342.         title: "第七首：小道童 - 麦小兜",
     
343.         url: "https://www.joy127.com/url/158113.mp3",
     
344.         duration: ""
     
345.     },
     
346.     {
     
347.         title: "第八首：情字最大 - 浅影阿",
     
348.         url: "https://www.joy127.com/url/158112.mp3",
     
349.         duration: ""
     
350.     },
     
351.     {
     
352.         title: "第九首：万疆 - 李玉刚",
     
353.         url: "https://www.joy127.com/url/158111.mp3",
     
354.         duration: ""
     
355.     },
     
356.     {
     
357.         title: "第十首：处处吻 - 杨千嬅",
     
358.         url: "https://www.joy127.com/url/158110.mp3",
     
359.         duration: ""
     
360.     },
     
361.     {
     
362.         title: "第十一首：声声慢 - 韩菁英（最美女声）",
     
363.         url: "https://www.joy127.com/url/158097.mp3",
     
364.         duration: ""
     
365.     },
     
366.     {
     
367.         title: "第十二首：声声慢 - 吴亮莹（吴侬软语）",
     
368.         url: "https://www.joy127.com/url/158096.mp3",
     
369.         duration: ""
     
370.     },
     
371.     {
     
372.         title: "第三首：音频标题写这里",
     
373.         url: "",
     
374.         duration: ""
     
375.     },
     
376.     // 按此格式继续添加更多音频即可
     
377. ];
     
378. // ========================================================
     
379. 
     
380. (function(){
     
381.     var currentIndex = 0;
     
382.     var autoPlayNext = true;
     
383.     var loopAll = false;
     
384.     var audio = document.getElementById('mainAudio');
     
385.     var playlistEl = document.getElementById('playlist');
     
386.     var disc = document.getElementById('disc');
     
387.     var needle = document.getElementById('needle');
     
388.     var waveform = document.getElementById('waveform');
     
389. 
     
390.     function setPlayingVisual(isPlaying) {
     
391.         if (isPlaying) {
     
392.             disc.classList.add('playing');
     
393.             needle.classList.add('playing');
     
394.             waveform.classList.add('playing');
     
395.         } else {
     
396.             disc.classList.remove('playing');
     
397.             needle.classList.remove('playing');
     
398.             waveform.classList.remove('playing');
     
399.         }
     
400.     }
     
401. 
     
402.     function formatTime(sec) {
     
403.         if (!sec || isNaN(sec)) return '';
     
404.         var m = Math.floor(sec / 60);
     
405.         var s = Math.floor(sec % 60);
     
406.         return m + ':' + (s < 10 ? '0' + s : s);
     
407.     }
     
408. 
     
409.     function initPlaylist() {
     
410.         playlistEl.innerHTML = '';
     
411.         for (var i = 0; i < audioList.length; i++) {
     
412.             var item = document.createElement('div');
     
413.             item.className = 'playlist-item' + (i === 0 ? ' playing' : '');
     
414.             item.setAttribute('data-index', i);
     
415.             item.innerHTML =
     
416.                 '<div class="item-index">' + (i + 1) + '</div>' +
     
417.                 '<div class="item-info">' +
     
418.                     '<div class="item-title">' + audioList[i].title + '</div>' +
     
419.                     '<div class="item-duration" data-dur-idx="' + i + '">' + (audioList[i].duration || '--:--') + '</div>' +
     
420.                 '</div>' +
     
421.                 '<div class="playing-indicator">' + (i === 0 ? '▶ 播放中' : '') + '</div>';
     
422.             item.onclick = (function(idx) {
     
423.                 return function() { playAudio(idx); };
     
424.             })(i);
     
425.             playlistEl.appendChild(item);
     
426.         }
     
427.     }
     
428. 
     
429.     function updatePlaylistUI() {
     
430.         var items = playlistEl.querySelectorAll('.playlist-item');
     
431.         for (var i = 0; i < items.length; i++) {
     
432.             items[i].className = 'playlist-item';
     
433.             var indicator = items[i].querySelector('.playing-indicator');
     
434.             indicator.textContent = '';
     
435.             if (i < currentIndex) items[i].className += ' played';
     
436.             if (i === currentIndex) {
     
437.                 items[i].className += ' playing';
     
438.                 indicator.textContent = '▶ 播放中';
     
439.             }
     
440.         }
     
441.     }
     
442. 
     
443.     function playAudio(index) {
     
444.         if (index < 0) index = loopAll ? audioList.length - 1 : 0;
     
445.         if (index >= audioList.length) index = loopAll ? 0 : audioList.length - 1;
     
446.         currentIndex = index;
     
447.         var item = audioList[index];
     
448.         audio.src = item.url;
     
449.         audio.load();
     
450.         audio.play().then(function() {
     
451.             setPlayingVisual(true);
     
452.         }).catch(function(e) {
     
453.             setPlayingVisual(false);
     
454.         });
     
455.         document.getElementById('audioTitle').textContent = item.title;
     
456.         document.getElementById('audioIndex').textContent = '第 ' + (index + 1) + ' 首 / 共 ' + audioList.length + ' 首';
     
457.         updatePlaylistUI();
     
458.     }
     
459. 
     
460.     window.nextAudio = function() {
     
461.         if (currentIndex < audioList.length - 1) playAudio(currentIndex + 1);
     
462.         else if (loopAll) playAudio(0);
     
463.     };
     
464.     window.prevAudio = function() {
     
465.         if (currentIndex > 0) playAudio(currentIndex - 1);
     
466.         else if (loopAll) playAudio(audioList.length - 1);
     
467.     };
     
468.     window.toggleAutoPlay = function() {
     
469.         autoPlayNext = !autoPlayNext;
     
470.         var btn = document.getElementById('autoPlayBtn');
     
471.         btn.textContent = autoPlayNext ? '🔁 连播: 开' : '🔁 连播: 关';
     
472.         btn.className = 'ctrl-btn' + (autoPlayNext ? ' active' : '');
     
473.     };
     
474.     window.toggleLoop = function() {
     
475.         loopAll = !loopAll;
     
476.         var btn = document.getElementById('loopBtn');
     
477.         btn.textContent = loopAll ? '🔂 循环: 开' : '🔂 循环: 关';
     
478.         btn.className = 'ctrl-btn' + (loopAll ? ' active' : '');
     
479.     };
     
480. 
     
481.     audio.addEventListener('play', function() { setPlayingVisual(true); });
     
482.     audio.addEventListener('pause', function() { setPlayingVisual(false); });
     
483.     audio.addEventListener('ended', function() {
     
484.         setPlayingVisual(false);
     
485.         if (autoPlayNext) {
     
486.             if (currentIndex < audioList.length - 1) nextAudio();
     
487.             else if (loopAll) playAudio(0);
     
488.         }
     
489.     });
     
490.     audio.addEventListener('loadedmetadata', function() {
     
491.         var durEl = playlistEl.querySelector('[data-dur-idx="' + currentIndex + '"]');
     
492.         if (durEl && (!audioList[currentIndex].duration)) {
     
493.             var t = formatTime(audio.duration);
     
494.             durEl.textContent = t;
     
495.             audioList[currentIndex].duration = t;
     
496.         }
     
497.     });
     
498. 
     
499.     initPlaylist();
     
500.     playAudio(0);
     
501. })();
     
502. </script>

复制代码

风萧

不带歌词版的单曲播发器

1. <!--
   
2.   Discuz 论坛发帖专用 - 现代化玻璃拟态音乐播放器
   
3.   使用说明：
   
4.   1. 复制以下所有代码。
   
5.   2. 在 Discuz 发帖编辑器中切换到“纯文本/HTML源码”模式。
   
6.   3. 替换 src 中的音频链接和 img 中的封面链接。
   
7.   4. 确保论坛权限允许发布 HTML 代码。
   
8. -->
   
9. 
   
10. <div style="
    
11.   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    
12.   width: 320px;
    
13.   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    
14.   border-radius: 20px;
    
15.   padding: 20px;
    
16.   box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    
17.   color: white;
    
18.   margin: 20px auto;
    
19.   position: relative;
    
20.   overflow: hidden;
    
21.   text-align: center;
    
22. ">
    
23. 
    
24.   <!-- 背景装饰光斑 -->
    
25.   <div style="
    
26.     position: absolute;
    
27.     top: -50%;
    
28.     left: -50%;
    
29.     width: 200%;
    
30.     height: 200%;
    
31.     background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
    
32.     pointer-events: none;
    
33.     z-index: 0;
    
34.   "></div>
    
35. 
    
36.   <!-- 内容区域 -->
    
37.   <div style="position: relative; z-index: 1;">
    
38.    
    
39.     <!-- 唱片封面容器 -->
    
40.     <div style="
    
41.       width: 180px;
    
42.       height: 180px;
    
43.       margin: 0 auto 20px;
    
44.       border-radius: 50%;
    
45.       border: 4px solid rgba(255,255,255,0.2);
    
46.       box-shadow: 0 8px 20px rgba(0,0,0,0.3);
    
47.       overflow: hidden;
    
48.       position: relative;
    
49.       animation: rotate-disc 10s linear infinite;
    
50.       /* 默认暂停动画，播放时通过JS添加 class 或手动控制较难，这里使用CSS常转模拟黑胶效果，
    
51.          若需精确控制播放暂停动画，需JS支持，但Discuz限制JS，故采用视觉常驻旋转或静态美图为宜。
    
52.          此处为了美观，设为缓慢旋转，若介意可删除 animation 属性 -->
    
53.       animation-play-state: paused;
    
54.     " id="disc-cover">
    
55.       <!-- 封面图片：请替换下面的 src -->
    
56.       <img src="https://i.ibb.co/nN5s9FYn/CG.jpg" alt="音乐封面" style="
    
57.         width: 100%;
    
58.         height: 100%;
    
59.         object-fit: cover;
    
60.         display: block;
    
61.       ">
    
62.       <!-- 中心圆点 -->
    
63.       <div style="
    
64.         position: absolute;
    
65.         top: 50%;
    
66.         left: 50%;
    
67.         transform: translate(-50%, -50%);
    
68.         width: 30px;
    
69.         height: 30px;
    
70.         background: #2d3436;
    
71.         border-radius: 50%;
    
72.         border: 2px solid rgba(255,255,255,0.5);
    
73.       "></div>
    
74.     </div>
    
75. 
    
76.     <!-- 歌曲信息 -->
    
77.     <h3 style="
    
78.       margin: 0 0 5px;
    
79.       font-size: 18px;
    
80.       font-weight: 600;
    
81.       text-shadow: 0 2px 4px rgba(0,0,0,0.2);
    
82.       white-space: nowrap;
    
83.       overflow: hidden;
    
84.       text-overflow: ellipsis;
    
85.     ">Simpa Pa Pa</h3>
    
86.     <p style="
    
87.       margin: 0 0 20px;
    
88.       font-size: 14px;
    
89.       opacity: 0.8;
    
90.       font-weight: 300;
    
91.     ">Yefium </p>
    
92. 
    
93.     <!-- 自定义控制按钮区域 (视觉层) -->
    
94.     <div style="
    
95.       display: flex;
    
96.       justify-content: center;
    
97.       align-items: center;
    
98.       gap: 20px;
    
99.       margin-bottom: 15px;
    
100.     ">
     
101.       <!-- 播放/暂停按钮视觉提示 (实际功能由下方 audio controls 提供，此处仅为美化引导) -->
     
102.       <div style="
     
103.         font-size: 12px;
     
104.         opacity: 0.6;
     
105.         background: rgba(0,0,0,0.2);
     
106.         padding: 4px 10px;
     
107.         border-radius: 12px;
     
108.       ">点击下方原生控件播放</div>
     
109.     </div>
     
110. 
     
111.     <!-- 核心音频标签 -->
     
112.     <!--
     
113.       controls: 显示浏览器原生控件（最稳定兼容 Discuz）
     
114.       preload: 预加载元数据
     
115.       注意：为了保持 UI 统一，我们可以尝试隐藏原生控件的大部分内容，只保留进度条，
     
116.       但在不同浏览器下表现不一。最稳妥的“好看”方式是保留原生控件，但通过 CSS 美化容器。
     
117.       
     
118.       进阶技巧：如果 Discuz 允许少量 JS，可以添加 onclick 事件控制播放并旋转封面。
     
119.       下面代码包含一段简单的内联 JS 尝试控制封面旋转（视论坛过滤规则而定，若被过滤则仅作为静态播放器）。
     
120.     -->
     
121.     <audio id="my-audio" controls autoplay loop preload="metadata" style="
     
122.       width: 100%;
     
123.       height: 40px;
     
124.       outline: none;
     
125.       filter: invert(1) hue-rotate(180deg); /* 简单反转颜色以适配深色背景，视浏览器支持情况 */
     
126.       border-radius: 20px;
     
127.       background: rgba(255,255,255,0.1);
     
128.     "
     
129.     onplay="document.getElementById('disc-cover').style.animationPlayState='running'"
     
130.     onpause="document.getElementById('disc-cover').style.animationPlayState='paused'"
     
131.     >
     
132.       <!-- 请替换为你的音频文件直链 -->
     
133.       <source src="https://www.joy127.com/url/158258.mp3" type="audio/mpeg">
     
134.       您的浏览器不支持 audio 元素。
     
135.     </audio>
     
136. 
     
137.   </div>
     
138. 
     
139.   <!-- 内部样式定义 (部分论坛可能过滤 style 标签，若被过滤，以上内联样式已足够) -->
     
140.   <style>
     
141.     @keyframes rotate-disc {
     
142.       from { transform: rotate(0deg); }
     
143.       to { transform: rotate(360deg); }
     
144.     }
     
145.     /* 针对 Webkit 浏览器的音频控件微调 */
     
146.     audio::-webkit-media-controls-panel {
     
147.       background-color: rgba(255, 255, 255, 0.2);
     
148.     }
     
149.     audio::-webkit-media-controls-current-time-display,
     
150.     audio::-webkit-media-controls-time-remaining-display {
     
151.       color: white;
     
152.     }
     
153.   </style>
     
154. </div>

复制代码

风萧

B站多视频列表播放器

1. <!DOCTYPE html>
   
2. <html lang="zh-CN">
   
3. <head>
   
4.     <meta charset="UTF-8">
   
5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
   
6.     <title>B站多视频播放器</title>
   
7.     <style>
   
8.         /* 全局样式重置与基础设定 */
   
9.         .bili-player-container {
   
10.             font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    
11.             max-width: 800px;
    
12.             margin: 20px auto;
    
13.             background-color: #f4f5f7;
    
14.             border-radius: 8px;
    
15.             box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    
16.             overflow: hidden;
    
17.             border: 1px solid #e3e5e7;
    
18.         }
    
19. 
    
20.         /* 视频显示区域 */
    
21.         .video-stage {
    
22.             position: relative;
    
23.             width: 100%;
    
24.             padding-bottom: 56.25%; /* 16:9 比例 */
    
25.             background-color: #000;
    
26.             height: 0;
    
27.         }
    
28. 
    
29.         .video-stage iframe {
    
30.             position: absolute;
    
31.             top: 0;
    
32.             left: 0;
    
33.             width: 100%;
    
34.             height: 100%;
    
35.             border: none;
    
36.         }
    
37. 
    
38.         /* 播放列表区域 */
    
39.         .playlist-area {
    
40.             padding: 15px;
    
41.             background-color: #fff;
    
42.         }
    
43. 
    
44.         .playlist-header {
    
45.             font-size: 16px;
    
46.             font-weight: bold;
    
47.             color: #333;
    
48.             margin-bottom: 10px;
    
49.             padding-bottom: 10px;
    
50.             border-bottom: 1px solid #eee;
    
51.             display: flex;
    
52.             justify-content: space-between;
    
53.             align-items: center;
    
54.         }
    
55. 
    
56.         .playlist-count {
    
57.             font-size: 12px;
    
58.             color: #999;
    
59.             font-weight: normal;
    
60.         }
    
61. 
    
62.         /* 列表容器 */
    
63.         .video-list {
    
64.             list-style: none;
    
65.             padding: 0;
    
66.             margin: 0;
    
67.             max-height: 300px;
    
68.             overflow-y: auto;
    
69.         }
    
70. 
    
71.         /* 滚动条样式优化 */
    
72.         .video-list::-webkit-scrollbar {
    
73.             width: 6px;
    
74.         }
    
75.         .video-list::-webkit-scrollbar-thumb {
    
76.             background-color: #ccc;
    
77.             border-radius: 3px;
    
78.         }
    
79. 
    
80.         /* 单个视频项 */
    
81.         .video-item {
    
82.             display: flex;
    
83.             align-items: center;
    
84.             padding: 10px;
    
85.             cursor: pointer;
    
86.             transition: background-color 0.2s ease;
    
87.             border-radius: 4px;
    
88.             margin-bottom: 5px;
    
89.         }
    
90. 
    
91.         .video-item:hover {
    
92.             background-color: #f0f2f5;
    
93.         }
    
94. 
    
95.         .video-item.active {
    
96.             background-color: #e7f0ff;
    
97.             border-left: 4px solid #00a1d6;
    
98.         }
    
99. 
    
100.         .video-item.active .video-title {
     
101.             color: #00a1d6;
     
102.             font-weight: 600;
     
103.         }
     
104. 
     
105.         /* 序号 */
     
106.         .item-index {
     
107.             width: 24px;
     
108.             height: 24px;
     
109.             background-color: #999;
     
110.             color: #fff;
     
111.             border-radius: 50%;
     
112.             display: flex;
     
113.             align-items: center;
     
114.             justify-content: center;
     
115.             font-size: 12px;
     
116.             margin-right: 10px;
     
117.             flex-shrink: 0;
     
118.         }
     
119. 
     
120.         .video-item.active .item-index {
     
121.             background-color: #00a1d6;
     
122.         }
     
123. 
     
124.         /* 标题 */
     
125.         .video-title {
     
126.             font-size: 14px;
     
127.             color: #333;
     
128.             line-height: 1.4;
     
129.             overflow: hidden;
     
130.             text-overflow: ellipsis;
     
131.             white-space: nowrap;
     
132.             flex-grow: 1;
     
133.         }
     
134. 
     
135.         /* 提示信息 */
     
136.         .tips {
     
137.             font-size: 12px;
     
138.             color: #999;
     
139.             margin-top: 10px;
     
140.             text-align: right;
     
141.         }
     
142.     </style>
     
143. </head>
     
144. <body>
     
145. 
     
146. <div class="bili-player-container">
     
147.     <!-- 视频播放舞台 -->
     
148.     <div class="video-stage">
     
149.         <iframe id="mainPlayer" src="" allowfullscreen="true" allow="autoplay; encrypted-media"></iframe>
     
150.     </div>
     
151. 
     
152.     <!-- 播放列表 -->
     
153.     <div class="playlist-area">
     
154.         <div class="playlist-header">
     
155.             <span>精选视频列表</span>
     
156.             <span class="playlist-count" id="videoCount">共 0 个视频</span>
     
157.         </div>
     
158.         <ul class="video-list" id="videoList">
     
159.             <!-- 列表项将通过 JS 动态生成 -->
     
160.         </ul>
     
161.         <div class="tips">点击列表即可切换视频</div>
     
162.     </div>
     
163. </div>
     
164. 
     
165. <script>
     
166.     (function() {
     
167.         // ================= 配置区域 =================
     
168.         // 请在此处修改您的 B站视频 BV 号或 AV 号以及标题
     
169.         // bvid: B站视频的 BV 号 (推荐)
     
170.         // title: 显示在列表中的标题
     
171.         const videoData = [
     
172.             {
     
173.                 bvid: "BV1GJ411x7h7",
     
174.                 title: "示例视频1：B站首页宣传片"
     
175.             },
     
176.             {
     
177.                 bvid: "BV1xx411c7mD",
     
178.                 title: "示例视频2：如何制作高质量视频"
     
179.             },
     
180.             {
     
181.                 bvid: "BV1Ft411k7P6",
     
182.                 title: "示例视频3：Discuz论坛使用教程"
     
183.             },
     
184.             {
     
185.                 bvid: "BV1Kb411W75N",
     
186.                 title: "示例视频4：Web前端开发基础"
     
187.             }
     
188.         ];
     
189.         // ===========================================
     
190. 
     
191.         const playerIframe = document.getElementById('mainPlayer');
     
192.         const listContainer = document.getElementById('videoList');
     
193.         const countLabel = document.getElementById('videoCount');
     
194.         let currentIndex = 0;
     
195. 
     
196.         // 初始化播放器
     
197.         function initPlayer() {
     
198.             if (!videoData || videoData.length === 0) {
     
199.                 listContainer.innerHTML = '<li style="padding:10px;color:#999;text-align:center;">暂无视频数据</li>';
     
200.                 return;
     
201.             }
     
202. 
     
203.             countLabel.textContent = `共 ${videoData.length} 个视频`;
     
204.             renderList();
     
205.             loadVideo(0);
     
206.         }
     
207. 
     
208.         // 渲染列表
     
209.         function renderList() {
     
210.             listContainer.innerHTML = '';
     
211.             videoData.forEach((video, index) => {
     
212.                 const li = document.createElement('li');
     
213.                 li.className = 'video-item';
     
214.                 li.dataset.index = index;
     
215.                
     
216.                 // 构建 HTML 结构
     
217.                 li.innerHTML = `
     
218.                     <div class="item-index">${index + 1}</div>
     
219.                     <div class="video-title" title="${video.title}">${video.title}</div>
     
220.                 `;
     
221. 
     
222.                 // 点击事件
     
223.                 li.addEventListener('click', function() {
     
224.                     loadVideo(index);
     
225.                 });
     
226. 
     
227.                 listContainer.appendChild(li);
     
228.             });
     
229.         }
     
230. 
     
231.         // 加载指定索引的视频
     
232.         function loadVideo(index) {
     
233.             if (index < 0 || index >= videoData.length) return;
     
234. 
     
235.             currentIndex = index;
     
236.             const video = videoData[index];
     
237.             
     
238.             // 更新 iframe 源地址
     
239.             // 使用 B站嵌入式播放器地址
     
240.             playerIframe.src = `//player.bilibili.com/player.html?bvid=${video.bvid}&page=1&high_quality=1&danmaku=0`;
     
241. 
     
242.             // 更新列表激活状态
     
243.             const items = listContainer.querySelectorAll('.video-item');
     
244.             items.forEach((item, i) => {
     
245.                 if (i === index) {
     
246.                     item.classList.add('active');
     
247.                     // 确保激活项在可视区域
     
248.                     item.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
     
249.                 } else {
     
250.                     item.classList.remove('active');
     
251.                 }
     
252.             });
     
253.         }
     
254. 
     
255.         // 启动
     
256.         initPlayer();
     
257.     })();
     
258. </script>
     
259. 
     
260. </body>
     
261. </html>

复制代码

风萧

支持m3u8格式的多视频选集播放器代码

1. <!DOCTYPE html>
   
2. <html lang="zh-CN">
   
3. <head>
   
4.     <meta charset="UTF-8">
   
5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
   
6.     <title>Discuz M3U8 分集播放器</title>
   
7.     <!-- 引入 TailwindCSS -->
   
8.     <script src="https://cdn.tailwindcss.com"></script>
   
9.     <script>
   
10.         tailwind.config = {
    
11.         corePlugins: {
    
12.         preflight: false, // 关闭Tailwind的全局重置样式，避免覆盖Discuz原有页面样式
    
13.                      }
    
14.         }
    
15.     </script>
    
16.     <!-- 引入 Font Awesome -->
    
17.     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
18.     <!-- 引入 Hls.js -->
    
19.     <script src="https://cdn.jsdelivr.net/npm/hls.js@latest/dist/hls.min.js"></script>
    
20.     <style>
    
21.         /* 自定义滚动条样式 */
    
22.         .episode-scroll::-webkit-scrollbar {
    
23.             width: 6px;
    
24.             height: 6px;
    
25.         }
    
26.         .episode-scroll::-webkit-scrollbar-track {
    
27.             background: #f1f1f1;
    
28.             border-radius: 3px;
    
29.         }
    
30.         .episode-scroll::-webkit-scrollbar-thumb {
    
31.             background: #cbd5e1;
    
32.             border-radius: 3px;
    
33.         }
    
34.         .episode-scroll::-webkit-scrollbar-thumb:hover {
    
35.             background: #94a3b8;
    
36.         }
    
37.         /* 选中状态动画 */
    
38.         .episode-btn.active {
    
39.             background-color: #3b82f6;
    
40.             color: white;
    
41.             border-color: #3b82f6;
    
42.         }
    
43.         /* 加载动画 */
    
44.         .loader {
    
45.             border: 3px solid #f3f3f3;
    
46.             border-radius: 50%;
    
47.             border-top: 3px solid #3b82f6;
    
48.             width: 24px;
    
49.             height: 24px;
    
50.             -webkit-animation: spin 1s linear infinite; /* Safari */
    
51.             animation: spin 1s linear infinite;
    
52.         }
    
53.         @keyframes spin {
    
54.             0% { transform: rotate(0deg); }
    
55.             100% { transform: rotate(360deg); }
    
56.         }
    
57.     </style>
    
58. </head>
    
59. <body class="bg-gray-100 p-4 font-sans">
    
60. 
    
61.     <!-- 播放器容器 -->
    
62.     <div id="dz-video-player-container" class="max-w-4xl mx-auto bg-white rounded-xl shadow-lg overflow-hidden border border-gray-200" style="isolation: isolate;">
    
63.         
    
64.         <!-- 视频区域 -->
    
65.         <div class="relative w-full aspect-video bg-black group">
    
66.             <video id="dz-video-element" class="w-full h-full object-contain" controls playsinline poster="/data/attachment/album/202608/31/200711vfnhzq7opn8dqp00.jpg"></video>
    
67.             
    
68.             <!-- 加载指示器 -->
    
69.             <div id="dz-loading-indicator" class="absolute inset-0 flex items-center justify-center bg-black/50 hidden z-10">
    
70.                 <div class="loader"></div>
    
71.             </div>
    
72. 
    
73.             <!-- 错误提示层 -->
    
74.             <div id="dz-error-overlay" class="absolute inset-0 flex flex-col items-center justify-center bg-black/80 text-white hidden z-20">
    
75.                 <i class="fas fa-exclamation-triangle text-4xl mb-2 text-red-500"></i>
    
76.                 <p class="text-sm">视频加载失败，请检查网络或链接有效性</p>
    
77.                 <button onclick="retryLoad()" class="mt-4 px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded text-sm transition">重试</button>
    
78.             </div>
    
79.         </div>
    
80. 
    
81.         <!-- 控制面板：标题与分集 -->
    
82.         <div class="p-4 bg-white">
    
83.             <div class="flex justify-between items-center mb-4 border-b pb-2">
    
84.                 <h2 id="dz-video-title" class="text-lg font-bold text-gray-800 truncate pr-4">正在播放：第 1 集</h2>
    
85.                 <!-- div class="text-xs text-gray-500 flex items-center gap-2">
    
86.                     <span id="dz-quality-badge" class="px-2 py-1 bg-gray-100 rounded text-gray-600">HD</span>
    
87.                     <span id="dz-duration">00:00</span>
    
88.                 </div -->
    
89.             </div>
    
90. 
    
91.             <!-- 分集列表 -->
    
92.             <div class="mb-2 flex justify-between items-center">
    
93.                 <span class="text-sm font-semibold text-gray-700"><i class="fas fa-list-ul mr-1"></i> 选集</span>
    
94.                 <div class="flex gap-2">
    
95.                      <button onclick="toggleOrder()" class="text-xs text-blue-600 hover:text-blue-800 flex items-center gap-1">
    
96.                         <i class="fas fa-sort-amount-down" id="sort-icon"></i> <span id="sort-text">倒序</span>
    
97.                     </button>
    
98.                 </div>
    
99.             </div>
    
100.             
     
101.             <div id="dz-episode-list" class="grid grid-cols-4 sm:grid-cols-6 md:grid-cols-8 gap-2 max-h-40 overflow-y-auto episode-scroll p-1">
     
102.                 <!-- 分集按钮将通过 JS 动态生成 -->
     
103.             </div>
     
104.         </div>
     
105.     </div>
     
106. 
     
107.     <script>
     
108.         /**
     
109.          * Discuz M3U8 Player Configuration
     
110.          * 在 Discuz 发帖时，只需修改此处的 videoData 数组即可
     
111.          */
     
112.         const videoData = [
     
113.             { title: "HD国语版", url: "https://yzzy21.playback-speed.com/20240410/29373_4da7f681/index.m3u8" }
     
114.         ];
     
115. 
     
116.         // 全局变量
     
117.         let hls = null;
     
118.         let currentEpisodeIndex = 0;
     
119.         let isReversed = false;
     
120.         let displayedData = [...videoData];
     
121.         const videoElement = document.getElementById('dz-video-element');
     
122.         const episodeListContainer = document.getElementById('dz-episode-list');
     
123.         const loadingIndicator = document.getElementById('dz-loading-indicator');
     
124.         const errorOverlay = document.getElementById('dz-error-overlay');
     
125.         const titleElement = document.getElementById('dz-video-title');
     
126.         const durationElement = document.getElementById('dz-duration');
     
127. 
     
128.         /**
     
129.          * 初始化播放器
     
130.          */
     
131.         function initPlayer() {
     
132.             renderEpisodes();
     
133.             loadEpisode(0); // 默认加载第一集
     
134.             
     
135.             // 监听视频元数据加载完成，更新时长显示
     
136.             videoElement.addEventListener('loadedmetadata', () => {
     
137.                 durationElement.innerText = formatTime(videoElement.duration);
     
138.             });
     
139. 
     
140.             // 监听播放结束，自动下一集
     
141.             videoElement.addEventListener('ended', () => {
     
142.                 playNext();
     
143.             });
     
144.         }
     
145. 
     
146.         /**
     
147.          * 渲染分集列表
     
148.          */
     
149.         function renderEpisodes() {
     
150.             episodeListContainer.innerHTML = '';
     
151.             displayedData.forEach((item, index) => {
     
152.                 // 找到原始数据中的真实索引，用于点击事件
     
153.                 const originalIndex = videoData.indexOf(item);
     
154.                
     
155.                 const btn = document.createElement('button');
     
156.                 btn.className = `episode-btn px-3 py-2 text-xs font-medium rounded border border-gray-200 text-gray-700 hover:bg-blue-50 hover:border-blue-200 transition-all truncate ${originalIndex === currentEpisodeIndex ? 'active' : ''}`;
     
157.                 btn.innerText = item.title;
     
158.                 btn.onclick = () => loadEpisode(originalIndex);
     
159.                 episodeListContainer.appendChild(btn);
     
160.             });
     
161.         }
     
162. 
     
163.         /**
     
164.          * 加载指定集数
     
165.          * @param {number} index - 原始数据数组中的索引
     
166.          */
     
167.         function loadEpisode(index) {
     
168.             if (index < 0 || index >= videoData.length) return;
     
169. 
     
170.             currentEpisodeIndex = index;
     
171.             const data = videoData[index];
     
172.             
     
173.             // 更新UI状态
     
174.             updateActiveButton();
     
175.             titleElement.innerText = `正在播放：${data.title}`;
     
176.             showLoading(true);
     
177.             hideError();
     
178. 
     
179.             // 销毁旧的 HLS 实例
     
180.             if (hls) {
     
181.                 hls.destroy();
     
182.             }
     
183. 
     
184.             // 创建新的 HLS 实例
     
185.             if (Hls.isSupported()) {
     
186.                 hls = new Hls({
     
187.                     debug: false,
     
188.                     enableWorker: true,
     
189.                     lowLatencyMode: true,
     
190.                     backBufferLength: 90
     
191.                 });
     
192. 
     
193.                 hls.loadSource(data.url);
     
194.                 hls.attachMedia(videoElement);
     
195. 
     
196.                 hls.on(Hls.Events.MANIFEST_PARSED, function() {
     
197.                     videoElement.play().catch(e => console.log("Auto-play prevented:", e));
     
198.                     showLoading(false);
     
199.                 });
     
200. 
     
201.                 hls.on(Hls.Events.ERROR, function(event, data) {
     
202.                     if (data.fatal) {
     
203.                         switch(data.type) {
     
204.                             case Hls.ErrorTypes.NETWORK_ERROR:
     
205.                                 console.log("fatal network error encountered, try to recover");
     
206.                                 hls.startLoad();
     
207.                                 break;
     
208.                             case Hls.ErrorTypes.MEDIA_ERROR:
     
209.                                 console.log("fatal media error encountered, try to recover");
     
210.                                 hls.recoverMediaError();
     
211.                                 break;
     
212.                             default:
     
213.                                 showError();
     
214.                                 hls.destroy();
     
215.                                 break;
     
216.                         }
     
217.                     }
     
218.                 });
     
219. 
     
220.             } else if (videoElement.canPlayType('application/vnd.apple.mpegurl')) {
     
221.                 // Safari 原生支持
     
222.                 videoElement.src = data.url;
     
223.                 videoElement.addEventListener('loadedmetadata', function() {
     
224.                     videoElement.play();
     
225.                     showLoading(false);
     
226.                 });
     
227.             } else {
     
228.                 showError();
     
229.             }
     
230.         }
     
231. 
     
232.         /**
     
233.          * 更新按钮激活状态
     
234.          */
     
235.         function updateActiveButton() {
     
236.             const buttons = episodeListContainer.querySelectorAll('.episode-btn');
     
237.             buttons.forEach((btn, idx) => {
     
238.                 // 注意：displayedData 可能是反转的，所以需要比对内容或重新映射
     
239.                 // 这里简单起见，我们重新渲染或者通过文本匹配，但更优解是重新渲染
     
240.                 // 为了性能，我们直接重新渲染整个列表是最安全的，因为列表通常不长
     
241.                 renderEpisodes();
     
242.             });
     
243.         }
     
244. 
     
245.         /**
     
246.          * 播放下一集
     
247.          */
     
248.         function playNext() {
     
249.             if (currentEpisodeIndex < videoData.length - 1) {
     
250.                 loadEpisode(currentEpisodeIndex + 1);
     
251.                 // 滚动到当前选中的按钮
     
252.                 setTimeout(() => {
     
253.                     const activeBtn = document.querySelector('.episode-btn.active');
     
254.                     if(activeBtn) activeBtn.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
     
255.                 }, 100);
     
256.             }
     
257.         }
     
258. 
     
259.         /**
     
260.          * 切换排序（正序/倒序）
     
261.          */
     
262.         function toggleOrder() {
     
263.             isReversed = !isReversed;
     
264.             const sortIcon = document.getElementById('sort-icon');
     
265.             const sortText = document.getElementById('sort-text');
     
266.             
     
267.             if (isReversed) {
     
268.                 displayedData = [...videoData].reverse();
     
269.                 sortIcon.className = "fas fa-sort-amount-up";
     
270.                 sortText.innerText = "正序";
     
271.             } else {
     
272.                 displayedData = [...videoData];
     
273.                 sortIcon.className = "fas fa-sort-amount-down";
     
274.                 sortText.innerText = "倒序";
     
275.             }
     
276.             renderEpisodes();
     
277.         }
     
278. 
     
279.         /**
     
280.          * 重试加载
     
281.          */
     
282.         function retryLoad() {
     
283.             loadEpisode(currentEpisodeIndex);
     
284.         }
     
285. 
     
286.         /**
     
287.          * UI 辅助函数
     
288.          */
     
289.         function showLoading(show) {
     
290.             loadingIndicator.classList.toggle('hidden', !show);
     
291.         }
     
292. 
     
293.         function showError() {
     
294.             errorOverlay.classList.remove('hidden');
     
295.             showLoading(false);
     
296.         }
     
297. 
     
298.         function hideError() {
     
299.             errorOverlay.classList.add('hidden');
     
300.         }
     
301. 
     
302.         function formatTime(seconds) {
     
303.             if (isNaN(seconds)) return "00:00";
     
304.             const m = Math.floor(seconds / 60);
     
305.             const s = Math.floor(seconds % 60);
     
306.             return `${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`;
     
307.         }
     
308. 
     
309.         // 启动
     
310.         document.addEventListener('DOMContentLoaded', initPlayer);
     
311. 
     
312.     </script>
     
313. </body>
     
314. </html>

复制代码