Hugging Face's logo

Spaces:
nicehero
/
ManualMask
Running

App Files Community
nicehero commited on
Commit
5903d9a
·
verified ·
1 Parent(s): d1e8633

Upload 3 files

Browse files
Files changed (3) hide show
  1. style.css +8 -26
  2. trim.html +45 -0
  3. trim2.html +45 -0
style.css CHANGED
@@ -1,28 +1,10 @@
1
- body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
4
- }
5
-
6
- h1 {
7
- font-size: 16px;
8
- margin-top: 0;
9
- }
10
-
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
16
  }
17
-
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
24
- }
25
-
26
- .card p:last-child {
27
- margin-bottom: 0;
28
  }
 
1
+ html, body {
2
+ margin: 0;
3
+ width: 100%;
4
+ height: 100%
 
 
 
 
 
 
 
 
 
 
 
5
  }
6
+ body {
7
+ display: flex;
8
+ flex-direction: column;
9
+ align-items: center;
 
 
 
 
 
 
 
10
  }
trim.html ADDED
@@ -0,0 +1,45 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <html>
2
+ <head>
3
+ <link rel="stylesheet" href="style.css">
4
+ <script src="/assets/ffmpeg/package/dist/umd/ffmpeg.js"></script>
5
+ <script src="/assets/util/package/dist/umd/index.js"></script>
6
+ </head>
7
+ <body>
8
+ <h3>Upload a mp4 (x264) video and trim its first 1 seconds and play!</h3>
9
+ <video id="output-video" controls></video><br/>
10
+ <input type="file" id="uploader">
11
+ <p id="message"></p>
12
+ <script>
13
+ const { fetchFile } = FFmpegUtil;
14
+ const { FFmpeg } = FFmpegWASM;
15
+ let ffmpeg = null;
16
+
17
+ const trim = async ({ target: { files } }) => {
18
+ const message = document.getElementById('message');
19
+ if (ffmpeg === null) {
20
+ ffmpeg = new FFmpeg();
21
+ ffmpeg.on("log", ({ message }) => {
22
+ console.log(message);
23
+ })
24
+ ffmpeg.on("progress", ({ progress }) => {
25
+ message.innerHTML = `${progress * 100} %`;
26
+ });
27
+ await ffmpeg.load({
28
+ coreURL: "/assets/core/package/dist/umd/ffmpeg-core.js",
29
+ });
30
+ }
31
+ const { name } = files[0];
32
+ await ffmpeg.writeFile(name, await fetchFile(files[0]));
33
+ message.innerHTML = 'Start trimming';
34
+ await ffmpeg.exec(['-i', name, '-ss', '0', '-to', '1', 'output.mp4']);
35
+ message.innerHTML = 'Complete trimming';
36
+ const data = await ffmpeg.readFile('output.mp4');
37
+
38
+ const video = document.getElementById('output-video');
39
+ video.src = URL.createObjectURL(new Blob([data.buffer], { type: 'video/mp4' }));
40
+ }
41
+ const elm = document.getElementById('uploader');
42
+ elm.addEventListener('change', trim);
43
+ </script>
44
+ </body>
45
+ </html>
trim2.html ADDED
@@ -0,0 +1,45 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <html>
2
+ <head>
3
+ <link rel="stylesheet" href="style.css">
4
+ <script src="assets/ffmpeg/package/dist/umd/ffmpeg.js"></script>
5
+ <script src="assets/util/package/dist/umd/index.js"></script>
6
+ </head>
7
+ <body>
8
+ <h3>Upload a mp4 (x264) video and trim its first 1 seconds and play!</h3>
9
+ <video id="output-video" controls></video><br/>
10
+ <input type="file" id="uploader">
11
+ <p id="message"></p>
12
+ <script>
13
+ const { fetchFile } = FFmpegUtil;
14
+ const { FFmpeg } = FFmpegWASM;
15
+ let ffmpeg = null;
16
+
17
+ const trim = async ({ target: { files } }) => {
18
+ const message = document.getElementById('message');
19
+ if (ffmpeg === null) {
20
+ ffmpeg = new FFmpeg();
21
+ ffmpeg.on("log", ({ message }) => {
22
+ console.log(message);
23
+ })
24
+ ffmpeg.on("progress", ({ progress }) => {
25
+ message.innerHTML = `${progress * 100} %`;
26
+ });
27
+ await ffmpeg.load({
28
+ coreURL: "assets/core/package/dist/umd/ffmpeg-core.js",
29
+ });
30
+ }
31
+ const { name } = files[0];
32
+ await ffmpeg.writeFile(name, await fetchFile(files[0]));
33
+ message.innerHTML = 'Start trimming';
34
+ await ffmpeg.exec(['-i', name, '-ss', '0', '-to', '1', 'output.mp4']);
35
+ message.innerHTML = 'Complete trimming';
36
+ const data = await ffmpeg.readFile('output.mp4');
37
+
38
+ const video = document.getElementById('output-video');
39
+ video.src = URL.createObjectURL(new Blob([data.buffer], { type: 'video/mp4' }));
40
+ }
41
+ const elm = document.getElementById('uploader');
42
+ elm.addEventListener('change', trim);
43
+ </script>
44
+ </body>
45
+ </html>