Cue points can have multiple uses. In this topic, we're going to look at how you can use cue points to create chapters in a video. Using chapters in a video lets your viewers seek to particular points in the video, without breaking the video up into separate files.
Note: The steps outlined in this topic are for Flash based players and will not work in HTML5 players and may prevent HTML5 players from functioning. The recommended way to do this now is using the Smart Player API — see this example for an explanation of how to do it.
The first step in creating chapters is to create the code cue points in your video where the chapters should start. You can create cue points in a video using the Media module. You can also create cue points using the Media API or FTP batch provisioning, but for cue points that represent chapters, it's probably easiest to use the Media module, since the other methods require you to know the exact time in the video duration where you want each cue point, but don't let you review the video in the process.
The screenshot below shows the 4th code cue point. It was created at 1 minute, 30 seconds into the video and was given the name "Part 4". The metadata field could also be leveraged to store any other information that could be used when rendering the links for the chapters in the page.
Once your video has its cue points assigned, you can embed the Video Cloud player publishing code in your HTML page. We also need to create an area where the chapter links will be added when the video loads. In this case, we simply place a div below the player, with the id chapters.
<h1>Cuepoint Chapter Example</h1> <!-- Start of Brightcove Player --> <div style="display:none"></div> <!-- By use of this code snippet, I agree to the Brightcove Publisher T and C found at https://accounts.brightcove.com/en/terms-and-conditions/. --> <object id="myExperience" class="BrightcoveExperience"> <param name="bgcolor" value="#FFFFFF"/> <param name="width" value="486"/> <param name="height" value="412"/> <param name="playerID" value="<INSERT_YOUR_PLAYER_ID>"/> <param name="videoID" value="<INSERT_YOUR_VIDEO_ID>"/> <param name="publisherID" value="<INSERT_YOUR_PUBLISHER_ID>"/> <param name="isVid" value="true"/> <param name="dynamicStreaming" value="true"/> </object> <!-- End of Brightcove Player --> <div id="chapters"></div>