Step-by-Step: Brightcove Player

Product(s)
Video Cloud
Brightcove Player
Role(s)
Player Developer
Task(s)
Get Started with Player Development

This document provides a hands-on introduction to creating a Brightcove Player, then using two different code implementations to publish a video using the newly created player. You will also programmatically start the video playing and then add a plugin to the player.

Overview

In this quick start you will perform the following tasks:

  • Create a player using Studio
  • Publish a video in the player using Studio
  • Use the iframe player implementation
  • Use the In-page embed implementation
  • Programmatically play the video
  • Add the overlay plugin to the player

Create player

To create a new player, follow these steps.

  1. Login to Studio at https://studio.brightcove.com/.
  2. The current account name will appear in the upper right corner of the page. If you have multiple accounts, click the current account link and select the account in which you would like to create the player.
    select current account
  3. Click the Players link in the navigation header.
  4. Click the New Player button.
  5. Enter a Name and Short Description for the player. For this quick start, the player name will be Sample Player.
    player diaglo
  6. Confirm that the newly created player appears in the list of players.
    list of players

Publish video in player

You publish a video in the newly created player in the Media module. Once you associate the video with your player you publish the video and will then have access to three implementations in which to view the video in your player.

To publish a video in your player, follow these steps:

  1. In Studio navigate to the Media module by clicking on the Media link in the main menu.
  2. Click in the row for the video THAT DOES NOT HAVE AN AUDIO TRACK that you wish to publish in your player, then click Publish and Embed....
    select video
  3. From the Select a Player dropdown menu, choose your newly created player.
    publish UI
  4. You now have access to the three implementations of the player: Standard (iframe), Advanced (In-Page) and a Preview in browser URL. Do not close this window as you will be copying code from it numerous times later in this quick start.
    publish UI

You will use the JSON editor to add a video to the player. To configure the video content, follow these steps.

  1. Click the link for the Sample Player to open the player properties page.
  2. Click JSON Editor in the left navigation menu.
  3. Place a comma after the SECOND TO THE LAST brace in the JSON.
  4. Just above the last closing brace, add the following to assign a video and poster to the player. Of course, you can substitute your own video and poster.
    "media": {
      "sources": [{
        "src": "//solutions.brightcove.com/bcls/assets/videos/BirdsOfAFeather.mp4",
        "type": "video/mp4"
      }],
        "poster": {
          "highres": "//solutions.brightcove.com/bcls/assets/images/BirdsOfAFeather.jpg"
        }
    }
  5. Your JSON should appear similar to the following (the added text is highlighted in yellow):
    json editor
  6. Click Save.
  1. Click Publish & Embed and then Publish Changes to publish your player.
  2. On the same dialog where you published your changes you can also copy the Standard (iframe) or Advanced (in-page embed) player implementation code. Note that the implementation code will reflect the Sizing (Responsive or Fixed), Aspect Ratio and Dimensions choices made and saved in the Player Information options.
  3. Copy both of the code implementation types to a text file for later use.

Use Standard code

  1. Create an HTML page and paste the Standard (iframe) code from the previous step into the body.
  2. When you browse this page you will see the video reflects the Sizing (Responsive or Fixed), Aspect Ratio and Dimensions choices made.

Use Advanced embed code

In this section you will use the Advanced (in-page embed) code implementation.

  1. Create an HTML page and paste the Advanced (in-page embed) code from above, into the body.
  2. Examine the code, which will appear similar to the following, and note the attributes:
    <video-js data-account="1507807800001"
      data-player="EUYJo0AOB"
      data-embed="default"
      controls=""
      data-video-id="6071787405001"
      data-playlist-id=""
      data-application-id=""
      width="640" height="360"></video-js>
    <script src="https://players.brightcove.net/1507807800001/default_default/index.min.js"></script>
    • data-account: The account number
    • data-player: The ID of the Brightcove Player
    • data-embed: Either default if the player is a parent embed, or the ID of the parent player; see Embed APIs Guide for more information on embeds (parent/child players)
    • controls: Acts as a Boolean if the player controls should be present (controls attribute included in the tag), or not shown (controls attribute not present in the tag)
    • data-video-id: The ID of the Video Cloud video
    • data-playlist-id: The ID of the Video Cloud playlist
    • data-application-id: Allows you to re-use a single player, but differentiate analytics on a per-site or per-application basis; see Adding an Application ID to the Player Embed Code for more information
    • width & height: Sets player dimensions.
    • <script> tag: Any time you use in-page code there will be an accompanying script tag; the referenced JavaScript file contains all JavaScript and CSS associated with the particular player
  3. Examine the code, which will appear similar to the following, and note the attributes:
    <video data-account="1507807800001"
      data-player="H15p1gTkg"
      data-embed="default"
      data-application-id
      class="video-js"
      controls></video>
    <script src="https://players.brightcove.net/1507807800001/H15p1gTkg_default/index.min.js"></script>
    • data-account: The account number
    • data-player: The ID of the Brightcove Player
    • data-embed: Either default if the player is a parent embed, or the ID of the parent player; see Embed APIs Guide for more information on embeds (parent/child players)
    • class: The standard Brightcove Player CSS class associated with in-page embed code
    • controls: Acts as a Boolean if the player controls should be present (controls attribute included in the tag), or not shown (controls attribute not present in the tag)
    • <script> tag: All associated JavaScript and CSS associated with the particular player
  4. When you browse this page you will see the video reflects the Sizing (Responsive or Fixed), Aspect Ratio and Dimensions choices made.

Programmatically play video

There is a rich API to use with Brightcove Player. In this section you will use the play() method to programmatically start the video playing.

  1. Add an id attribute to the video tag with a value of myPlayerID.
    <video id="myPlayerID" 
  2. Just above the closing body tag, insert a script block.
    <script>
    </script>
    
    </body>
  3. In the script block, use the on() method to listen for the loadedmetadata event. When the event is dispatched an anonymous event handler function is called.
     videojs.getPlayer('myPlayerID').on('loadedmetadata', function() {
    });
  4. Create a variable local to the function, named myPlayer, that assigns the player instance, referenced as this, to that variable.
    var myPlayer = this;
  5. Since most browsers no longer allow autoplay for videos with an audio track, it is best to use the muted() method to mute the video and ensure the video will autoplay.
    myPlayer.muted(true);

    See the Autoplay Considerations document for more information on the autoplay issue.

  6. Use the player's play() method to start the video.
    myPlayer.play();
  7. Confirm your script block appears as follows.
     <script>
      videojs.getPlayer('myPlayerID').on('loadedmetadata', function() {
        var myPlayer = this;
        myPlayer.muted(true);
        myPlayer.play();
      });
    </script>
  8. Save your changes and refresh your page in the browser to see the video automatically start playing. If you chose a video that contained an audio track you will have to click the play button to play the video.

Add plugin

Brightcove Player has many plugins you can utilize to enhance the player. One such plugin is the Overlay Plugin. In this section you will add that plugin to the In-page Embed code you finished in the last section. For details on the plugin see the Display Overlay Plugin document.

When using a plugin you must supply the path to the JavaScript that is the plugin implementation. You may also have to supply the link to a CSS if needed by the plugin.

  1. Just above the closing head tag, insert the following link statement which points to the location of the CSS for the overlay plugin.
     <link href="https://players.brightcove.net/videojs-overlay/lib/videojs-overlay.css" rel='stylesheet'>
    </head>
  2. Just above the script block you added earlier, add the following script tag that is the actual JavaScript code that implements the overlay plugin functionality.
    <script src="https://players.brightcove.net/videojs-overlay/lib/videojs-overlay.js"></script>
    
    <script>
      videojs.getPlayer('myPlayerID').on('loadedmetadata', function() {
  3. Just after where the play() method is used, call the player's overlay() method, and add braces as a parameter to prepare for passing a JSON configuration object.
    myPlayer.overlay({
    });
  4. Multiple overlay objects can be passed as an array to the plugin to display different content at various times and in various locations. In this case, just one overlay object will be passed to display some text, and have it appear only when the video is playing. When the video is paused the overlay will not be displayed. To implement this, add the following overlay object as a configuration parameter.
     overlays: [{
      content: 'This event-triggered overlay message appears when the video is playing',
      start: 'play',
      end: 'pause'
    }]
  5. Confirm your script block appears as follows, and that the overlay plugin has been called and configured correctly.
       <script>
        videojs.getPlayer('myPlayerID').on('loadedmetadata', function() {
          var myPlayer = this;
          myPlayer.muted(true);
          myPlayer.play();
          myPlayer.overlay({
            overlays: [{
              content: 'This event-triggered overlay message appears when the video is playing',
              start: 'play',
              end: 'pause'
            }]
          });
        });
      </script>
  6. Save your changes and refresh your page in the browser to see the video automatically start playing. You will see the overlay appear when the video starts. Pause the video to see the overlay removed.
  7. For your review, the entire page's HTML code can be viewed here:
    <!doctype html>
    <html>
    
    <head>
      <meta charset="UTF-8">
      <title>Untitled Document</title>
      <style>
        .video-js {
          height: 344px;
          width: 610px;
        }
      </style>
      <link href="https://players.brightcove.net/videojs-overlay/lib/videojs-overlay.css" rel='stylesheet'>
    </head>
    
    <body>
    
      <video  id="myPlayerID"
        data-video-id="4093372393001"
        data-account="1507807800001"
        data-player="H15p1gTkg"
        data-embed="default"
        data-application-id
        class="video-js"
        controls></video>
      <script src="https://players.brightcove.net/1507807800001/H15p1gTkg_default/index.min.js"></script>
    
      <script src="https://players.brightcove.net/videojs-overlay/lib/videojs-overlay.js"></script>
    
      <script>
        videojs.getPlayer('myPlayerID').on('loadedmetadata', function() {
          var myPlayer = this;
          myPlayer.muted(true);
          myPlayer.play();
          myPlayer.overlay({
            overlays: [{
              content: 'This event-triggered overlay message appears when the video is playing',
              start: 'play',
              end: 'pause'
            }]
          });
        });
      </script>
    
      </body>
    
    </html>
    <!doctype html>
    <html>
    
    <head>
      <meta charset="UTF-8">
      <title>Untitled Document</title>
      <style>
        .video-js {
          height: 344px;
          width: 610px;
        }
      </style>
      <link href="https://players.brightcove.net/videojs-overlay/lib/videojs-overlay.css" rel='stylesheet'>
    </head>
    
    <body>
      <video id="myPlayerID"
        data-account="3676484087001"
        data-player="78ef7d78-18d9-4459-a6da-d94e46163076"
        data-embed="default"
        class="video-js"
        controls></video>
      <script src="https://players.brightcove.net/3676484087001/78ef7d78-18d9-4459-a6da-d94e46163076_default/index.min.js"></script>
      <script src="https://players.brightcove.net/videojs-overlay/lib/videojs-overlay.js"></script>
      <script>
        videojs.getPlayer('myPlayerID').on('loadedmetadata', function () {
          var myPlayer = this;
          myPlayer.play();
          myPlayer.overlay({
            overlays: [{
              content: 'This event-triggered overlay message appears when the video is playing',
              start: 'play',
              end: 'pause'
            }]
          });
        });
      </script>
    </body>
    
    </html>