html5の<video>タグでflvを再生

video.jsとそのプラグインvideojs-contrib-hlsを利用するとHLSに対応していないブラウザでもHLSが再生できるようになりますが、これはMPEG-2 TSからMP4(フラグメントMP4)にブラウザ上でコンテナ変換して再生するというものです。
今回それのflv版とも言える、flvからMP4にコンテナ変換して再生する方法を見つけました。

必要となるのはflvから動画と音声データを取り出すflvdemux.jsとそれをmp4に詰めるmp4mux.jsです。mp4の再生にはHTML5 のMediaSourceを利用します。ほぼそのもののサンプルが https://github.com/nareix/mama-hd にあります。ところがこれはどこかの動画サイト用に作られたもののようなので、通常のwebサーバに置かれたflvを再生できるように改造しました。

Demo

余談ですがこの方法でPeerCastのflv配信も再生できます。videoタグで再生するとキャッシュされた部分をシークできるので、配信中でも過去にさかのぼって再生できようになります。セグメント単位で分割するのでライブ配信で利用した場合はHLSと同じくラグが大きくなります。

あわせて読みたい

2件のフィードバック

  1. 匿名希望 より:

    ビリビリ動画がFLVをHTML5で再生するJavaScriptライブラリを公開したので
    ピアキャスのFLV配信で使って見たらChromeとFirefoxのブラウザで再生が出来ました
    https://github.com/Bilibili/flv.js

    ピアキャスで使えるflv.jsのデモを作ってみたので良ければ試して見て下さい
    http://pastebin.com/LZ2gBvin

    • petit より:

      これいいですね。Firefoxにも対応してるし、すぐに使えそう。
      情報ありがとうございます!

匿名希望 へ返信する コメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です