Download Button Plugin

In this topic, you will learn about the download plugin for Brightcove Player. This plugin will allow you to download an mp4 file of the video or a text file of the video transcript.

Introduction

To add the Download Plugin, see Implement using Players module.

Download mp4 example

Download transcript example

Download Button

Basics

The Download plugin relies on the player’s mediainfo object. This object needs to contain a few sub-properties to work.

  • tags: The tags attribute contains information about the player’s media info. To initialize the download button plugin, this array needs to include the string “downloadable“ and all other elements are ignored.
    tags: ["downloadable"]
  • sources: The sources array contains information about different sources pulled in by the player. The download button plugin looks for the highest quality mp4 source within this array; all other elements are ignored. The container property determines the source is an mp4 file, and the size property chooses the mp4 quality.
    
      sources: [{
          avg_bitrate: 2121000,
          codec: "H264",
          container: "MP4",
          duration: 734167,
          height: 720,
          size: 195024286,
          src: "https://examplesource.mp4",
          type: "video/mp4",
          width: 1728
        }]
    
  • transcripts: The transcripts array lists all of the transcripts tied to the player. The download button plugin looks for a transcript with a language that matches the player’s language. If none correspond, it selects the first transcript in the list. The src_lang property determines the transcript’s language.
    
      transcripts: [{
        default: false,
        id: "95423543d7-8363-49dd-9b1c-ff32365433fc0cda",
        label: "English",
        src: "https://examplesource.txt",
        src_lang: "en-US",
        status: null
        }]
    

Browser compatibility

The plugin is compatible with the latest versions of these major browsers:

  • Chrome Desktop
  • Chrome Mobile (on Android 6+)
  • Firefox Desktop
  • Edge
  • Safari Desktop *
  • Safari Mobile (iOS 11.2+) *

Implement using Players module

You configure the player manually to enable this function:

  1. Open the PLAYERS module and either create a new player or locate the player to which you wish to add the plugin.
  2. Click the link for the player to open the player's properties.
  3. Click JSON Editor in the left navigation menu.

    Left Navigation
  4. In the JSON Editor object, add the property download_button.

    To configure the player to download the highest quality MP4 file available, use the mp4 value when defining this property. Your code should look similar to this:

    Download MP4

    To configure the player to download a text file of the transcript that matches the language used on the player (or the first transcript if none match), use the transcript value when defining the download_button property. Your code should look similar to this:

    Download Transcript
  5. Click Save.
  6. In cases where this feature is enabled but an mp4 or transcript is not available, the button still appears but is disabled.

    Video disabled

Runtime properties

The download button can be accessed with player.downloadButton. This object has some accessible properties that could be useful.

player.downloadButton.state

Type: String

This property describes the current state of the download button. The following are the valid options:

  • ready: The download button is ready to start a download.
  • hidden: The download button is hidden. This state occurs when the downloadable tag is missing.
  • off: The download button is not in the DOM. This state occurs when the source is invalid or missing.

player.downloadButton.source

Type: String

This property contains a URL to the source to be downloaded. Depending on the download method, this can be a link to the mp4 file or a transcript text file.

Events

The download button plugin triggers a handful of events for analytic purposes.

  • download-ready: Fired once the plugin is initialized successfully.

  • download-hidden: Fired when the plugin is initialized and the button is hidden. This happens when the tags array in mediainfo is missing the ”downloadable” tag.

  • download-disabled: Fired when the plugin is initialized and the button is disabled. This happens when the mediainfo object is either missing or has invalid sources or transcripts depending on the expected download method.

  • download-started: Fired when the download button is clicked and a download begins.

  • download-finished: Fired when a download finished successfully. This event also sends the file name to the listener.

  • download-failed: Fired when a download fails. This event also sends information about the error to the listener.