nicehero/ManualMask
1
1<html>2 <head>3 <meta charset="UTF-8">4 <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />5 <style>6 body {7 --bg-color: var(--tg-theme-bg-color);8 font: 12px/18px "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Verdana, sans-serif;9 background-color: var(--bg-color);10 color: var(--tg-theme-text-color);11 margin: 48px 24px;12 padding: 0;13 color-scheme: var(--tg-color-scheme);14 display: flex;15 flex-direction: column;16 align-items: left;17 width: 88%;18 }19 20 a {21 color: var(--tg-theme-link-color);22 }23 p {24 color: color: var(--tg-theme-text-color);25 }26 h3 {27 color: color: var(--tg-theme-text-color);28 }29 #viewport {30 position: fixed;31 left: 0;32 right: 0;33 top: 0;34 height: var(--tg-viewport-stable-height, 100vh);35 pointer-events: none;36 transition: all .2s ease;37 }38 #viewport:after {39 content: '';40 display: block;41 position: absolute;42 left: 0;43 right: 0;44 top: 0;45 bottom: 0;46 border-width: 4px;47 border-style: solid;48 border-image: linear-gradient(45deg, rgba(64, 224, 208, .5), rgba(173, 255, 47, .5)) 1;49 }50 51 #viewport-params-size,52 #viewport-params-expand {53 content: attr(text);54 position: absolute;55 display: inline-block;56 background: var(--tg-theme-link-color, rgb(64, 224, 208));57 right: 4px;58 left: auto;59 font-size: 8px;60 padding: 4px;61 vertical-align: top;62 }63 #viewport-params-size {64 top: 4px;65 }66 #viewport-params-expand {67 top: 30px;68 }69 </style>70 <script src="/assets/ffmpeg/package/dist/umd/ffmpeg.js"></script>71 <script src="/assets/util/package/dist/umd/index.js"></script>72 <script src="https://telegram.org/js/telegram-web-app.js"></script>73 </head>74 <body>75 <h3>Upload a mp4 (x264) video and trim it!</h3>76 <input type="text" id="startTime" style="height: 50px" placeholder="Start Time (second)">Start Time77 <input type="text" id="endTime" style="height: 50px" placeholder="End Time (second)">End Time78 <input type="file" id="uploader" style="height: 50px" >79 <button id="downloadButton" style="display:none;height: 50px" >download</button>80 <a id="downloadLink" style="display:none;">download</a>81 <video id="output-video" style="display:none;" controls></video><br/>82 <p id="message">先填写开始结束时间(秒数),然后选择文件,选择完文件就开始分割视频,手机上挺慢的83 <br>最好使用chrome浏览器,完成后会显示下载按钮<br></p>84 <script>85 function generateRandomFileName() {86 var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';87 var length = 10; // 文件名长度88 var fileName = '';89 for (var i = 0; i < length; i++) {90 var randomIndex = Math.floor(Math.random() * characters.length);91 fileName += characters.charAt(randomIndex);92 }93 return fileName;94 }95 const { fetchFile } = FFmpegUtil;96 const { FFmpeg } = FFmpegWASM;97 let ffmpeg = null;98 const trim = async ({ target: { files } }) => {99 const message1 = document.getElementById('message');100 message1.innerHTML = '任务开始,请耐心等待';101 if (ffmpeg === null) {102 ffmpeg = new FFmpeg();103 ffmpeg.on("log", ({ message }) => {104 console.log(message);105 message1.innerHTML = message1.innerHTML + "<br>" + message;106 })107 ffmpeg.on("progress", ({ progress }) => {108 //message1.innerHTML = `load ffmpeg.wasm ${progress * 100} %`;109 });110 message1.innerHTML = message1.innerHTML + "<br>" + '下载ffmpeg-wasm-core文件,请耐心等待';111 await ffmpeg.load({112 coreURL: "/assets/core/package/dist/umd/ffmpeg-core.js",113 });114 }115 const start = document.getElementById('startTime').value;116 const end = document.getElementById('endTime').value;117 const { name } = files[0];118 await ffmpeg.writeFile(name, await fetchFile(files[0]));119 message1.innerHTML = message1.innerHTML + "<br>" + 'Start trimming';120 await ffmpeg.exec(['-i', name, '-ss', start, '-to', end, 'output.mp4']);121 message1.innerHTML = message1.innerHTML + "<br>" + 'Complete trimming';122 const data = await ffmpeg.readFile('output.mp4');123 124 const video = document.getElementById('output-video');125 video.style.display = 'inline';126 video.src = URL.createObjectURL(new Blob([data.buffer], { type: 'video/mp4' }));127 128 const downloadButton = document.getElementById('downloadButton');129 downloadButton.style.display = 'inline'; // 显示下载链接130 131 }132 document.getElementById('downloadButton').addEventListener('click', function() {133 const video = document.getElementById('output-video');134 const downloadLink = document.getElementById('downloadLink');135 136 // 设置下载链接137 downloadLink.href = video.src;138 downloadLink.innerText = '下载视频';139 downloadLink.download = 'trim_' + generateRandomFileName() + '.mp4';140 downloadLink.style.display = 'inline'; // 显示下载链接141 downloadLink.click();142 });143 const elm = document.getElementById('uploader');144 elm.addEventListener('change', trim);145 </script>146 <!-- <!-- Eruda is console for mobile browsers --> -->147 <!-- <script src="https://cdn.jsdelivr.net/npm/eruda"></script> -->148 <!-- <script>eruda.init();</script> -->149 </body>150</html>151