HLS.js使用ガイドとベストプラクティス
HLS.jsの究極ガイド。動作原理、活用シーン、メリット・デメリットを深く解説し、コード例とよくある問題の解決策を提供します。
続きを読む →ゼロから学ぶMPEG-DASH、アダプティブビットレートストリーミングのコア技術を習得
DASH(Dynamic Adaptive Streaming over HTTP)は、HTTPベースの動的アダプティブストリーミングであり、国際標準化されたアダプティブビットレートストリーミング技術です。MPEG組織によって策定され、正式名称はMPEG-DASH(ISO/IEC 23009-1)といい、現在ストリーミング分野で最も重要な技術標準の1つです。
従来のストリーミングプロトコルとは異なり、DASHは動画コンテンツを小さなHTTPベースのファイルセグメントに分割し、各セグメントには短時間のメディアデータが含まれます。プレーヤーは現在のネットワーク状況に応じて動的に異なるビットレートのセグメントを選択することで、スムーズな再生体験を実現します。
DASHの動作原理を理解するには、コアコンポーネントとワークフローの両面からアプローチする必要があります。
MPD(Media Presentation Description)はDASHのコア設定ファイルで、HLSにおけるM3U8ファイルに相当します。XML形式のファイルで、メディアコンテンツ全体の構成を記述しています。
DASHは動画コンテンツを複数の小さなセグメント(通常2〜10秒)に分割し、各セグメントは独立したファイルになります。また、同一コンテンツが異なるビットレートと解像度の複数のバージョンにエンコードされ、プレーヤーがネットワーク状況に応じて選択できるようになっています。
DASHプレーヤーにはアダプティブビットレート(ABR)アルゴリズムが内蔵されており、以下の指標に基づいて最適なビットレートを動的に選択します:
DASHとHLSは現在最も主流な2つのアダプティブビットレートストリーミング技術であり、それぞれ長所と短所があります。
| 比較項目 | DASH | HLS |
|---|---|---|
| 策定組織 | MPEG(国際標準) | Apple社 |
| マニフェストフォーマット | MPD(XML形式) | M3U8(テキスト形式) |
| エンコードフォーマット | H.264/H.265/VP9/AV1など | 主にH.264/H.265に対応 |
| セグメントフォーマット | MP4/WebM/TS | TS/fMP4 |
| iOS対応 | iOS 16以降でネイティブ対応 | 全バージョンでネイティブ対応 |
| DRM対応 | Widevine/PlayReady/FairPlay | FairPlayが中心 |
| 低遅延 | LL-DASH標準 | LL-HLS |
| エコシステム成熟度 | 成熟、広く利用されている | 非常に成熟、最も広く利用されている |
WebページでDASHコンテンツを再生するには、dash.jsライブラリを使用するのが最も一般的です。DASH Industry ForumによってメンテナンスされているオープンソースのDASHプレーヤー実装です。
手っ取り早くDASH動画ストリームをテストしたい場合は、MPEG-DASHオンラインプレーヤーをご利用ください。コードを書く必要はありません。
自分のWebサイトにDASH再生機能を統合したい場合は、dash.jsライブラリを使用できます。
CDNからdash.jsライブラリを読み込みます:
<script src="https://cdn.dashjs.org/latest/dash.all.min.js"></script>
ページにvideo要素を追加します:
<video id="video" controls playsinline></video>
const video = document.getElementById('video');
const mpdUrl = 'https://example.com/stream.mpd';
const player = dashjs.MediaPlayer().create();
player.initialize(video, mpdUrl, true);
player.updateSettings({
streaming: {
abr: {
autoSwitchBitrate: {
video: true,
audio: true
}
},
buffer: {
stableBufferTime: 30,
bufferTimeAtTopQuality: 60
},
lowLatencyEnabled: false
}
});
Shaka PlayerはGoogleが開発したもう1つの優れたDASHプレーヤーで、こちらもオープンソースで無料です:
const video = document.getElementById('video');
const player = new shaka.Player(video);
player.load('https://example.com/stream.mpd');
DASHコンテンツの生成に最もよく使われるツールはFFmpegとGPAC(MP4Box)です。
以下のコマンドでMP4ファイルをDASHフォーマットに変換できます:
ffmpeg -i input.mp4 \
-map 0 -map 0 -map 0 \
-b:v:0 800k -s:v:0 640x360 \
-b:v:1 1500k -s:v:1 854x480 \
-b:v:2 3000k -s:v:2 1280x720 \
-b:a 128k \
-use_timeline 1 -use_template 1 \
-window_size 5 -adaptation_sets "id=0,streams=v id=1,streams=a" \
-f dash output.mpd
GPACのMP4Boxは、もう1つの強力なDASHパッケージングツールです:
MP4Box -dash 4000 \
-rap -frag-rap \
-profile dashavc264:live \
-out output.mpd \
video_360p.mp4 video_480p.mp4 video_720p.mp4 audio.mp4
絶対的に「どちらが良い」というものはなく、具体的なシーンによります。DASHは国際標準でより柔軟性が高く、より多くのエンコードフォーマットに対応しています。HLSはエコシステムがより成熟しており、Appleデバイスとの互換性が優れています。ほとんどの商用プラットフォームは両方のフォーマットを同時に提供しています。
モダンブラウザ自体はDASH再生を直接サポートしていませんが、dash.jsやShaka PlayerなどのJavaScriptライブラリを使用し、MSE(Media Source Extensions)APIを利用することでDASH再生を実現できます。Chrome、Firefox、Edgeなどの主流ブラウザはすべてMSEに対応しています。
はい、できます。DASHはライブ配信とオンデマンド(VOD)の両方のモードに対応しています。低遅延ライブ配信のシーンでは、LL-DASH(Low Latency DASH)標準を使用することで、遅延を1〜2秒まで削減できます。
MPDはDASHのマニフェストファイルでXML形式を使用し、構造はより複雑ですが機能はより強力です。M3U8はHLSのマニフェストファイルでプレーンテキスト形式を使用し、よりシンプルで読みやすくなっています。両者は機能的には類似しており、どちらもメディアコンテンツの構成を記述するためのものです。
DASH標準自体はDRMに依存しませんが、Google Widevine、Microsoft PlayReady、Apple FairPlayなどの一般的なDRMシステムに対応しています。具体的にどのDRMに対応するかは、プレーヤーの実装に依存します。
DASHは国際標準化されたアダプティブビットレートストリーミング技術として、その柔軟性、コーデック非依存性、強力な機能により、ストリーミング分野で重要な位置を占めています。iOS 16以降でDASHがネイティブサポートされたことで、DASHの活用シーンはさらに広がるでしょう。
DASH再生機能を手っ取り早く体験したい場合は、MPEG-DASHオンラインプレーヤーをご利用ください。コードを書くことなく、ブラウザでDASH動画ストリームを再生できます。
その他の役立つ記事とツール
HLS.jsの究極ガイド。動作原理、活用シーン、メリット・デメリットを深く解説し、コード例とよくある問題の解決策を提供します。
続きを読む →初心者向けガイド。WebプレーヤーでFLVとRTMPライブを視聴する方法を解説。ライブストリームの原理、操作チュートリアル、スクリーンショットテクニックも含みます。
続きを読む →PC、スマホ、Webブラウザまで網羅。VLC、PotPlayer、Webオンラインプレーヤーなどのソリューションを紹介し、よくある問題のトラブルシューティング方法を提供します。
続きを読む →