HLSプラグイン

HLSプラグインは、 Brightcove Player W3CのMedia Source Extensions（MSE）に依存してHTTPを再生するプラグイン Live ネイティブでサポートしていないプラットフォームでのストリーミング（HLS）ビデオ。 HLSプラグインは自動的に player.

HLSプラグインの基礎

以下の点は、HLSプラグインの理解と使用に役立ちます。

このドキュメントの最初の文章で述べたように、プラグインはW3CのMedia Source Extensions（MSE）に依存しています。 MSEは、JavaScriptがHTML3ビデオをサポートするWebブラウザ内のメディアコーデックにバイトストリームを送信することを可能にするW5C仕様です。使用可能な他の用途の中でも、ストリーミングメディア用のクライアント側プリフェッチおよびバッファリングコードをJavaScriptで完全に実装することができます。
プラグインを使用すると、HLS（m3u8）ビデオコンテンツを player。たとえば、あなたは player メディアセクションにこの構成を使用：
```
"media":{
    "sources": [{
        "src": "http://example.com/video.m3u8",
        "type": "application/x-mpegURL"
    }]
}
```
HLSを使用する場合、クロスオリジンリソース共有（CORS）が問題になります。 CORSの使用方法の詳細については、「 CORSガイド.
HLSはIE11より前のIEのバージョンではサポートされていません。

概要

HTTP Live ストリーミング（HLS）は、iOSとAndroidでのネイティブサポートにより、モバイルデバイス上のストリーミングビデオのデファクトスタンダードとなっています。しかし、フォーマットを推薦するプラットフォームに依存しない理由はいくつかあります。

適応型ビットレート選択をサポートします。
標準のHTTPポート経由で配信
シンプルなテキストベースのマニフェストフォーマット
独自のストリーミングサーバーは不要

残念ながら、Safari以外の主要なデスクトップブラウザでは、HLSサポートが不足しています。そのため、Web開発者は同じビデオの別のレンディションを維持し、最高のデスクトップ視聴体験を提供するためにHTMLベースのビデオを完全に排除しなければならないという不運な立場に陥ります。

このプラグインは、Media Source ExtensionsまたはFlashがサポートされているブラウザでHLS用のポリフィルを提供することで対応します。単一のHLSストリームを展開し、通常のHTML5ビデオAPIに対してコードを作成し、すべての大きなWebデバイスカテゴリにわたって高速かつ高品質のビデオエクスペリエンスを作成できます。

現在、現時点では いいえ へのサポート：

別のオーディオおよびビデオトラック
セグメントコーデック 以外の H.ACNUMXとAACオーディオ
Internet Explorer <11

オプション

HLSプラグインの設定にはいくつかのオプションがあります。

WithCredentials

タイプ： boolean

以下のように使用できます。

ソースオプション
初期化オプション

時 withCredentials プロパティがに設定されています trueマニフェストとセグメントに対するすべてのXHRリクエストは、 withCredentials に設定 true 同じように。これにより、マニフェストとセグメントが存在するサーバーからのクッキーを格納して渡すことができます。 CORSにはいくつかの意味があります。 Access-Control-Allow-Origin ヘッダーをに設定することはできません *また、応答ヘッダーには、 Access-Control-Allow-Credentials ヘッダは true。見る HTML5Rocksの記事詳細はこちら

既知の問題： withCredentials デスクトップやデバイスのSafariでは動作しません。

プラグインを設定するには、 Player Management API HTTPを使用して PATCH メソッドを呼び出します。

curl \
    --header "Content-Type: application/json" \
    --user YOUR_EMAIL \
    --request PATCH \
    --data '{ "hls": { "withCredentials": true } }' \
https://players.api.brightcove.com/v2/accounts/YOUR_ACCOUNT_ID/players/YOUR_PLAYER_ID/configuration

また、 withCredentials オプションではなく、ソースごとのオプション player 示されているように基礎。たとえば、ソースを設定するときに含めることができます withCredentialsここに示すように、

curl \
  --header "Content-Type: application/json" \
  --user $EMAIL \
  --request POST \
  --data '{
      "name": "MySamplePlayer",
      "configuration": {
        "media": {
          "sources": [{
            "src":"http://solutions.brightcove.com/bcls/assets/videos/Tiger.mp4",
            "type":"video/mp4",
            "withCredentials": true
          }]
        }
      }
    }' \
https://players.api.brightcove.com/v2/accounts/$ACCOUNT_ID/players

実行時設定

あなたは withCredentials 実行時に次の2つの実装があります。

使い方 player.hls.xhr.beforeRequest
使い方 player.src()

次のコードでは、 player.hls.xhr.beforeRequest を作成するために使用されるオプションを含むオブジェクトで呼び出される関数を割り当てる xhr 要求。この例では、 withCredentials が構成されています。

if (videojs.Hls) {
  videojs.Hls.xhr.beforeRequest = function (options) {
    options.withCredentials = true;
  }
}

また、 withCredentials ビデオソースを設定するときのオプション。あなたは player.src() メソッドを呼び出します。

IMA3広告でFirefoxを使用しているときにこの設定オプションが動作しないという既知の問題があります。あなたは使うことができます player.hls.xhr.beforeRequest この問題を回避する。

player.src({
  src: 'https://adomain.com/bipbop_16x9_variant.m3u8',
  type: 'application/x-mpegURL',
  withCredentials: true
});

enableLowInitialPlaylist

タイプ： boolean

デフォルト： undefinedブラウザがAndroidデバイスで表示されている場合を除く。それはに設定されています true。 Androidデバイスのこの動作を変更するには、 player、以下に示すように、値は false.

以下のように使用できます。

初期化オプション

ブドウやコーヒーチェリーのような甘い果実の発酵過程において、野生酵母は糖類を用いてアルコール発酵します。アルコールは酢酸菌によって更に酢酸（お酢）に転化します。 enableLowInitialPlaylist がtrueに設定されている場合、最初に最低ビットレートのプレイリストを選択するために使用されます。これにより、再生開始時間を短縮できます。

プラグインを設定するには、 Player Management API HTTPを使用して PATCH メソッドを呼び出します。

curl \
    --header "Content-Type: application/json" \
    --user YOUR_EMAIL \
    --request PATCH \
    --data '{ "hls": { "enableLowInitialPlaylist": true } }' \
https://players.api.brightcove.com/v2/accounts/YOUR_ACCOUNT_ID/players/YOUR_PLAYER_ID/configuration

実行時プロパティ

一般に、この方法でHLSオブジェクトにアクセスできます。

Brightcove Player v5： player.hls
Brightcove Player v6： player.tech().hls
注意してください player.tech() 上級ユーザーにのみ推奨されるため、コンソールに警告が記録されます。あなたはパスすることができます player.tech(true) 警告を抑制する。

player.hls.playlists.master

タイプ： object

解析されたマスタープレイリストを表すオブジェクトです。メディアプレイリストが直接ロードされている場合は、エントリが1つしかないマスタープレイリストが作成されます。

player.hls.playlists.media

タイプ： function

現在アクティブなメディアプレイリストを取得または変更するために使用できる関数。アクティブなメディアプレイリストは、追加のビデオデータをダウンロードする必要があるときに参照されます。引数なしでこの関数を呼び出すと、アクティブなメディアプレイリストの解析されたプレイリストオブジェクトが返されます。マスタープレイリストからのプレイリストオブジェクトまたはマスタープレイリストで指定されたURI文字列を使用してこの関数を呼び出すと、指定したメディアプレイリストの非同期ロードが開始されます。取得されると、アクティブなメディアプレイリストになります。

player.hls.bandwidth

タイプ： number

最後のセグメントダウンロードでダウンロードされた1秒あたりのビット数。この値は、デフォルトの実装で使用されます。 selectPlaylist 再生する適切なビットレートを選択します。最初の動画セグメントがダウンロードされる前に、正確に帯域幅を見積もるのは難しいです。 HLS技術者は、この推定をデフォルトで行うために、プレイリストのダウンロード時間に基づくヒューリスティックを使用する。より正確な帯域幅情報源がある場合は、HLSテクチャがロードされてすぐに初期帯域幅推定値を提供するとすぐにこの値を上書きできます。

player.hls.stats.bytesReceived

タイプ： number

HLS技術によってダウンロードされたコンテンツバイトの合計数。

player.hls.selectPlaylist

タイプ： function

次のセグメントのダウンロードに使用するメディアプレイリストオブジェクトを返す関数。新しいセグメントがダウンロードされる直前にプラグインによって呼び出されます。この機能をオーバーライドして、アダプティブストリーミングロジックを提供することができます。ただし、メディアプレイリストオブジェクトを返すことを忘れないでください。 player.hls.playlists.master.

イベント

loadedmetadata

最初のメディアプレイリストがストリーム用にダウンロードされた後に発生します。

読み込まれたプレイリスト

新しいマスターまたはメディアプレイリストがダウンロードされた直後に発動します。デフォルトでは、プラグインは必要に応じてプレイリストのみをダウンロードします。

中期

新しいプレイリストがアクティブメディアプレイリストになると発生します。実際のレンダリング品質の変更は、このイベントと同時には発生しません。新しいセグメントを要求し、既存のバッファを先に使い果たす必要があります。

エラー時にソースをリロードする

HLSプラグインを使用する場合、エラーが発生したときに現在の時刻にソースをリロードするメソッドを呼び出すことができます。 player。この機能をオンにするには、 reloadSourceOnError() 方法。以下の短いビデオは、その方法を示しています。ビデオに表示されているすべてのコードについては、このセクションの後半で説明します。

注：もともとはライブストリーミングを意図していましたが、 reloadSourceOnError() ビデオに表示されているように、ビデオオンデマンドでも機能します。

のシンタックス reloadSourceOnError() メソッドは次のとおりです。

reloadSourceOnError(optionsObject)

オプション optionsObject 以下の特性を有する：

プロパティ	データ型	デフォルト値	説明
`errorInterval`	数	30	リロードがトリガーするための2つのエラーの間を通過しなければならない最小時間（秒単位）。たとえば、時刻を10に設定すると、エラーが発生するたびに、リロードが10秒前に発生したかどうかがチェックされます。時間間隔が経過していない場合、ソースはリロードされません。（これは、エラーのあるコンテンツが常にリロードされないようにするためです）。指定された間隔を超える時間が経過すると、エラーが発生した時点でビデオがリロードされます。
`getSource()`	関数	現在のソースを取得する	ソースオブジェクトをロードまたは再ロードするために呼び出される関数。デフォルトでは、現在のソースを取得します player.

上記のビデオデモンストレーションで使用されたコードの詳細は次のとおりです。

1〜9行目：標準のページはめ込み埋め込みコード player id 追加された。
Line 11：手動でエラーを作成するボタン。
22-24：ボタンクリック時に呼び出される関数で、エラーを送出します。
Line 19：設定オプションを配置するオブジェクトを作成します。
Line 20：設定オブジェクトで、 errorInterval プロパティに値を割り当てます。
ライン21： reloadSourceOnError() メソッドを呼び出し、設定オブジェクトを引数として渡します。

<video-js id="myPlayerID"
  data-video-id="4607746980001"
  data-account="1507807800001"
  data-player="HJLp3Hvmg"
  data-embed="default"
  data-application-id
  class="video-js"
  controls
></video-js>

<p><button onclick="createError()">createError</button></p>

<script src="https://players.brightcove.net/1507807800001/HJLp3Hvmg_default/index.min.js"></script>

<script type="text/javascript">
  var createError;
  videojs.getPlayer('myPlayerID').ready(function() {
    var myPlayer = this,
      reloadOptions = {};
    reloadOptions.errorInterval = 10;
    myPlayer.reloadSourceOnError(reloadOptions);
    createError = function(){
      myPlayer.error({code:'2'});
    }
  });
</script>

インマニフェストWebVTT

HLSプラグインは、マニフェスト内のWebVTTをサポートしています。この機能をプラグインの標準として使用するには、何もする必要はありません。ビデオは、マニフェスト内のWebVTTを考慮して取り込む必要があります。たとえば、 Brightcove Dynamic Ingest API ビデオを取り込み、キャプションをインマニフェストとして設定することができます。を参照してください概要： Dynamic Ingest API 動的配送用詳細については、文書を参照してください。

player 以下は、マニフェスト内のWebVTTキャプション付きのビデオの再生です。次に示すように、キャプションアイコンを使用してキャプションを選択できます。

ビデオを開始すると、見たいキャプションを選択することができます。

簡単に言うと、これは自分で作成するものではないため、以下に示すビデオのマニフェストです player 上記：

#EXTM3U
#EXT-X-MEDIA:TYPE=SUBTITLES,GROUP-ID="subs",NAME="Woofer",DEFAULT=NO,AUTOSELECT=YES,FORCED=NO,LANGUAGE="en",URI="subtitles/en/index.m3u8"
#EXT-X-MEDIA:TYPE=SUBTITLES,GROUP-ID="subs",NAME="Woofer (Forced)",DEFAULT=NO,AUTOSELECT=NO,FORCED=YES,LANGUAGE="en",URI="subtitles/en_forced/index.m3u8"
#EXT-X-MEDIA:TYPE=SUBTITLES,GROUP-ID="subs",NAME="Spanish",DEFAULT=NO,AUTOSELECT=YES,FORCED=NO,LANGUAGE="es",URI="subtitles/es/index.m3u8"
#EXT-X-MEDIA:TYPE=SUBTITLES,GROUP-ID="subs",NAME="Spanish (Forced)",DEFAULT=NO,AUTOSELECT=NO,FORCED=YES,LANGUAGE="es",URI="subtitles/es_forced/index.m3u8"
#EXT-X-STREAM-INF:BANDWIDTH=865000,CODECS="mp4a.40.2, avc1.42001e",RESOLUTION=640x360,SUBTITLES="subs"
865/prog_index.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=12140000,CODECS="mp4a.40.2, avc1.42001e",RESOLUTION=1280x720,SUBTITLES="subs"
12140/prog_index.m3u8

その中にキャプションファイルへの参照が表示されます。

適応スイッチング

HLSレンディション選択

再生中、 player アルゴリズムに基づいて、より高いまたはより低いレンディションに切り替えます。このアルゴリズムへの入力は次のとおりです。

利用可能な帯域幅
Player 大きさ

レンディション選択の詳細については、再生するレンディションの決定の資料をご参照ください。

MP4レンディション選択

何らかの理由で Brightcove Player HLSソースを再生できません。MP4の再生にフォールバックします。この場合、モバイルデバイスでビデオを表示してMP4を再生すると、 player .4 MB /秒に最も近いビットレートを持つMP5を選択します。デスクトップまたはラップトップデバイスの場合、4 MB /秒に最も近いMP3レンディションが選択されます。

インバンドメタデータ

Brightcove Player HLSビデオストリームに埋め込まれた特定の種類のID3タグ情報を認識します。 ID3規格はもともとMP3オーディオトラックに関するメタデータを提供するために使用されました。（頭字語はからです IDMPをエンゲージする3。）埋め込まれたメタデータでストリームに遭遇すると、インバンドのメタデータのテキストトラックが自動的に作成され、ストリームで遭遇したときに手がかりが取り込まれます。一般的な使用例は、ライブストリームに広告を表示するときにID3データが指示するデータです。

ID3標準では多くのフレームタイプが定義されていますが、次の2つのUTF-8エンコードフレームのみがキューポイントにマップされ、その値がキューテキストとして設定されます。

WXXX - ユーザー定義のURLリンクフレーム
TXXX - ユーザ定義テキスト情報フレーム

キューは他のすべてのフレームタイプ用に作成され、データは生成されたキューに添付されます。

cue.frame.data

一般的なテキストトラックの詳細については、トラック要素の使い方。情報について Brightcove Player キューポイントが表示されます広告キューポイントを使用した広告の表示.

デバッギング

このセクションの情報は、あなたに渡される情報を収集するために提供されています Brightcove HLSの問題を解決するためのサポート。つまり、報告されたデータの中にはあなたにとって興味深いものがあると言われています。

HLSのデバッグを支援する2つのメソッドと1つのプロパティについて詳しく説明します。

メソッド：videojs.log.level（）

videojs.log.level() メソッドは現在のロギングレベルを取得または設定します。使用するデバッグを有効にするには：

videojs.log.level('debug');

メソッド：videojs.log.history（）

history() メソッドは、履歴に記録されたすべてを含む配列を返します。

メッセージに記録されるすべてのメッセージ videojs.log APIが追加されます history アレイ。その配列にどのような情報が配置されるかは、APIを使用する使用中のプラグイン、および player。これは、履歴に非HLS情報を簡単に含めることができることを意味します。のコンソールからの表示例 history 配列は次のとおりです。

両方の level() と history() メソッドは log クラス、参照ドキュメントがあるここ.

送信する必要がある場合 history アレイをサポートするには、コンソールで次のように入力します。

JSON.stringify(videojs.log.history())

次のような情報が表示されます。

生成され、サポートに送信できるJSONをコピーします。

プロパティ： player.tech（）。hls.stats

このオブジェクトには、HLSの概要と player 関連する統計。使用可能なプロパティを次の表に示します。

プロパティ名	種類	説明
帯域幅	数	最後のセグメントダウンロードのレート（ビット/秒）
緩衝	配列	SourceBufferにあるコンテンツの時間範囲のリスト
currentSource	オブジェクト	ソースオブジェクト。構造を有する `{src: 'url', type: 'mimetype'}`
currentTech	文字列	使用している技術の名前
現在の時刻	数	の現在位置 player
デュレーション	数	ビデオの長さ（秒）
マスター	オブジェクト	マスタープレイリストオブジェクト
mediaBytesTransferred	数	ダウンロードされた合計コンテンツバイト数
mediaRequests	数	メディアセグメント要求の総数
mediaRequestsAborted	数	中断されたメディアセグメント要求の合計数
mediaRequestsErrored	数	エラーが発生したメディアセグメント要求の総数
mediaRequestsTimeout	数	タイムアウトメディアセグメント要求の合計数
mediaSecondsLoaded	数	ダウンロードされた総コンテンツ秒数
mediaTransferDuration	数	メディアセグメントのダウンロードに費やされた合計時間（ミリ秒単位）
player寸法	オブジェクト	の幅と高さが含まれています player
検索可能な	配列	対象となる時間範囲のリスト player 求めることができる
タイムスタンプ	数	タイムスタンプ `hls.stats` アクセスされた
videoPlaybackQuality	オブジェクト	メディア再生品質メトリックは、 W3Cのメディア再生品質API

バージョン5を使用している場合 Brightcove Player あなたが使用する必要があります player.tech_.hls.stats 表に示すHLS情報を取得します。また、バージョン5実装では、一部のプロパティは使用できません。

コンソールからの表示例 stats オブジェクトは次のとおりです。

コード例

これらのデバッグ機能を試してみたい場合は、次のことに基づいてサーバーを開始点として使用できます。

<video-js id="myPlayerID" data-video-id="5622718636001"
  data-account="1507807800001"
  data-player="SkxERgnQM"
  data-embed="default"
  data-application-id
  class="video-js"
  controls
  width="640"
  height="360"></video-js>
<script src="https://players.brightcove.net/1507807800001/SkxERgnQM_default/index.min.js"></script>

<script type="text/javascript">
  videojs.getPlayer('myPlayerID').ready(function() {
    var myPlayer = this;

    videojs.log.level('debug');

    myPlayer.on('ended', function(){
      console.log('videojs.log.history(): ', videojs.log.history());
      console.log('videojs.log.level(): ', videojs.log.level());
      console.log('videojs.hls.stats: ', player.tech().hls.stats);
    });
  });
</script>

608のキャプション

BrightcoveのHLSプラグインは、608キャプションをサポートしています。 CEA-608キャプション、EIA-608キャプション、およびライン608キャプションとも呼ばれる21キャプションは、米国およびカナダでのNTSC TVアナログ放送のクローズドキャプションの標準です。 608キャプションは、ライブストリームに挿入することができます。ライブストリームでは、HLS ' ts （トランスポートストリーム）ファイル。

ホスティングの問題

ネイティブHLS実装とは異なり、HLSプラグインはブラウザのセキュリティポリシーに準拠する必要があります。つまり、ストリームを構成するすべてのファイルは、ビデオをホストしているページと同じドメインから提供する必要があります player または適切なサーバーから CORSヘッダー設定されます。簡単説明は利用可能です一般的なWebサーバでは、ほとんどのCDNはあなたのアカウントでCORSを有効にするのに問題はありません。

エラー

HLS再生中のエラーは、タイプを使用して報告されます APPEND_BUFFER_ERR。メッセージは、ブラウザのネイティブエラーから取得されたものになります。例えば、 クォータを超えました.

変更履歴

見ます変更履歴はこちら.

ページ内容

HLSプラグイン

HLSプラグインの基礎

概要

オプション

WithCredentials

実行時設定

enableLowInitialPlaylist

実行時プロパティ

player.hls.playlists.master

player.hls.playlists.media

player.hls.bandwidth

player.hls.stats.bytesReceived

player.hls.selectPlaylist

イベント

loadedmetadata

読み込まれたプレイリスト

中期

エラー時にソースをリロードする

インマニフェストWebVTT

適応スイッチング

HLSレンディション選択

MP4レンディション選択

インバンドメタデータ

デバッギング

メソッド：videojs.log.level（）

メソッド：videojs.log.history（）

プロパティ： player.tech（）。hls.stats

コード例

608のキャプション

ホスティングの問題

エラー

変更履歴