dumtruck/konowebcodecs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add umd output and update browser apps

Browse Source
This commit is contained in:
Jerome Wu
2022-09-23 18:16:34 +08:00
parent edb05a6572
commit c38ab7551b
11 changed files with 1377 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
apps/browser/trim.html
View File

@@ -1,18 +1,8 @@
<html>
<head>
<script src="/dist/ffmpeg.dev.js"></script>
<style>
html, body {
margin: 0;
width: 100%;
height: 100%
}
body {
display: flex;
flex-direction: column;
align-items: center;
}
</style>
<link rel="stylesheet" href="style.css">
<script src="../../packages/ffmpeg/dist/umd/ffmpeg.js"></script>
<script src="../../packages/util/dist/umd/index.js"></script>
</head>
<body>
<h3>Upload a mp4 (x264) video and trim its first 1 seconds and play!</h3>
@@ -20,19 +10,22 @@
<input type="file" id="uploader">
<p id="message"></p>
<script>
const { createFFmpeg, fetchFile } = FFmpeg;
const ffmpeg = createFFmpeg({ log: true });
const { fetchFile } = FFmpegUtil;
let ffmpeg = null;
const trim = async ({ target: { files } }) => {
const message = document.getElementById('message');
if (ffmpeg === null) {
ffmpeg = await createFFmpeg();
ffmpeg.setProgress((progress) => { console.log(progress * 100) });
}
const { name } = files[0];
message.innerHTML = 'Loading ffmpeg-core.js';
await ffmpeg.load();
message.innerHTML = 'Start trimming';
ffmpeg.FS('writeFile', name, await fetchFile(files[0]));
await ffmpeg.run('-i', name, '-ss', '0', '-to', '1', 'output.mp4');
ffmpeg.FS.writeFile(name, await fetchFile(files[0]));
await ffmpeg.exec('-i', name, '-ss', '0', '-to', '1', 'output.mp4');
message.innerHTML = 'Complete trimming';
const data = ffmpeg.FS('readFile', 'output.mp4');
const data = ffmpeg.FS.readFile('output.mp4');
const video = document.getElementById('output-video');
video.src = URL.createObjectURL(new Blob([data.buffer], { type: 'video/mp4' }));