Quick Start: 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

The Video Content properties are used to assign video content to the player.

To configure the video content properties, follow these steps.

  1. Click the link for the Sample Player to open the player properties page.
  2. Locate the Video Content section and click Edit.
  3. Add the rendition or renditions of your choice from a video THAT DOES NOT HAVE AN AUDIO TRACK.
  4. Add a poster image. If you do not add a poster image the first frame of the video will be used.
  5. Do not set any dimensions for the video as this will be done via CSS in the page.
  6. Click Save.

Publishing the player will push the changes to the published player. For more information on preview players, published players and player publishing code, see Generating Player Embed Code.

To publish the player, follow these steps.

  1. Click Publish and then Publish again to confirm the player publish.
  2. Confirm that the publish was successful.
    check publish OK
  3. Click Embed Code & URL and click the Published Player link. The Published Player Embed Code dialog will display.
    published player code
  4. Copy all three of the code implementation type, Player URL, Standard Embed Code (iframe) and Advanced Embed Code (In-Page) to a text file for later use.
  5. The Player URL can be used to test player/video functionality quickly in a browser. Open a new browser tab and paste in the Player URL to view the published player. The player should occupy the entire width of the browser page.

Use Standard embed code

  1. Create an HTML page and paste the Standard (iframe) code from the previous step into the body.
  2. Create an HTML page and paste the iframe code from step 10 above, into the body into the body.
  3. When you browse this page you will see the video displays in the default size of 300px wide and 150px high. Depending on the actual width and height of your video you may see letter boxing or column boxing.
  4. To set the size of the iframe different from the default you can use CSS. The following uses a CSS element selector to change the size of the iframe, and the video will fill the frame size.
      <style>
       iframe {
          height: 344px;
          width: 610px;
        }
      </style>
  5. Save your changes and refresh your page in the browser to see the video at the new size.

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) code (also called embed_in_page) from step 10 above, into the body.
  2. Examine the code, which will appear similar to the following, and note the attributes:
    <video 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>
    • data-video-id: The ID of the Video Cloud video
    • 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)
    • 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
    • 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: 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:
    • 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 displays in the default size of 300px wide and 150px high. Depending on the actual width and height of your video you may see letter boxing or column boxing.
  5. To set the size of the video different from the default you can use CSS. The following uses a CSS class selector to change the size of the player.
    <style>
      .video-js {
        height: 344px;
        width: 610px;
      }
    </style>
  6. Save your changes and refresh your page in the browser to see the video at the new size.

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>