MDN wants to learn about developers like you:


Setting up adaptive streaming media sources

この翻訳は不完全です。英語から この記事を翻訳 してください。

Let's say you want to set up an adaptive streaming media source on a server, to be consumed inside an HTML5 media element. How would you do that? This article explains how, looking at two of the most common formats: MPEG-DASH and HLS (HTTP Live Streaming.)



  • HLS (HTTP Live Streaming)

アダプティブストリーミングを行うためにメディアをチャンクに分割します。いくらかの時間ごとに複数の異なるクオリティのファイルを提供することが必要です。よりたくさんのビットレートでエンコードを行い、より細かく時間を分割すればより 'アダプティブ' なストリーミングになりますが、通常はサイズとエンコード時間とアダプティブさの間でバランスを取ります。

The good news is that once we have encoded our media in the appropriate format we are pretty good to go. HTTP上のアダプティブストリーミングのためには特別なサーバーサイドのコンポーネントは必要ありません。

Both MPEG-DASH and HLS use a playlist format to structure the component piece of media that make the possible streams.  Various bitrate streams are broken into segments and placed in appropriate server folders — we have to provide our media players with a link to lookup files or playlists specifying the name and location of these stream folders.

MPEG-DASH エンコーディング

MPEG-DASH は従来のHTTP Webサーバーでメディアコンテンツのアダプティブビットレートストリーミングを可能にする技術です。

Media Presentation Description (MPD) ファイルが複数のストリームの解像度やコーデックや帯域情報などを持ちます。video要素の src 属性では、メディアを指定する代わりにMPDを指定します。

The MPD file tells the browser where the various pieces of media are located, it also includes meta data such as mimeType and codecs and there are other details such as byte-ranges in there too - it is an XML document and in many cases will be generated for you.

There are a few profiles we can use. We're going to take a look at Ondemand profile for Video On Demand (VOD) and the LIVE profile.

ライブストリーミングを行うためには、LIVEプロファイルが必要です。 The stream switching capabilities are identical between the profiles.


  1. クライアントかサーバーがレンジリクエストをサポートしていない
  2. サーバーがレンジリクエストを効率的にキャッシュしない
  3. サーバーがレンジリクエストを効率的にプリフェッチできない
  4. The SIDX* is large and having to load it first slows down startup a little
  5. 同じオリジナルファイルをその他の配信方式でも使用したい (たとえば Microsoft Smooth Streaming)
  6. 同じメディアファイルをライブストリーミングで配信した後VODでも配信したい

*SIDX or SegmentIndexBox is a structure describing a segment by giving its earliest presentation time and other meta-data and can often make up a large portion of the MPD file.




<?xml version="1.0" encoding="UTF-8"?>
<MPD xmlns:xsi=""
  xsi:schemaLocation="urn:mpeg:dash:schema:mpd:2011 DASH-MPD.xsd"

    <!-- English Audio -->
    <AdaptationSet mimeType="audio/mp4" codecs="mp4a.40.5" lang="en" subsegmentAlignment="true" subsegmentStartsWithSAP="1">
      <Representation id="1" bandwidth="64000">
    <!-- Video -->
    <AdaptationSet mimeType="video/mp4" codecs="avc1.42401E" subsegmentAlignment="true" subsegmentStartsWithSAP="1">
      <Representation id="2" bandwidth="100000" width="480" height="360">
      <Representation id="3" bandwidth="175000" width="480" height="360">
      <Representation id="4" bandwidth="250000" width="480" height="360">
      <Representation id="5" bandwidth="500000" width="480" height="360">

MPD ファイルを生成すれば、video タグから参照することができます。

<video src="my.mpd" type="video.mp4"></video>


  <source src="my.mpd" type="video/mp4">
  <!-- fallback -->
  <source src="my.mp4" type="video/mp4">
  <source src="my.webm" type="video/webm">

LIVE プロファイル

MPEG-DASH を取り扱うための良いソフトウェアは Dash Encoder です。これは MP4Box を使ってメディアを MPEG-DASH フォーマットにエンコードします。

Note: You will need to be comfortable with make files and installing dependencies to get this software up and running.

Note: Since MPEG-DASH decoding is done partially using JavaScript and MSE files are often grabbed using XHR, keep same origin rules in mind.

Note: If you use WebM you can use the methods shown in this tutorial DASH Adaptive Streaming for HTML 5 Video.


play list ->                /segments/news.mp4.mpd
main segment folder ->      /segments/main/

100 Kbps segment folder ->  /segments/main/news100 contains (1.m4s, 2.m4s, 3.m4s ... )

200 Kbps segment folder ->  /segments/main/news200 contains (1.m4s, 2.m4s, 3.m4s ... )

300 Kbps segment folder ->  /segments/main/news300 contains (1.m4s, 2.m4s, 3.m4s ... )

400 Kbps segment folder ->  /segments/main/news400 contains (1.m4s, 2.m4s, 3.m4s ... )

プレイリスト(.mpd ファイル)はすべてのさまざまなビットレートファイルが存在する場所を明示的に示す XML です。

<?xml version="1.0"?>
  <MPD xmlns:xsi="" xmlns="urn:mpeg:DASH:schema:MPD:2011"  xsi:schemaLocation="urn:mpeg:DASH:schema:MPD:2011" profiles="urn:mpeg:dash:profile:isoff-main:2011" type="static" mediaPresentationDuration="PT0H9M56.46S">
    <Period start="PT0S">
      <AdaptationSet bitstreamSwitching="true">
        <Representation id="0" codecs="avc1" mimeType="video/mp4" width="320" height="240" startWithSAP="1" bandwidth="46986">
            <Initialization sourceURL="main/news100/1.m4s" range="0-862"/>
          <SegmentList duration="1">
            <SegmentURL media="main/news100/2.m4s" mediaRange="863-7113"/>
            <SegmentURL media="main/news100/3.m4s" mediaRange="7114-14104"/>
            <SegmentURL media="main/news100/4.m4s" mediaRange="14105-17990"/>
        <Representation id="1" codecs="avc1" mimeType="video/mp4" width="320" height="240" startWithSAP="1" bandwidth="91932">
            <Initialization sourceURL="main/news200/1.m4s" range="0-864"/>
          <SegmentList duration="1">
            <SegmentURL media="main/news200/2.m4s" mediaRange="865-11523"/>
            <SegmentURL media="main/news200/3.m4s" mediaRange="11524-25621"/>
            <SegmentURL media="main/news200/4.m4s" mediaRange="25622-33693"/>
        <Representation id="1" codecs="avc1" mimeType="video/mp4" width="320" height="240" startWithSAP="1" bandwidth="270370">
            <Initialization sourceURL="main/news300/1.m4s" range="0-865"/>
          <SegmentList duration="1">
            <SegmentURL media="main/news300/2.m4s" mediaRange="866-26970"/>
            <SegmentURL media="main/news300/3.m4s" mediaRange="26971-72543"/>
            <SegmentURL media="main/news300/4.m4s" mediaRange="72544-95972"/>


Note: 音声と動画のストリームを異なるファイルに分割することも可能です。帯域幅に応じて優先順位を付けて個別に処理することができます。

MPD ファイルを生成すれば、<video>要素で参照することができます。

<video src="my.mpd" type="video.mp4"></video>


  <source src="my.mpd" type="video/mp4">
  <!-- fallback -->
  <source src="my.mp4" type="video/mp4">
  <source src="my.webm" type="video/webm">

Note: MPEG-DASH の再生は dash.js と Media Source Extensions のブラウザ対応に依存します。最新の dash.js リファレンスプレイヤー を参照してください。

HLS エンコーディング

HTTP Live Streaming (HLS) is an HTTP-based media streaming protocol implemented by Apple. It's incoprorated into iOS and OSX platforms and works well on mobile and desktop Safari and most Android devices with some caveats.

Media is usually encoded as MPEG-4 (H.264 video and AAC audio) and packaged into an MPEG-2 Transport Stream, which is then broken into segments and saved as one or more .ts media files. Apple provides tools to convert media files to the appropriate format.

HLS エンコーディングツール

HLS エンコードのための役立つツールがいくつかあります。

  • For HLS live stream encoding Adobe provide a Media Encoder for Mac.
  • The Stream Segmenter — provided by Apple for Mac platforms — takes a media stream from a local network and splits media into equally sized media files together with an index file.
  • Apple also provides a File Segmenter for Mac — which takes a suitably encoded file, splits it up and produces a index file, in a similar fashion to the Stream Segmenter.

Note: これらのツールについて詳しくは Using HTTP Live Streaming を読んでください。

インデックスファイル (プレイリスト)

The HLS Index File (much like MPEG-DASH's .mpd file) contains the information on where all the media segments reside, as well as other meta data such as bandwidth application. Apple uses the .m3u8 format (an extension of its .m3u playlist format) for index files — see below for an example:

# Old-style integer duration; avoid for newer clients.
# New-style floating-point duration; use for modern clients.

Note: Comprehensive information on how to encode media for Apple's HLS format can be found on Apple's Developer Pages.

See Also

Further resources on adaptive streaming.

General information

HLS overview and references

MPEG-DASH overview and references


Adaptive streaming examples





 このページの貢献者: niusounds
 最終更新者: niusounds,