1.0.5 • Published 9 months ago
@web-atoms/media-converter v1.0.5
Media Convert
MP4 to WebM Converter in Browser using WebCodecs
- WebCodecs provides faster media encoder/decoder.
- Supports resizing video to lower file size by reudcing bit rate.
- Supported on Chrome.
<!DOCTYPE HTML>
<html>
<head></head>
<body>
<div>Choose File</div>
<input id="videoFile" type="file" accept="video/*">
<progress min="0" max="1"></progress>
<video controls="true" style="height: 500px"></video>
<pre style="height: 400px; width: 100%"></pre>
<script type="module">
import { MediaConverter } from "https://cdn.jsdelivr.net/npm/@web-atoms/media-converter@1.0.4/dist/index.js"
const progress = document.body.querySelector("progress");
const pre = document.body.querySelector("pre");
const input = document.body.querySelector("input");
const video = document.body.querySelector("video");
progress.style.display = "none";
input.onchange = () => {
convertFile(input.files[0]).catch((error) => {
pre.append(document.createTextNode((error.stack ?? stack) + "\n"));
})
};
async function convertFile(file) {
progress.style.removeProperty("display");
const mc = new MediaConverter();
const output = await mc.convert(file, {
outputName: file.name + ".webm",
maxHeight: 720,
maxSize: 25*1024*1024,
onProgress: (x) => progress.value = x
});
const url = URL.createObjectURL(output);
video.src = url;
progress.style.display = "none";
}
</script>
</body>
</html>