Spaces:

nicehero
/

ManualMask

Running

App Files Files Community

nicehero commited on Aug 20, 2024

Commit

05d832a

1 Parent(s): 7698ac4

trim.html

Browse files

Files changed (1) hide show

trim.html +60 -29

trim.html CHANGED Viewed

@@ -5,41 +5,72 @@
     <script src="/assets/util/package/dist/umd/index.js"></script>
   </head>
   <body>
-    <h3>Upload a mp4 (x264) video and trim its first 1 seconds and play!</h3>
-    <video id="output-video" controls></video><br/>
     <input type="file" id="uploader">
     <p id="message"></p>
     <script>
-      const { fetchFile } = FFmpegUtil;
-      const { FFmpeg } = FFmpegWASM;
-      let ffmpeg = null;
-      const trim = async ({ target: { files } }) => {
-        const message = document.getElementById('message');
-        if (ffmpeg === null) {
-          ffmpeg = new FFmpeg();
-          ffmpeg.on("log", ({ message }) => {
-            console.log(message);
-          })
-          ffmpeg.on("progress", ({ progress }) => {
-            message.innerHTML = `${progress * 100} %`;
-          });
-          await ffmpeg.load({
-            coreURL: "/assets/core/package/dist/umd/ffmpeg-core.js",
-          });
         }
-        const { name } = files[0];
-        await ffmpeg.writeFile(name, await fetchFile(files[0]));
-        message.innerHTML = 'Start trimming';
-        await ffmpeg.exec(['-i', name, '-ss', '0', '-to', '1', 'output.mp4']);
-        message.innerHTML = 'Complete trimming';
-        const data = await ffmpeg.readFile('output.mp4');
-        const video = document.getElementById('output-video');
-        video.src = URL.createObjectURL(new Blob([data.buffer], { type: 'video/mp4' }));
-      }
-      const elm = document.getElementById('uploader');
-      elm.addEventListener('change', trim);
     </script>
   </body>
 </html>

     <script src="/assets/util/package/dist/umd/index.js"></script>
   </head>
   <body>
+    <h3>Upload a mp4 (x264) video and trim it!</h3>
+    <input type="text" id="startTime" placeholder="Start Time (second)">Start Time
+    <input type="text" id="endTime" placeholder="End Time (second)">End Time
     <input type="file" id="uploader">
+    <button id="downloadButton" style="display:none;" >download</button>
+    <a id="downloadLink" style="display:none;">download</a>
+    <video id="output-video" controls></video><br/>
     <p id="message"></p>
     <script>
+        function generateRandomFileName() {
+            var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+            var length = 10; // 文件名长度
+            var fileName = '';
+            for (var i = 0; i < length; i++) {
+                var randomIndex = Math.floor(Math.random() * characters.length);
+                fileName += characters.charAt(randomIndex);
+            }
+            return fileName;
+        }
+        const { fetchFile } = FFmpegUtil;
+        const { FFmpeg } = FFmpegWASM;
+        let ffmpeg = null;
+        const trim = async ({ target: { files } }) => {
+            const message1 = document.getElementById('message');
+            if (ffmpeg === null) {
+              ffmpeg = new FFmpeg();
+              ffmpeg.on("log", ({ message }) => {
+                console.log(message);
+                message1.innerHTML = message1.innerHTML + "<br>" + message;
+              })
+              ffmpeg.on("progress", ({ progress }) => {
+                //message1.innerHTML = `load ffmpeg.wasm ${progress * 100} %`;
+              });
+              await ffmpeg.load({
+                coreURL: "/assets/core/package/dist/umd/ffmpeg-core.js",
+              });
+            }
+            const start = document.getElementById('startTime').value;
+            const end = document.getElementById('endTime').value;
+            const { name } = files[0];
+            await ffmpeg.writeFile(name, await fetchFile(files[0]));
+            message1.innerHTML = 'Start trimming';
+            await ffmpeg.exec(['-i', name, '-ss', start, '-to', end, 'output.mp4']);
+            message1.innerHTML = message1.innerHTML + "<br>" + 'Complete trimming';
+            const data = await ffmpeg.readFile('output.mp4');
+            const video = document.getElementById('output-video');
+            video.src = URL.createObjectURL(new Blob([data.buffer], { type: 'video/mp4' }));
+            const downloadButton = document.getElementById('downloadButton');
+            downloadButton.style.display = 'inline'; // 显示下载链接
         }
+        document.getElementById('downloadButton').addEventListener('click', function() {
+            const video = document.getElementById('output-video');
+            const downloadLink = document.getElementById('downloadLink');
+            // 设置下载链接
+            downloadLink.href = video.src;
+            downloadLink.innerText = '下载视频';
+            downloadLink.download = 'trim_' + generateRandomFileName() + '.mp4';
+            downloadLink.style.display = 'inline'; // 显示下载链接
+            downloadLink.click();
+        });
+        const elm = document.getElementById('uploader');
+        elm.addEventListener('change', trim);
     </script>
   </body>
 </html>