Spaces:
Running
Running
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /> | |
| <style> | |
| body { | |
| --bg-color: var(--tg-theme-bg-color); | |
| font: 12px/18px "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Verdana, sans-serif; | |
| background-color: var(--bg-color); | |
| color: var(--tg-theme-text-color); | |
| margin: 48px 24px; | |
| padding: 0; | |
| color-scheme: var(--tg-color-scheme); | |
| display: flex; | |
| flex-direction: column; | |
| align-items: left; | |
| width: 88%; | |
| } | |
| a { | |
| color: var(--tg-theme-link-color); | |
| } | |
| p { | |
| color: color: var(--tg-theme-text-color); | |
| } | |
| h3 { | |
| color: color: var(--tg-theme-text-color); | |
| } | |
| #viewport { | |
| position: fixed; | |
| left: 0; | |
| right: 0; | |
| top: 0; | |
| height: var(--tg-viewport-stable-height, 100vh); | |
| pointer-events: none; | |
| transition: all .2s ease; | |
| } | |
| #viewport:after { | |
| content: ''; | |
| display: block; | |
| position: absolute; | |
| left: 0; | |
| right: 0; | |
| top: 0; | |
| bottom: 0; | |
| border-width: 4px; | |
| border-style: solid; | |
| border-image: linear-gradient(45deg, rgba(64, 224, 208, .5), rgba(173, 255, 47, .5)) 1; | |
| } | |
| #viewport-params-size, | |
| #viewport-params-expand { | |
| content: attr(text); | |
| position: absolute; | |
| display: inline-block; | |
| background: var(--tg-theme-link-color, rgb(64, 224, 208)); | |
| right: 4px; | |
| left: auto; | |
| font-size: 8px; | |
| padding: 4px; | |
| vertical-align: top; | |
| } | |
| #viewport-params-size { | |
| top: 4px; | |
| } | |
| #viewport-params-expand { | |
| top: 30px; | |
| } | |
| </style> | |
| <script src="/assets/ffmpeg/package/dist/umd/ffmpeg.js"></script> | |
| <script src="/assets/util/package/dist/umd/index.js"></script> | |
| <script src="https://telegram.org/js/telegram-web-app.js"></script> | |
| </head> | |
| <body> | |
| <h3>Upload a mp4 (x264) video and trim it!</h3> | |
| <input type="text" id="startTime" style="height: 50px" placeholder="Start Time (second)">Start Time | |
| <input type="text" id="endTime" style="height: 50px" placeholder="End Time (second)">End Time | |
| <input type="file" id="uploader" style="height: 50px" > | |
| <button id="downloadButton" style="display:none;height: 50px" >download</button> | |
| <a id="downloadLink" style="display:none;">download</a> | |
| <video id="output-video" style="display:none;" controls></video><br/> | |
| <p id="message">先填写开始结束时间(秒数),然后选择文件,选择完文件就开始分割视频,手机上挺慢的 | |
| <br>最好使用chrome浏览器,完成后会显示下载按钮<br></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'); | |
| message1.innerHTML = '任务开始,请耐心等待'; | |
| 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} %`; | |
| }); | |
| message1.innerHTML = message1.innerHTML + "<br>" + '下载ffmpeg-wasm-core文件,请耐心等待'; | |
| 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 = message1.innerHTML + "<br>" + '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.style.display = 'inline'; | |
| 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> | |
| <!-- <!-- Eruda is console for mobile browsers --> --> | |
| <!-- <script src="https://cdn.jsdelivr.net/npm/eruda"></script> --> | |
| <!-- <script>eruda.init();</script> --> | |
| </body> | |
| </html> | |