← Back

Decode H.264 video using the <video> tag

H.264 - MPEG-4 AVC - is the one format in this family every browser already decodes, so what this demo shows is not that the file plays but where the pixels come from: isobmff_1 demultiplexes the MP4, h264bsd_1 decodes each picture in WebAssembly, and libx264_1 re-encodes the result. The browser plays the output of that chain, never the input file. The decode matches a native FFmpeg one at 61.7 dB PSNR over all 50 frames.

Code snippet

<video is="universal-video_1" src="testcard.mp4" using="solver_1"
        with="isobmff_1;h264bsd_1;libx264_1" controls> </video>

h264bsd covers the Constrained Baseline Profile - no B pictures, no CABAC, no 8x8 transform - which is the profile of this test file and of most streams that need a decoder small enough to ship. Anything beyond it is refused with a clear message rather than mis-decoded.

Specifications :

The specifications of the test sequence are :

Format H.264 Constrained Baseline in MP4, 320x180, 25 fps, 50 frames
FileSize 49 Ko
Solver solver_1