BLOGHLSを使って重い動画をWEBサイトに実装する

コペイ
  1. HOME
  2. ブログ
  3. フロントエンド
  4. HLSを使って重い動画をWEBサイトに実装する

はじめに

お疲れーっす。!DOCTYPEのコペイ(@kopey44)です。

最近動画の実装は当たり前になってきていると思います。皆さんもyoutubeや<video>で実装することがほとんどだと思います。

youtubeの実装も多いんだけど、「youtube使うな!!」っていうクライアント時々いるよね?でもmp4重すぎてサイトが、、、(涙)みたいなことなり、圧縮したら「画質わっっる!!!高画質にならないの?」って詰められたり。。。

皆さんもたくさんの涙を流してきたと思います。(思いたい)

そんな時に

任せてください!長くて高画質で容量半端なくてもスムーズに再生実装できますよっ!ドヤァ!』

って言いたいですよね??ね?・・・ね??

目次

  1. HLSってなんぞ
  2. HLSの簡単な仕組み
  3. 動画の分割方法(ffmpeg)
    1. インストール
    2. 変換
  4. まとめ

HLSってなんぞ

HLS は HTTP Live Streaming の略で、Apple が定めた動画のストリーミング、オンデマンド配信(VOD)の技術。
つまり

  • 高いコストをかけずにストリーミング配信ができる配信技術
  • マルチビットレート(アダプティブビットレート)に対応
  • 様々なOS・ブラウザで再生可能
  • ライブ配信にも対応できる

ここで重要なのは様々なOS、ブラウザで配信することができ、ストリーミング再生ができること。

ストリーミング再生とはインターネット上のメディア(映像や音楽など)をすぐに再生する技術のこと

HLSの簡単な仕組み

HLSではセグメント化※(分割)された動画データが必要。mp4形式などの動画ファイルを、

  • セグメントリストファイル(.m3u8)
  • セグメント動画ファイル(.ts)

に分割して、それを再生する。
下の様なファイル群

video.m3u8
video.mp4
video000.ts
video001.ts
video002.ts
video003.ts
video004.ts
video005.ts
video006.ts
...
..
.

これらのセグメントファイルはそれぞれ役割があり、

  • セグメントリストファイル(.m3u8)
  • セグメント動画ファイルの場所、再生時間、再生順序などを記述したメタデータファイル。
  • セグメント動画ファイル(.ts)
  • 動画形式はMPEGトランスポートストリームファイル形式と同じだが、これをさらに10秒毎のように、分割秒数を指定して分割した動画ファイル。

・・・どうやって動画分割すんねん!!!

動画の分割方法(ffmpeg)

ここで登場するのはffmpeg
動画や音声を加工するのに強力で万能な簡単ツールであり、このツールを使うと簡単に.m3u8.tsを生成できます。

インストール

ffmpegはWindowsでもmac,その他OSでも使えてとても便利。
https://ffmpeg.org/
からDLできる。
macはHomebrewでインストール可能。

 brew install ffmpeg

Homebrewが入っていない人はmacOSにHomebrewをインストールを参考にしてみてください。

変換

いろいろな変換加工ができるが、今回は分割の方法のみを紹介
他が気になる方はそれFFmpegで出来るよ!からチェック!

以下のコマンドで、video.mp4 を video.m3u8 ファイルと、video001.ts などという名前のセグメントファイルを生成できる

 ffmpeg -i video.mp4 -c:v copy -c:a copy -f hls -hls_time 9 -hls_playlist_type vod -hls_segment_filename "video%3d.ts" video.m3u8
  • ffmpeg -i video.mp4 video.m3u8
  • -i:変換ファイルを指定
  • -c:v copy,-c:a copy: Audio や Video のコーデックを元の mp4 ファイルのものをそのまま使うように指定(よっぽどがなければこのまま使う)
  • -f hls:動画のフォーマット
  • hls_time 9: 9 秒ごとに .ts ファイルに分割指定
  • -hls_playlist_type vod:オンデマンド配信
  • -hls_segment_filename "video%3d.ts":動画セグメントファイル名のフォーマットを指定

それぞれの用途に合わせて設定できたらHLSで使えるファイルの完成!
こんなのができているはず

video.m3u8
 video.mp4
 video000.ts
 video001.ts
 video002.ts
 video003.ts
 video004.ts
 video005.ts
 video006.ts
 ・・・
 ・・
 ・

エラー出た人は変換したい動画がある階層にいるか確認してみて。
私は階層移動してなかったから焦ったよ?

HTMLへ実装

実はHLSはSafari、Edgeについてはネイティブ動画プレーヤーが標準でHLS対応しているが、Chrome、Firefox、IEについてはHLSに対応していないため再生できない。

今更そんな事って。。。

安心してください。穿いてm…
対応する js を付け加えるだけで使用可能です。

それは hls.js

以前は Video.js が主流だったがFlash対応向けに設計されている点と不具合が多い為、現在では hls.js が利用が多い。

hls.js を利用すると、以下のコードを書くだけで、Chrome、Firefoxのネイティブ動画プレーヤーにHLSに対応する機能を追加することができ、ストリーム再生可能となる。

<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script> //自前のサーバーに配置しない場合
<video id="video_smaple" controls>
<script>
    if(Hls.isSupported()) {
    var video = document.getElementById('video_smaple');//videoタグと同じIDにする
    var hls = new Hls();
    hls.loadSource('./video.m3u8'); //ここで.m3u8ファイルを指定
    hls.attachMedia(video);
     }
</script>

あら不思議!きれいに動画実装されているよ!

まとめ

Webの動画の掲載方法については、目まぐるしい速度で変化しているので、きっとこの技術もすぐ変わってしまうと思うので、常にキャッチアップして更新していきましょう!!

さぁ、皆さんも今日からどやりましょう!!

ドヤっ!!

「!DOCTYPE」へのご意見・ご相談などに関しては
こちらからお気軽にご連絡ください。