Spaces:
Running
Running
File size: 6,250 Bytes
5903d9a b30cf16 759fdea 094e9f3 24a6c41 094e9f3 5903d9a 180d5ec 5903d9a 05d832a b7b866a 05d832a 70c58b0 2165888 5903d9a 05d832a 057c2f0 05d832a 057c2f0 05d832a 057c2f0 05d832a 70c58b0 05d832a 5903d9a 05d832a 5903d9a 05d832a 5903d9a 7c2d5c6 5903d9a |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 |
<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>
|