設定自適應流媒體源

假設您想在伺服器上設定一個自適應流媒體源，以便在 HTML 媒體元素中使用。您將如何操作？本文解釋瞭如何操作，並介紹了兩種最常見的格式：MPEG-DASH 和 HLS（HTTP 即時流）。

選擇格式

在自適應流格式方面，有很多選擇；我們決定選擇以下兩種，因為它們之間可以支援大多數現代瀏覽器。

  • MPEG-DASH
  • HLS（HTTP 即時流）

為了自適應地流式傳輸媒體，我們需要將媒體分成塊。我們需要提供多個不同質量的檔案，這些檔案分佈在多個時間點上。質量和時間點越多，流的“自適應性”就越強，但我們通常希望在大小、編碼時間和自適應性之間找到一個務實的平衡。

好訊息是，一旦我們以適當的格式對媒體進行編碼，我們就幾乎可以開始了。對於透過 HTTP 進行的自適應流，不需要特殊的伺服器端元件。

MPEG-DASH 和 HLS 都使用播放列表格式來構建構成可能流的媒體元件。各種位元率流被分成片段並放置在相應的伺服器資料夾中——我們必須向媒體播放器提供一個連結來查詢檔案或播放列表，這些檔案或播放列表指定了這些流資料夾的名稱和位置。

MPEG-DASH 編碼

MPEG-DASH 是一種自適應位元率流技術，它支援透過網際網路從傳統的 HTTP Web 伺服器交付媒體內容。

媒體演示描述 (MPD) 檔案用於儲存有關各種流及其關聯頻寬的資訊。在您的影片源 (src) 屬性中，您指向 MPD 而不是像非自適應媒體那樣指向媒體檔案。

MPD 檔案告訴瀏覽器各種媒體片段位於何處，它還包括諸如 mimeType 和編解碼器之類的元資料，以及其他詳細資訊，例如位元組範圍——它是一個 XML 文件，在許多情況下將為您生成。

我們可以使用一些配置檔案。我們將看看用於點播 (VOD) 的按需配置檔案和即時配置檔案。

對於即時服務流，即時配置檔案是必需的。配置檔案之間的流切換功能相同。

使用即時配置檔案而不是按需配置檔案進行 VOD 內容的其他原因可能是

  1. 您的客戶端或伺服器不支援範圍請求
  2. 您的伺服器無法有效地快取範圍請求
  3. 您的伺服器無法有效地預取範圍請求
  4. SIDX* 很大，並且必須首先載入它會稍微減慢啟動速度
  5. 您希望將原始檔案用於 DASH 和其他形式的交付（例如 Microsoft Smooth Streaming）作為過渡策略
  6. 您可以將相同的媒體檔案用於即時傳輸和稍後的 VOD

*SIDX 或 SegmentIndexBox 是一個結構，透過給出其最早的呈現時間和其他元資料來描述一個片段，並且通常會構成 MPD 檔案的大部分。

按需配置檔案

此配置檔案允許在“按需”之間切換流——也就是說，您只需要提供一組連續的檔案併為每個檔案指定頻寬，然後將自動選擇相應的檔案。

這是一個簡單的示例，它提供了一個音訊軌道表示和四個單獨的影片表示。

xml
<?xml version="1.0" encoding="UTF-8"?>
<MPD xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xmlns="urn:mpeg:dash:schema:mpd:2011"
  xsi:schemaLocation="urn:mpeg:dash:schema:mpd:2011 DASH-MPD.xsd"
  type="static"
  mediaPresentationDuration="PT654S"
  minBufferTime="PT2S"
  profiles="urn:mpeg:dash:profile:isoff-on-demand:2011">

  <BaseURL>http://example.com/ondemand/</BaseURL>
  <Period>
    <!-- English Audio -->
    <AdaptationSet mimeType="audio/mp4" codecs="mp4a.40.5" lang="en" subsegmentAlignment="true" subsegmentStartsWithSAP="1">
      <Representation id="1" bandwidth="64000">
        <BaseURL>ElephantsDream_AAC48K_064.mp4.dash</BaseURL>
      </Representation>
    </AdaptationSet>
    <!-- Video -->
    <AdaptationSet mimeType="video/mp4" codecs="avc1.42401E" subsegmentAlignment="true" subsegmentStartsWithSAP="1">
      <Representation id="2" bandwidth="100000" width="480" height="360">
        <BaseURL>ElephantsDream_H264BPL30_0100.264.dash</BaseURL>
      </Representation>
      <Representation id="3" bandwidth="175000" width="480" height="360">
        <BaseURL>ElephantsDream_H264BPL30_0175.264.dash</BaseURL>
      </Representation>
      <Representation id="4" bandwidth="250000" width="480" height="360">
        <BaseURL>ElephantsDream_H264BPL30_0250.264.dash</BaseURL>
      </Representation>
      <Representation id="5" bandwidth="500000" width="480" height="360">
        <BaseURL>ElephantsDream_H264BPL30_0500.264.dash</BaseURL>
      </Representation>
    </AdaptationSet>
  </Period>
</MPD>

生成 MPD 檔案後，您可以從影片標籤內引用它。

html
<video src="my.mpd" type="application/dash+xml"></video>

最好為尚不支援 MPEG-DASH 的瀏覽器提供備用方案

html
<video>
  <source src="my.mpd" type="application/dash+xml" />
  <!-- fallback -->
  <source src="my.mp4" type="video/mp4" />
  <source src="my.webm" type="video/webm" />
</video>

即時配置檔案

處理 MPEG-DASH 時一個有用的軟體是Dash Encoder。它使用MP4Box將媒體編碼為 MPEG-DASH 格式。

注意：您需要熟悉 make 檔案和安裝依賴項才能使此軟體正常執行。

注意：由於 MPEG-DASH 解碼部分使用 JavaScript 完成，並且 MSE 檔案通常使用 XHR 獲取，請記住同源策略。

注意：如果您使用 WebM，則可以使用本教程中所示的方法HTML 5 影片的 DASH 自適應流。

編碼後，您的檔案結構可能如下所示

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
<?xml version="1.0"?>
  <MPD xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 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">
    <BaseURL>
      http://example.com/segments
    </BaseURL>
    <Period start="PT0S">
      <AdaptationSet bitstreamSwitching="true">

        <Representation id="0" codecs="avc1" mimeType="video/mp4" width="320" height="240" startWithSAP="1" bandwidth="46986">
          <SegmentBase>
            <Initialization sourceURL="main/news100/1.m4s" range="0-862"/>
          </SegmentBase>
          <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"/>
          </SegmentList>
        </Representation>

        <Representation id="1" codecs="avc1" mimeType="video/mp4" width="320" height="240" startWithSAP="1" bandwidth="91932">
          <SegmentBase>
            <Initialization sourceURL="main/news200/1.m4s" range="0-864"/>
          </SegmentBase>
          <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"/>
          </SegmentList>
        </Representation>

        <Representation id="1" codecs="avc1" mimeType="video/mp4" width="320" height="240" startWithSAP="1" bandwidth="270370">
          <SegmentBase>
            <Initialization sourceURL="main/news300/1.m4s" range="0-865"/>
          </SegmentBase>
          <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"/>
          </SegmentList>
        </Representation>

        …

      </AdaptationSet>
    </Period>
  </MPD>

MPD 檔案告訴瀏覽器各種媒體片段位於何處，它還包括諸如 mimeType 和編解碼器之類的元資料，以及其他詳細資訊，例如位元組範圍。通常，這些檔案將為您生成。

注意：您還可以將音訊和影片流分成單獨的檔案，然後可以根據頻寬分別對它們進行優先順序排序和提供服務。

生成 MPD 檔案後，您可以從<video>元素中按預期引用它

html
<video src="my.mpd" type="application/dash+xml"></video>

最好提供一個備用方案

html
<video>
  <source src="my.mpd" type="application/dash+xml" />
  <!-- fallback -->
  <source src="my.mp4" type="video/mp4" />
  <source src="my.webm" type="video/webm" />
</video>

注意：MPEG-DASH 播放依賴於dash.js和瀏覽器對媒體源擴充套件的支援，請參閱最新的dash.js 參考播放器。

HLS 編碼

HTTP 即時流 (HLS) 是 Apple 實現的一種基於 HTTP 的媒體流協議。它已整合到 iOS 和 OSX 平臺中，並且在移動和桌面 Safari 以及大多數 Android 裝置上都能很好地工作，但有一些注意事項。

媒體通常編碼為 MPEG-4（H.264 影片和 AAC 音訊），並打包到 MPEG-2 傳輸流中，然後將其分解成片段並儲存為一個或多個.ts媒體檔案。Apple 提供工具將媒體檔案轉換為適當的格式。

HLS 編碼工具

有許多有用的工具可用於 HLS 編碼

  • 流片段器——Apple 為 Mac 平臺提供的工具——從本地網路獲取媒體流，並將媒體分成大小相等的媒體檔案以及索引檔案。
  • Apple 還為 Mac 提供了檔案片段器——它接收適當編碼的檔案，將其分解並生成索引檔案，方式類似於流片段器。

注意：您可以在使用 HTTP 即時流中找到有關這些工具的更多詳細資訊。

索引檔案（播放列表）

HLS 索引檔案（類似於 MPEG-DASH 的.mpd檔案）包含有關所有媒體片段所在位置的資訊，以及其他元資料，例如頻寬應用程式。Apple 使用.m3u8格式（其.m3u播放列表格式的擴充套件）作為索引檔案——請參見下面的示例

#EXT-X-VERSION:3
#EXTM3U
#EXT-X-TARGETDURATION:10
#EXT-X-MEDIA-SEQUENCE:1

# Old-style integer duration; avoid for newer clients.
#EXTINF:10,
http://media.example.com/segment0.ts

# New-style floating-point duration; use for modern clients.
#EXTINF:10.0,
http://media.example.com/segment1.ts
#EXTINF:9.5,
http://media.example.com/segment2.ts
#EXT-X-ENDLIST

注意：有關如何為 Apple 的 HLS 格式編碼媒體的全面資訊，請參閱Apple 的開發者頁面。

另請參閱

有關自適應流的更多資源。

一般資訊

HLS 概述和參考

MPEG-DASH 概述和參考

MPEG-DASH 工具

自適應流示例