サポート サポート問い合わせ先 | システムステータス システムステータス
ページ内容

    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の記事 詳細はこちら

    プラグインを設定するには、 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() メソッドを呼び出します。

    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.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(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 配列は次のとおりです。

    履歴配列のコンソール表示

    送信する必要がある場合 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

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

    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。 メッセージは、ブラウザのネイティブエラーから取得されたものになります。 例えば、 クォータを超えました.

    変更履歴

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


    ページの最終更新日:28年2020月XNUMX日