Step-by-Step: Brightcove Player

Overview

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.

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.

Login to Studio at https://studio.brightcove.com/ .
The current account name will appear in the upper left corner of the page under the product name (in this case Video Cloud). When you click on your Profile you will see your current account and any other accounts (if any). Simply click on the account on which you choose to work.
Click the Players link in the primary navigation.
Click the Add player button.
Enter a Name and Short Description for the player. For this quick start, the player name will be Sample Player.
Click Save.
Confirm that the newly created player appears in the list of players.

Publish video in player

Next 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:

In Studio navigate to the Media module by clicking on the Media icon in the primary navigation.
Click in the row for the video that you wish to publish in your player, then click Publish and embed > Publish to web.
Note: If the video has an audio track, you will not the audio hear later when you publish the video in the player. The reason for that is you will autoplay the video, and audio is not allowed in such cases. See the document Autoplay Considerations for more information about videos playing without user interaction.
From the Select Player dropdown menu, choose your newly created player.
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.

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

Click the link for the Sample Player to open the player properties page.
Click JSON Editor in the left navigation menu.
Place a comma after the SECOND TO THE LAST brace in the JSON.

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"
 }
 }

Your JSON should appear similar to the following (the added text is highlighted in yellow):
Click Save .

Click Publish & Embed and then Publish Changes to publish your player.
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.
Copy both of the code implementation types to a text file for later use.

Use Standard code

Create an HTML page and paste the Standard (iframe) code from the previous step into the body.
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.

Return to the publish dialog in Video Cloud Studio.
View the Advanced code and click the Fixed radio button for Sizing.
The Responsive sizing includes HTML to make the player responsive. In this activity the focus is on player code so will use the simpler Fixed sizing.
Create an HTML page and paste the Advanced (in-page embed) code from above, into the body.
Examine the code, which will appear similar to the following (insert carriage returns as shown for easier reading of player code), 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 (do not use if supplying a playlist ID)
- data-playlist-id : The ID of the Video Cloud playlist (do not use if supplying a video ID)
- 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
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
 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
When you browse this page you will see the video reflects the Sizing ( 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.

Add an id attribute to the video tag with a value of myPlayerID .
```
 <video id="myPlayerID" 
```
Just above the closing body tag, insert a script block.
```
 <script> </script>
 </body>
```
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() {
   
});
```
Note: For more information about Brightcove Player's startup events see the Startup events section of the Understanding Player Events document.
In the function, create a variable named myPlayer, that assigns the player instance, referenced as this, to that variable.
```
 var myPlayer = this;
```
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.
Use the player's play() method to start the video.
```
 myPlayer.play();
```

Confirm your script block appears as follows.

 <script> 
   videojs.getPlayer('myPlayerID').on('loadedmetadata', function() { 
     var myPlayer = this;
     myPlayer.muted(true);
     myPlayer.play();
   });
 </script>

Save your changes and refresh your page in the browser to see the video automatically start playing. If you chose a video with an audio track you will not hear it, as autoplay videos will not play the audio track (browser rules, not Brightcove's).

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 Advanced 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.

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/2/videojs-overlay.css" rel='stylesheet'> </head>
```

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/2/videojs-overlay.min.js"></script> <script>
 videojs.getPlayer('myPlayerID').on('loadedmetadata', function() {

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({ });
```
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. You also want the overlay to appear in the middle-right side of the player. 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',
  align: 'right'
}]
```

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',
        align: 'right'
      }]
    });
  });
</script>

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.
Note: The implementation of the Overlay Plugin show here will only be used with the player on the specific HTML page. You can add a plugin to be part of a player no matter where or how many times the player is used without having to copy and paste code repeatedly. See the Step-by-Step: Plugin Development to see a developer oriented approach to the implementation, or the Configuring Player Plugins document to see the simplest way to implement the plugin in the player using Studio.

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>
  <link href="https://players.brightcove.net/videojs-overlay/2/videojs-overlay.css" rel='stylesheet'> </head>
<body>
  <video-js id="myPlayerID"
    data-account="1752604059001"
    data-player="UEoNyhSA6"
    data-embed="default"
    controls=""
    data-video-id="4607357817001"
    data-playlist-id=""
    data-application-id=""
    width="960" height="540"></video>
  <script src="https://players.brightcove.net/1752604059001/UEoNyhSA6_default/index.min.js"></script> 
  
  <script src="https://players.brightcove.net/videojs-overlay/2/videojs-overlay.min.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',
          align: 'right'
        }]
      });
    });
  </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"
 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>