refactor(ui): 重构箭头图标布局和样式

优化箭头图标的布局方式，将直接定位改为通过容器相对定位修复箭头图标在不同状态下的对齐问题调整专业名称的显示样式防止换行
2025-08-11 18:57:33 +08:00
parent 047ddd57f6
commit 0e5f3f32cf
5 changed files with 7619 additions and 70 deletions
--- a/1.html
+++ b/1.html
@@ -1,49 +1,51 @@
 <!DOCTYPE html>
 <html>
    <head>
-        <title>HEVC转H.264播放器</title>
-        <style>
-            .container {
-                max-width: 1000px;
-                margin: 20px auto;
-                padding: 20px;
-            }
-            .progress-container {
-                height: 8px;
-                background: #eee;
-                border-radius: 4px;
-                margin: 10px 0;
-            }
-            #progressBar {
-                height: 100%;
-                background: #4285f4;
-                width: 0%;
-            }
-            #videoContainer {
-                width: 100%;
-                background: #000;
-                border-radius: 8px;
-                overflow: hidden;
-                position: relative;
-                min-height: 300px;
-            }
-            video {
-                width: 100%;
-            }
-        </style>
+        <meta charset="UTF-8" />
+        <title>H.265 硬解码 (WebCodecs)</title>
    </head>
    <body>
-        <div class="container">
-            <h1>HEVC转H.264播放器</h1>
-            <input type="file" id="hevcFileInput" accept="video/*" />
-            <div id="conversionStatus">请选择HEVC编码的视频文件</div>
-            <div class="progress-container">
-                <div id="progressBar"></div>
-            </div>
-            <div id="videoContainer"></div>
-        </div>
+        <script src="https://unpkg.com/@ffmpeg/ffmpeg@0.10.0/dist/ffmpeg.min.js"></script>

-        <!-- 引入核心脚本 -->
-        <script src="hevc-to-h264-player.js"></script>
+        <canvas id="canvas" width="1280" height="720"></canvas>
+        <script>
+            const { createFFmpeg, fetchFile } = FFmpeg;
+            const ffmpeg = createFFmpeg({ log: true });
+
+            async function transcodeToH265(inputFile) {
+                // 确保FFmpeg加载
+                if (!ffmpeg.isLoaded()) {
+                    await ffmpeg.load();
+                }
+
+                // 将输入文件写入FFmpeg的文件系统
+                ffmpeg.FS("writeFile", "input.mp4", await fetchFile(inputFile));
+
+                // 执行转码命令：将输入文件转码为H.265编码，输出为output.mp4
+                await ffmpeg.run("-i", "input.mp4", "-c:v", "libx265", "output.mp4");
+
+                // 从FFmpeg文件系统中读取输出文件
+                const data = ffmpeg.FS("readFile", "output.mp4");
+
+                // 创建Blob和URL以供下载
+                const outputUrl = URL.createObjectURL(new Blob([data.buffer], { type: "video/mp4" }));
+                return outputUrl;
+            }
+
+            // 使用示例：当用户选择文件后
+            document.getElementById("fileInput").addEventListener("change", async (e) => {
+                const file = e.target.files[0];
+                if (!file) return;
+
+                const outputUrl = await transcodeToH265(file);
+                // 创建一个下载链接
+                const a = document.createElement("a");
+                a.href = outputUrl;
+                a.download = "output_h265.mp4";
+                document.body.appendChild(a);
+                a.click();
+                document.body.removeChild(a);
+            });
+        </script>
    </body>
 </html>