arcodange/mediabunny
1
0
Fork 0
mirror of https://github.com/arcodange-org/mediabunny.git synced 2026-10-01 21:03:46 +02:00
Code Issues Packages Projects Releases Wiki Activity

Add WebVTT subtitle support to MP4 & a bunch of misc changes

Browse Source
This commit is contained in:
Vanilagy
2024-11-24 14:57:31 +01:00
parent 39aea03565
commit 29ecccb26a
15 changed files with 2355 additions and 1557 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dev/index.html
+55 -5
View File
@@ -36,7 +36,8 @@
canvas.height = 720;
const context = canvas.getContext('2d');
let format = new Metamuxer.WebMOutputFormat();// new Metamuxer.MkvOutputFormat();// new Metamuxer.Mp4OutputFormat({ fastStart: false });
let format = new Metamuxer.WebMOutputFormat();
format = new Metamuxer.Mp4OutputFormat({ fastStart: false }); // new Metamuxer.MkvOutputFormat();// new Metamuxer.Mp4OutputFormat({ fastStart: false });
let target = new Metamuxer.ArrayBufferTarget();
let output = new Metamuxer.Output({ format, target });
@@ -71,11 +72,11 @@
*/
let videoSource = new Metamuxer.CanvasSource(canvas, {
codec: 'vp9',
codec: 'avc',
bitrate: 1e6
});
let audioSource = new Metamuxer.AudioBufferSource({
codec: 'opus',
codec: 'aac',
bitrate: 128e3,
});
let subtitleSource = new Metamuxer.TextSubtitleSource('webvtt');
@@ -89,9 +90,58 @@
let simpleWebvttFile =
`WEBVTT
00:00:00.000 --> 00:00:10.000
1
00:00:02.000 --> 00:00:10.000
Example entry 1: Hello <b>world</b>.
`;
if (false) simpleWebvttFile =
`WEBVTT
1
00:05.000 --> 00:12.500 align:start line:10
<v Roger Bingham>We are in New York City.
We are looking straight down 5th Avenue.
00:13.000 --> 00:18.000
<v Neil DeGrass Tyson>Didn't you already say that?
2
00:17.000 --> 00:20.000
Testing... <00:17.350>One... <00:18.125>Two...
`
simpleWebvttFile =
`WEBVTT
00:00:01.000 --> 00:00:01.500 align:start line:1
1. <b>justify (top, left)</b>,
00:00:01.500 --> 00:00:02.000 align:center line:1.5
2. <b>justify (top, center)</b>,
00:00:02.000 --> 00:00:02.500 align:end line:2
3. <b>justify (top, right)</b>,
00:00:02.500 --> 00:00:03.000 align:start line:48%
4. <b>justify (center, left)</b>,
00:00:03.000 --> 00:00:03.500 align:center line:50%
5. <b>justify (center, center)</b>,
00:00:03.500 --> 00:00:04.000 align:end line:52%
6. <b>justify (center, right)</b>,
00:00:04.000 --> 00:00:04.500 align:start line:-1
7. <b>justify (bottom, left)</b>,
00:00:04.500 --> 00:00:05.000 align:center line:-1.5
8. <b>justify (bottom, center)</b>,
00:00:05.000 --> 00:00:05.500 align:end line:-2
9. <b>justify (bottom, right)</b>.
`;
subtitleSource.digest(simpleWebvttFile);
subtitleSource.close();
@@ -112,5 +162,5 @@ Example entry 1: Hello <b>world</b>.
await output.finalize();
console.log(target);
download(new Blob([target.buffer]), 'test.webm');
download(new Blob([target.buffer]), 'test.mp4');
</script>