おすすめhls web player hls.jsを使ってみる

hlsライブストリーミング配信を行いたいと思います。今まではRTMPで配信video.jsを利用していました。ただ、最近ChromeではRTMPに対して制限がきつくなっているなどがあり、hlsへの切り替えを行いました。

そこでvideojs のvideojs-contrib-hlsを利用して配信したところ、長時間配信していると音ズレが目立つようになり、どうしても調整ができません。

VLC Playerでm3u8ファイルを開き受信していると、特に音がずれる事はないのですが、videojs-contrib-hlsを利用して映像を長時間受信していると、だんだんと口の動きと、音声がずれてしまうのです。長時間受信すればするほどずれはひどくなります。

そこで、色々なwebプレーヤーを試しています。

今回のhls.jsは最高に素晴らしいパフォーマンスを持っている事が分かりました。

https://github.com/video-dev/hls.js/

webサーバにこのHTMLを貼り付けるだけ。あとは、

hls.loadSource

video.src

部分のm3u8 URLを自分の流したい映像に書き換えるだけで始める事ができます。

また、

if(Hls.isSupported()) {

により、JavaScript hls.jsがサポートされているか、機能するかを確認し、機能するようであれば、hls.jsスクリプトにより表示、サポートされていなければ、ブラウザが持っているHLS再生サポートを利用します。

オプションのマニュアルはこちらです。

https://github.com/video-dev/hls.js/blob/master/docs/API.md

上記サンプルのまま利用すると、ビットレートにより自動調整され、配信映像の解像度によって、画面を占有して表示されます。小さいビットレート、小さい解像度で受信すると、小さい窓で映像が表示され、大きいビットレート、大きい解像度で映像を受信すると、その大きさで映像が流れます。

小さい解像度で受信しても画面一杯に広げて映像を受信したいです。その時はHTML5のVIDEOタグの方で調整します。

サンプルのvideoタグをこのように書き換えると、サイズ1280×720で表示されます。また、controlsを表示しているので、画面最大化も可能です。その他、音量調整、m3u8に掲載されている範囲での早送り、巻き戻しも可能になります。

hls.jsは、クオリティコントロール標準装備です。

帯域が狭いと小さいビットレートで映像を受信し、帯域が大きいと判断されるとその帯域に合わせてビットレートが調整され、最適な画質で映像再生が可能です。

その代わり、マニュアルで画質を選択する事は出来ません。

今まで、flowplayer や、HDPlayerなどを転々とめぐり、video.jsにたどりついたわけですが、hls.jsはそのベースになるソースコードであり、ビットレートの調整も自動で行われるところから、私の利用環境では最高に素晴らしいパフォーマンスです。

無料でここまでの事ができるので、お金を払って他何をするんだろうなって感じです。

自前の環境にhls.jsを置きたい場合はこのようにします。

これでhls.min.jsの準備が整いましたので、後はsrc=設定をhttps://cdn.jsdelivr.net/npm/hls.js@latestから変更すればOKです。hls.jsとhls.min.jsは同じもので、minがついているのは余計な改行などが省かれて最小ファイルサイズになっています。

ボリュームコントロール

ミュート機能は標準でついていますが、プレーヤーごとにボリュームコントロールしたい場合があります。その際には、少し追記してあげる必要があります。

これを追記する事で、ボリュームコントロールのスクロールバーが表示されます。

2件のコメント

コメントする

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

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)