はじめに
動画埋め込みの実装方法を選ぶ際、「mp4で十分？」「YouTubeじゃダメ？」「HLSって必要？」と迷うことはありませんか？
そこで今回は一般的な要望パターンとともに、どんなケースで HLS が効果的なのか、採用判断の基準とメリット・デメリットをまとめてみました。
HLSとは
HTTP Live Streaming（HLS） は Apple が開発したストリーミングプロトコルで、動画を小さなセグメントに分割して配信する技術です。
分割したファイルは sample000.ts、sample001.ts のようなファイル名になります（※他の拡張子も使えます）。
この .ts はTypeScriptの拡張子と同じなので紛らわしいですが、 「Transport Stream」 を略した別物です。
m3u8（拡張子は .m3u8）はこの .ts ファイルが列挙された 「この順番で再生する」 ことを示したプレイリストファイルです。
HLSへの変換方法
動画ファイルをHLSに変換する方法には以下のような方法があります。
- FFmpeg：コマンドラインツールによる手動変換
- クラウドサービス：AWS MediaConvert、Google Cloud Transcoder APIなど
- 自動変換システム：アップロード時に自動でHLSに変換する仕組みを構築する
HLS採用を検討すべきケース
1. 外部動画サービスの利用を避けたい
💭 想定されるニーズ
- 企業ポリシーで外部サービス利用に制限がある
- ブランド統一のため自社環境での配信を希望
- データ管理を自社で完結させたい
- 外部サービスの仕様変更リスクを避けたい
✅ メリット
- 完全自社管理でブランディング統一
- 外部動画サービスの仕様変更に影響されない
- データ所有権を確保
⚠️ デメリット
- サーバー負荷とストレージ容量の考慮
- 動画変換システムの構築が必要
2. なるべくユーザーに動画を保存してほしくない
💭 想定されるニーズ
- 限定コンテンツの保護を図りたい
- 簡易的なダウンロード抑制が必要
- 会員制サイトでのコンテンツ配信
✅ メリット
- 右クリック保存ができない
- 一般ユーザーには分かりにくい形式のため、ダウンロードするためにはある程度のリテラシーが必要
- 簡単には保存できないことによる心理的抑制効果
⚠️ デメリット
- 完全なダウンロード防止は技術的に不可能
- あくまでも防止対策であることを納得してもらう必要がある
3. さまざまな端末や通信環境でも快適に視聴できるようにしたい
💭 想定されるニーズ
- モバイルユーザーが多いのでデータ使用量を抑えたい
- 通信環境の差による視聴体験の差を減らしたい
- 幅広いデバイス・回線速度に対応したい
✅ メリット
- mp4と違い小さなセグメントに分割して配信するため、視聴途中での離脱時もパケット量を節約できる
- アダプティブストリーミング1で自動品質調整
- ユーザー体験の向上
⚠️ デメリット
- 複数解像度での動画準備が必要
- エンコード時間とストレージ容量の増加
採用を見送るべきケース
1. シンプルな動画埋め込みで十分な場合
<video src="sample.mp4" controls></video>
- 動画ファイルが軽い
- ダウンロード制限不要
- 開発工数を抑えたい
実装の基本パターン
HLSに非対応のモダンブラウザに対しては hls.js などのライブラリで問題なく対応できます。
import Hls from 'hls.js';
const video = document.querySelector('#video');
const videoSrc = 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8';
// ネイティブHLSサポートをチェック（Safari、Edge）
if (video.canPlayType('application/vnd.apple.mpegurl')) {
video.src = videoSrc;
}
// hls.jsサポートをチェック（Chrome、Firefox等）
else if (Hls.isSupported()) {
const hls = new Hls();
hls.loadSource(videoSrc);
hls.attachMedia(video);
}
// どちらもサポートしていない場合
else {
console.error('HLSはこのブラウザでサポートされていません');
}
まとめ
HLSは万能ではありませんが、適切なケースで使えば非常に効果的だと思います。
今回、例として挙げた
- 外部動画サービスの利用を避けたい
- なるべくユーザーに動画を保存してほしくない
- さまざまな端末や通信環境でも快適に視聴できるようにしたい
といったケースでは採用を検討する価値はあると思います。
クライアントの真のニーズを理解して適切に提案できるよう意識していきたいと思いました。
参考ページ
-
アダプティブストリーミング: 視聴者のネットワーク環境やデバイスの状況に応じて、動画の画質（ビットレート）を自動的に切り替えながら配信する技術のこと ↩