Playing MPEG-1 Video in HTML

Question

I need to play MPEG-1 files dynamically from a browser. Uploading them to YouTube or converting the videos is not an option.

How can I do this? I've seen this, but the answers do not apply to MPEG-1. Is there a way to play mpeg videos in HTML5?

The video tag is not working for the file with Chrome:

<video class="fullscreen" autoplay>
    <source src="video/test2.mpeg">
</video>

It just displays a black box and stuttering noise/sound. I can verify that the video is not corrupt because I can play it with VLC. I only need this to work on one specific browser (it does not have to be cross-compatible). Plugins are OK too, as long as I do not have to convert the video. Though I'd rather avoid them.

Answer 1

Some browsers don't support older formats in <video> on purpose, to limit number of crappy, legacy, and potentially insecurely implemented video formats on the web.

The only combination that has a decent chance of working is H.264 (MP4) and WebM (or Ogg Theora), so you must convert the video and for good browser support you will have to generate at least these two formats.

The good news is that modern codecs are much more efficient than MPEG-1, so you'll get much smaller files.

---

Other options may be:

• Give users a direct link to the video so they can download it and play in an external player like VLC.

• Embed video using oldschool <object> element, and hope some browsers still have legacy plugins that can play videos (but e.g. Chrome has recently removed support for all plugins except a couple written specifically for Chrome's own API).

• Use Emscripten (asm.js) to compile an MPEG-1 decoder to JavaScript and decode the video yourself to <canvas>. JS these days is fast enough to pull that off (although it will quickly drain battery of mobile devices, and a poor video codec combined with an extra download of a JS decoder will be a massive waste of bandwidth).