JS Video Decoding: JSMpeg and Broadway

An educational, self-contained walkthrough of the article’s core lesson: browser-side video decoders can look simple, but the exact container and codec requirements matter.

1. JSMpeg Looks Like a Two-Line Player

Code:

<div class="jsmpeg-player" data-url="official-demo.ts"></div>
<button data-action="play-jsmpeg">Play</button>

Result:

Resource official-demo.ts

Expected format MPEG-TS container, MPEG1 video, MP2 audio

Ready. Click Play to simulate a compatible JSMpeg file.

2. A Random MP4 Is Not Enough

Code:

const file = "casual-pick.mp4";
const result = file.endsWith(".ts")
  ? "Decoding can start."
  : "JSMpeg: Possible garbage data. Skipping.";

Result:

Choose a source and check what the decoder sees.

3. The FFmpeg Command Must Target Old Codecs

Code:

ffmpeg -i in.mp4 -f mpegts -codec:v mpeg1video -codec:a mp2 -b 0 out.ts

Result:

Input in.mp4

Container MPEG-TS

Video MPEG1 video

Audio MP2 audio

4. File Size Can Jump After Transcoding

Code:

const beforeMB = 1.2;
const afterMB = 5.4;
const growth = Math.round((afterMB / beforeMB) * 10) / 10;

Result:

Original MP4 1.2 MB

Converted TS Click compare to reveal growth.

5. Broadway Uses H.264, But Still Needs Exact Input

Code:

<div class="broadway-player" src="./fox.mp4" workers="false" render="true" webgl="auto"></div>
<button data-action="play-broadway">Play</button>

Result:

Broadway node src="./fox.mp4" workers="false" render="true" webgl="auto"

Ready. Official-style H.264 sample selected.

6. The Broadway Encoding Command Is Easy to Misread

Code:

ffmpeg -y -i sourceFile -r 30000/1001 -b:a 2M -bt 4M -vcodec libx264 -pass 1 -coder 0 -bf 0 -flags -loop -wpredp 0 -an targetFile.mp4

Result:

Press Test command to walk through the article's failure path.

7. Review Summary: Great Idea, Hard Onboarding

Code:

const review = [
  { name: "JSMpeg", verdict: "mature for MPEG-TS live streams, picky for casual MP4s" },
  { name: "Broadway", verdict: "interesting H.264 decoder, difficult demo path" },
  { name: "Native video / MSE", verdict: "often a better first web-video choice today" }
];

Result:

Negative

JSMpeg

Needs MPEG1 video
Needs MP2 audio
Wrong TS can show only the first frame

Negative

Broadway

H.264 decoder in JavaScript
Input compatibility is fragile
Can fail with signature errors

Practical

Native video / MSE

Uses browser media stack
Better fit for common MP4 workflows
Worth testing next on Android HTML5