ダウンロード ボタン プラグイン

このトピックでは、Brightcove Player のダウンロード プラグインについて学びます。このプラグインを使用すると、動画の mp4 ファイルまたは動画のトランスクリプトのテキスト ファイルをダウンロードできます。

はじめに

Download Plugin を追加するには、Players モジュールを使用した実装をご参照ください。

mp4 ダウンロードの例

Download Button

トランスクリプト ダウンロードの例

基本

ダウンロード プラグインは、プレーヤーの mediainfo オブジェクトに依存します。このオブジェクトが動作するには、いくつかのサブプロパティを含んでいる必要があります。

  • tags: tags 属性には、プレーヤーのメディア情報に関する情報が含まれます。ダウンロード ボタン プラグインを初期化するには、この配列に文字列 “downloadable“ を含める必要があり、その他の要素は無視されます。 
    tags: ["downloadable"]
  • sources: sources 配列には、プレーヤーが取り込むさまざまなソースに関する情報が含まれます。ダウンロード ボタン プラグインは、この配列内で最も高品質な mp4 ソースを探し、その他の要素は無視されます。container プロパティはソースが mp4 ファイルであるかを判定し、size プロパティは mp4 の品質を選択します。 
    
  sources: [{
      avg_bitrate: 2121000,
      codec: "H264",
      container: "MP4",
      duration: 734167,
      height: 720,
      size: 195024286,
      src: "https://examplesource.mp4",
      type: "video/mp4",
      width: 1728
    }]
  • transcripts: transcripts 配列には、プレーヤーに紐づくすべてのトランスクリプトが一覧表示されます。ダウンロード ボタン プラグインは、プレーヤーの言語と一致する言語のトランスクリプトを探します。一致するものがない場合は、リスト内の最初のトランスクリプトを選択します。src_lang プロパティがトランスクリプトの言語を決定します。 
    
  transcripts: [{
    default: false,
    id: "95423543d7-8363-49dd-9b1c-ff32365433fc0cda",
    label: "English",
    src: "https://examplesource.txt",
    src_lang: "en-US",
    status: null
    }]

ブラウザの互換性

このプラグインは、これら主要ブラウザの最新バージョンと互換性があります。

  • Chrome Desktop
  • Chrome Mobile（Android 6 以降）
  • Firefox Desktop
  • Edge
  • Safari Desktop *
  • Safari Mobile（iOS 11.2 以降） *

Players モジュールを使用した実装

この機能を有効にするには、プレーヤーを手動で設定します。

  1. PLAYERS モジュールを開き、新しいプレーヤーを作成するか、プラグインを追加したいプレーヤーを選択します。
  2. プレーヤーのリンクをクリックして、プレーヤーのプロパティを開きます。

  3. Overview タブの JSON Editor セクションを展開します。

    JSON Editor section on Overview tab

  4. JSON Editor オブジェクトに、download_button プロパティを追加します。

    利用可能な最高品質の MP4 ファイルをダウンロードするようプレーヤーを設定するには、このプロパティを定義する際に mp4 値を使用します。コードは次のようになります。

    Download MP4

    プレーヤーで使用される言語と一致するトランスクリプトのテキスト ファイル（一致するものがない場合は最初のトランスクリプト）をダウンロードするようプレーヤーを設定するには、download_button プロパティを定義する際に transcript 値を使用します。コードは次のようになります。

    Download Transcript
  5. Save をクリックします。

    6. この機能が有効になっているが、mp4 またはトランスクリプトが利用できない場合、ボタンは表示されますが無効化されます。

    Video disabled

ランタイム プロパティ

ダウンロード ボタンには player.downloadButton でアクセスできます。このオブジェクトには、便利な可能性のあるアクセス可能なプロパティがいくつかあります。

player.downloadButton.state

型: String

このプロパティは、ダウンロード ボタンの現在の状態を表します。有効なオプションは次のとおりです。

  • ready: ダウンロード ボタンはダウンロードを開始する準備ができています。
  • hidden: ダウンロード ボタンは非表示です。この状態は、downloadable タグが欠落している場合に発生します。
  • off: ダウンロード ボタンは DOM にありません。この状態は、ソースが無効または欠落している場合に発生します。

player.downloadButton.source

型: String

このプロパティには、ダウンロードされるソースの URL が含まれます。ダウンロード方法に応じて、これは mp4 ファイルへのリンク、またはトランスクリプトのテキスト ファイルへのリンクになります。

イベント

ダウンロード ボタン プラグインは、分析目的でいくつかのイベントをトリガーします。

  • download-ready: プラグインが正常に初期化されたときに発火します。

  • download-hidden: プラグインが初期化され、ボタンが非表示の場合に発火します。これは、mediainfo 内の tags 配列に ”downloadable” タグが欠落している場合に発生します。

  • download-disabled: プラグインが初期化され、ボタンが無効化されている場合に発火します。これは、mediainfo オブジェクトが欠落しているか、想定されるダウンロード方法に応じて sources または transcripts が無効である場合に発生します。

  • download-started: ダウンロード ボタンがクリックされ、ダウンロードが開始されたときに発火します。

  • download-finished: ダウンロードが正常に完了したときに発火します。このイベントは、ファイル名もリスナーに送信します。

  • download-failed: ダウンロードが失敗したときに発火します。このイベントは、エラーに関する情報もリスナーに送信します。