Javascript + html5 canvas で mpeg-1 ファイルを再生してしまうすごいライブラリ jsmpeg を発見しました。 入力された mpg ファイルをデコードすることで得られる画像を 逐次canvas に描いていくことで動画再生を実現するというものですが、 入力できるMPEGデータに2つの制約があるようです。
制約1 はともかくとして、制約2がなかなかクリアできずに苦戦していました。 配布元の指示通りに ffmpeg のパラメータを指定してmpeg1動画を生成しても、 表示が大幅に崩れてしまいます。 まあ、ffmpeg を使い慣れているわけでもないですし、 動画フォーマットについてほぼ素人なので、実は正しいパラメータの指定の仕方 を知らないだけかもしれません。 結局 ffmpeg のパラメータの指定方法の詳細がなかなかつかめなかったので、別のツールを試すことにしました。゜
探したところ、mpeg_encodeという、連番 PPM ファイルから mpeg1 ファイルを作成できるエンコーダを発見しましたので、 ここからソースを取得し、Visual Studio でビルドできるようにソースを修正してみました。 また、ついでに png デコーダ stb_image も組み込んで、連番 PNG にも対応してみました。
・・・というのが今回の作品です！
このエンコーダで作ったmpegファイルは、今のところは jsmpeg でうまく再生できてます。 他の色々なデータでも試してみて、表示が崩れないことを確認していきたいと思います。
・・・そういえば、Windows10 でこの検証をしていたのですが、 Windows10 のメディアプレイヤーで mpeg-1 ファイルが再生できませんでした。 Windows10 には mpeg-1 codec が入ってなかったりするんでしょうか？
edit