DanMuWebPlayer/index.html at main · hexwarrior6/DanMuWebPlayer · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="msvalidate.01" content="4D03600B40D23241A5C02308C3F6E864" />
    <link rel="icon" href="favicon.png" type="image/x-icon">
    <title>本地弹幕播放器</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/dplayer/1.27.0/DPlayer.min.css ">
    <link rel="stylesheet" href="style.css">
    <script type="text/javascript">
        (function (c, l, a, r, i, t, y) {
            c[a] = c[a] || function () { (c[a].q = c[a].q || []).push(arguments) };
            t = l.createElement(r); t.async = 1; t.src = "https://www.clarity.ms/tag/" + i;
            y = l.getElementsByTagName(r)[0]; y.parentNode.insertBefore(t, y);
        })(window, document, "clarity", "script", "srhuizxznt");
    </script>
</head>

<body>
    <div class="main-layout">
        <div class="player-card">
            <h1 style="margin-top: 0;">本地弹幕播放器</h1>
            <div id="dplayer">
                <div id="video-placeholder">
                    <div class="icon">▶️</div>
                    <div>请先选择本地视频文件</div>
                </div>
            </div>

            <div class="progress-container" id="progressContainer">
                <progress id="loadProgress" value="0" max="100"></progress>
                <div id="progressText">加载中: 0%</div>
            </div>
            <div class="status" id="status">等待加载视频和弹幕...</div>
        </div>
        <div class="info-card">
            <img class="avatar" src="favicon.png" alt="favicon">
            <div style="text-align: center; margin: 15px 0; display: flex; justify-content: center; gap: 8px;">
                <a href=" https://github.com/hexwarrior6/DanMuWebPlayer " target="_blank"
                    style="padding: 8px 16px; background-color: #24292e; color: white; text-decoration: none; border-radius: 8px;">
                    ⭐ Star on GitHub
                </a>
                <a href="https://docs.qq.com/aio/p/sch8dr6ly9ajte9?p=NSA0My9Rm3rACf4atrT2nH" target="_blank"
                    style="padding: 8px 16px; background-color: #0078d4; color: white; text-decoration: none; border-radius: 8px;">
                    📄 说明文档
                </a>
            </div>
            <div class="info-detail">本地弹幕播放器，支持本地视频、m3u8直播流与弹幕文件播放。</div> <!-- 精简描述 -->
            <div class="info-section">
                <b>使用方法：</b>
                <!-- 保持 ul 样式或根据需要调整 -->
                <ul style="padding-left: 0; margin: 8px 0 0 0; color: #444; font-size: 14px; text-align: center;">
                    <li>选择本地视频和弹幕文件</li>
                    <li>或输入m3u8直播源地址</li>
                    <li>播放视频/直播即可实时显示弹幕</li>
                </ul>
            </div>

            <!-- 弹幕速度调节滑块 -->
            <div class="info-section">
                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
                    <b>弹幕速度：</b>
                    <span id="speedValue">1.0</span>
                </div>
                <input type="range" id="speedSlider" min="0.1" max="2" step="0.1" value="1">
            </div>

            <!-- 上传视频区域 -->
            <div class="info-section">
                <b>视频源(任选一种)：</b>
                <div class="file-control-group"> <!-- 应用新类 -->
                    <label for="videoFile" class="file-label">选择本地视频文件</label> <!-- 移除内联 width -->
                    <input type="file" id="videoFile" class="file-input" accept="video/*">
                </div>
                <div class="input-group-container">
                    <input type="text" id="liveStreamInput" placeholder="m3u8直播源地址" class="file-input-style">
                    <button id="loadLiveStreamBtn" class="danmu-fetch-btn">加载</button>
                </div>
            </div>

            <!-- 上传弹幕区域 -->
            <div class="info-section">
                <b>弹幕源(任选一种)：</b>
                <div class="file-control-group"> <!-- 应用新类 -->
                    <label for="danmuFileXml" class="file-label">标准XML弹幕</label> <!-- 移除内联 width -->
                    <input type="file" id="danmuFileXml" class="file-input" accept=".xml">
                    <label for="danmuFileJson" class="file-label">人人视频JSON弹幕</label> <!-- 移除内联 width -->
                    <input type="file" id="danmuFileJson" class="file-input" accept=".json">
                    <!-- 应用新容器类，移除内联样式 -->
                    <div class="input-group-container">
                        <input type="text" id="rrmjDanmuIdInput" placeholder="输入人人视频弹幕ID" class="file-input-style">
                        <button id="rrmjDanmuFetchBtn" class="danmu-fetch-btn">获取</button> <!-- 移除内联 style -->
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 引入必要的库 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/dplayer/1.27.0/DPlayer.min.js "></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/hls.js/1.5.18/hls.min.js "></script>
    <!-- 引入自定义脚本 -->
    <script src="script.js"></script>
</body>

</html>