.hlsをブラウザ関係なく一発再生する “hls.js”

.hlsかmpeg-dashかとか、ChromeとFFとIEにvideo.jsと諸々依存ライブラリ入れるとか、そういうクソ面倒臭いこと一切抜きにして、videoタグで.hlsを一発再生してくれるhls.jsが素晴らしすぎます。

https://github.com/dailymotion/hls.js

ようやく.hlsだけでPCもスマホも全部カバーできる時代になってきたのを実感できます。

簡単すぎるけど、一応サンプルコード

<script src="https://cdn.jsdelivr.net/hls.js/latest/hls.min.js"></script>
<video id="video"></video>
<script>
  if(Hls.isSupported()) {
    var video = document.getElementById('video');
    var hls = new Hls();
    hls.loadSource('http://www.streambox.fr/playlists/test_001/stream.m3u8');
    hls.attachMedia(video);
    hls.on(Hls.Events.MANIFEST_PARSED,function() {
      video.play();
  });
 }
</script>

本当これだけです。

ffmpeg で .mp4 を .hls に分割するコマンド

ffmpeg -i movie1.mp4 -vcodec libx264 -s 1280x720 -strict -2 -b:a 256k -flags +loop-global_header -bsf h264_mp4toannexb -f segment -segment_format mpegts -segment_time 10 -segment_list mav.m3u8 mav_%04d.ts

なんかエラーが出てるけど作れました

改訂

ffmpeg -i movie1.mp4 -vcodec libx264 -s 1280x720 -strict experimental -acodec aac -b:a 96k -flags +loop-global_header -vbsf h264_mp4toannexb -f segment -segment_format mpegts -segment_time 10 -segment_list mav.m3u8 mav_%04d.ts