Search code examples
videoplaylistbrightcove

New Brightcove Player - How to Create a Playlist using Video IDs


I'm converting our older Brightcove Smart Player code where we generate a playlist based on the video IDs stored in the database to the new Brightcove player.

Before, if we wanted to create a custom playlist, we had to store all of our playlist data (name, thumbnail urls, etc...) in our CMS and then loop through the data to create a playlist ticker.

My understanding was that with the new API, we could now just use our Brightcove IDs to pull all the information from Brightcove directly. However, none of the doc examples show that. They all hardcode the playlist data like so:

<script type="text/JavaScript">
var myPlayer,
  eVideoName = document.getElementById("videoName"),
  eTimeRemaining = document.getElementById("timeRemaining"),
  timeRemaining,
  totalTime,
  currentVideoIndex = 0,
  newVideo,
  firstVideo = true,
  playlistData = [{
    "name": "Great Blue Heron",
    "thumbnailURL": "//solutions.brightcove.com/bcls/assets/images/Great-Blue-Heron.png",
    "sources": [{
      "type": "application/x-mpegURL",
      "src": "http://solutions.brightcove.com/bcls/assets/videos/Great-Blue-Heron.m3u8"
    }, {
      "type": "video/mp4",
      "src": "http://solutions.brightcove.com/bcls/assets/videos/Great-Blue-Heron.mp4"
    }]
  }, {
    "name": "Birds of a Feather",
    "thumbnailURL": "http://solutions.brightcove.com/bcls/assets/images/BirdsOfAFeather.png",
    "sources": [{
      "type": "video/mp4",
      "src": "http://solutions.brightcove.com/bcls/assets/videos/BirdsOfAFeather.mp4"
    }]
  }, {
    "name": "Sea Marvels",
    "thumbnailURL": "http://solutions.brightcove.com/bcls/assets/images/Sea Marvels.png",
    "sources": [{
      "type": "video/mp4",
      "src": "http://solutions.brightcove.com/bcls/assets/videos/Sea-Marvels.mp4"
    }]
  }];
...

Here's the page I pulled that example from:

http://docs.brightcove.com/en/video-cloud/brightcove-player/samples/multiple-video.html

And when I ask Brightcove for more detail, they say they don't have that as an example and point me back to the docs.

Does anyone have an example of how to create the playlist using video IDs?


Solution

  • For anyone who is curious, the Brightcove docs don't get this point across, but you can create a custom list to feed to your video player using the same naming conventions received from the json object returned by the getVideo() method.

    Therefore, if you want to create a playlist with video IDs you have on hand, it's as simple as modifying this section in the above code like so:

    playlistData = [{
           "videoId": "123456789"
       }, {
           "videoId": "234567891"
       }, {
           "videoId": "345678912"
    }];
    

    I was able to do this by creating a multidimensional array in PHP and then running it through json_encode() to create the array needed by Brightcove.