Hls.jsが超便利。

最終更新日:2020/03/19   公開日:2017/06/28

こんにちは、中村です。

最近案件でも動画を使う機会がでてきたんですが、

HLSが主流になってきているようなのでサクッと準備できそうなものを探しました。

ちなみに、HLS（HTTPライブストリーミング – HTTP Live Streaming）とは、Appleが開発した動画配信技術です。

iOS, Android, MAC OS, Windowsなどのプラットフォームに対応しています。（IEは無理だけどなw）

HLS（.m3u8）はiOSだとvideoタグですぐ再生できますが、他のプラットフォームだとそのままでは再生できません。

そこでHls.jsを使います。（デモはこちら）

jsファイルを呼び出して、<video id=”my-video” controls width=”640″ height=”320″></video>に表示されるようにします。

if(Hls.isSupported()) {
var video = document.getElementById(‘my-video’);
var hls = new Hls();
hls.loadSource(‘/PATH/TO/MOVIE/’);
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED,function() {
video.play();
});

これを書くだけです。

iOSではデフォルトで動くのでjsで UA判定してiOSならそのままsrc属性に記述し、

他はHls.jsを使うとすると簡単に準備できると思います。

ちなみに、構成は下記のような形で用意しています。

・Hlsへの変換→Amazon Elastic Transcoder

・インフラ→Cloudfront + S3

色々とまとまってない感じですが、とりあえずHls.js万歳。

弊社では動画配信構築も行なっております。Web動画配信を行いたい方はこちらをご覧下さい。

動画配信ソリューション