feat: 添加HEVC转H.264播放器和打字机效果页面

添加HEVC转H.264播放器功能，包含文件选择、转码进度显示和视频播放新增打字机效果展示页面，使用Vue实现逐字显示效果
2025-07-25 18:49:11 +08:00
parent 15cf9c3041
commit 047ddd57f6
4 changed files with 778 additions and 181 deletions
--- a/1.html
+++ b/1.html
@@ -1,26 +1,49 @@
 <!DOCTYPE html>
-<html lang="en">
+<html>
    <head>
-        <meta charset="UTF-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>EasyWasmPlayer-Demo</title>
-        <script src="./EasyWasmPlayer.js"></script>
+        <title>HEVC转H.264播放器</title>
        <style>
-            .box {
-                width: 600px;
-                height: 400px;
+            .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>
    </head>
    <body>
-        <div class="box">
-            <div id="Player"></div>
+        <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>
-            // 实例化播放器
-            var Player = new WasmPlayer(null, "Player", callbackFun, { cbUserPtr: this, decodeType: "auto", openAudio: 1, BigPlay: false, Height: true });
-            // 调用播放
-            Player.play("url", 1);
-        </script>
+
+        <!-- 引入核心脚本 -->
+        <script src="hevc-to-h264-player.js"></script>
    </body>
 </html>