The following code samples demonstrate customizations and enhancements to Brightcove Player. Samples marked with double asterisks ** are partially or wholly dependent on Video Cloud features. You can also find an alphabetical list of samples here.

Outstream (Ad-Only) Player

Outstream (Ad-Only) Player

This sample provides helper JavaScript functions that demonstrate how to dynamically adjust the size of a <div> element in the page DOM, inject the Brightcove player there, load and play an ad, and then remove the player

Scrolling Player into View with Ads

Scrolling Player into View with Ads

In the player, notice the horizontal volume control bar replaces the default vertical control bar.

Horizontal Volume Control (1.x Player Only)

Horizontal Volume Control (1.x Player Only)

In the player, a horizontal volume control bar replaces the default vertical control bar.

Vertical Volume

Vertical Volume

Set the volume control to display a vertical slider instead of the default horizontal layout.

Ad Indicators in Playback Bar

Ad Indicators in Playback Bar

This sample shows a player where the three ad cue points associated with the video are displayed in the playback bar as blue markers.

Advertising with the SSAI Plugin

Advertising with the SSAI Plugin

This example uses IMA ads defined in a VMAP file to deliver server-side ads in the video stream. There is a pre-roll, mid-roll and post-roll ad. The VMAP file is defined in the ad configuration.

Ad Countdown Timer

Ad Countdown Timer

Create a countdown timer for an advertisement using the Overlay plugin.

Age Gate with ModalDialog

Age Gate with ModalDialog

This sample uses the ModalDialog to initially cover the player. When the user confirms their age by clicking on the modal window, controls are displayed and the video plays.

Cue Points Display CTA

Cue Points Display CTA**

The player shows two different CTAs displayed based on cue points. The first CTA is displayed at 3 seconds, for a duration of 5 seconds. The second CTA is displayed at 13 seconds for a duration of 3 seconds.

Dynamic Call to Action**

Dynamic Call to Action**

You will be able to see three different call to action display techniques with this player.

Age Gate

Age Gate

This sample displays an overlay that hides the player controls and play button. When the user confirms their age by clicking on the overlay, controls are displayed and the video plays.

Background Video Random Playlist

Background Video Random Playlist**

In the player you will see videos randomly selected from a playlist that continually play as background videos. At the start of each video the title and description of each video are displayed.

Background Video Playlist

Background Video Playlist**

In the player you will see there are four videos that continually play as background videos. Also, at the start of each video the title and description of each video are displayed overlaying the background video.

Disable the Progress Scrubber

Disable the Progress Scrubber

Play the video. Notice that you cannot use the progress scrubber to advance the video.

RequireJS and Brightcove Player

RequireJS and Brightcove Player

In this topic, you will learn how to use RequireJS, a JavaScript file and module loader, with Brightcove Player.

Kiosk App**

Kiosk App**

The player will be playing a video from the array of video objects in an infinite loop.

Caption Animation

Caption Animation

Start video playback. As you move your mouse over and away from the player, the captions will animate to stay above the control bar.

Display Related Link**

Display Related Link**

For this sample you see the text associated with the video displayed below the player. You use Studio's MEDIA > VIDEO INFORMATION section to supply the text and associated link.

Display Views in Controlbar

Display Views in Controlbar

When the video plays you will see the video views in the controlbar. There may be a slight delay before the information displays as the Analytics API is asynchronously queried for the data.

Display Thumbnails on Hover

Display Thumbnails on Hover

This example uses the ModalDialog to display four thumbnail images taken from various points in the video. This allows the user to get a sneak peak at what is in the video.

Display Random Bumpers

Display Random Bumpers

In this sample, randomly selected bumpers are played before each video from a playlist. In this case the bumpers are ads, but not drawn from an ad server, instead they are videos defined in the Video Cloud library.

Hyperlinked Company Logo

Hyperlinked Company Logo

This example displays a company logo in the player's control bar. Selecting the logo will redirect you to the company's website.

Lightbox Carousel

Lightbox Carousel

Navigate through the videos in the carousel. Select a thumbnail to play the video in a lightbox container. With the lightbox displayed, select the Close link to hide the lightbox container.

Lightbox with Scroller

Lightbox with Scroller

Drag the scrollbar below the thumbnail images to navigate through the videos. Select a video to play the video in a lightbox container. With the lightbox displayed, select the Close link to hide the lightbox container.

Simple Lightbox

Simple Lightbox

This example displays an interactive video poster image that opens a lightbox with the Brightcove player. Select the poster image to play the video in a lightbox container.

Logo Overlay Plugin

Logo Overlay Plugin

In the following example you see a logo displayed in the lower-left of the player. At five seconds into the video the logo will slowly fade out.

Multiple Session Playback

Multiple Session Playback

Play the video and stop it at some point during playback. When you refresh the page, the video will resume playing where you left off.

Navigate on Video End

Navigate on Video End

Upon completion of the very short video you will see an overlay appear with a link to the Brightcove Home Page. The Brightcove supplied Overlay Plugin is used, so no JavaScript is needed. CSS is used to style the overlay.

Scrolling Player into View

Scrolling Player into View

Scroll the player in and out of view. When the player is fully scrolled into view, the video will start playing. When you scroll the player out of view, the video will stop playing.

Toggling an Overlay

Toggling an Overlay

This example allows you to toggle the display of an interactive overlay. Select the Toggle Overlay button to show and hide the overlay.

Trigger Rewind with a Custom Event

Trigger Rewind with a Custom Event

Start video playback. Then click on the rewind video button. You should see that video playback goes back 5 seconds.

Live Custom Error Message

Live Custom Error Message

The player will not be able to connect to the live stream. A ModalDialog object is created, a custom image placed in it, and then the ModalDialog displayed. If the ModalDialog is closed, the default error is shown.

Player Styling Playground

Player Styling Playground

In this topic you will use a Codepen, shown below, as a styling playground. View it in on the codepen.io site to make changes, and feel free to fork the Codepen for your own use.

Horizontal Responsive Playlist

Horizontal Responsive Playlist

You will see the horizontal playlist below the player. If you resize your browser, you will see the player and playlist both resize.

Most Watched Videos in Playlist**

Most Watched Videos in Playlist**

In the following example, you will see the player with a playlist appearing to the right. The playlist is populated by retrieving the most popular videos, based on most number of plays, using the Brightcove Player catalog.

Newest Videos in Playlist**

Newest Videos in Playlist**

In the following player, you see a playlist that contains the 10 most recent videos added to the Knowledge Team's account.

Playback API Paging

Playback API Paging**

This example uses a Brightcove player to display a video in the player along with the first 3 videos in the playlist. Select the Next Videos button to display the next 3 videos in the playlist.

Popular Videos Overlay

Popular Videos Overlay**

The overlay will appear when you pause a video, or the video ends. The request to the Analytics API to get the 6 most viewed videos in the past 24 hours is shown, along with the API response.

Popular Videos Playlist

Popular Videos Playlist**

The playlist will appear automatically as soon as the video data is retrieved. The request to the Analytics API to get the 6 most viewed videos in the past 24 hours is shown, along with the API response.

Related Videos from a Playlist

Related Videos from a Playlist**

This example displays an interactive overlay of related video thumbnails when playback is paused or has ended.

Related Videos via Tags

Related Videos via Tags (CMS API)**

This example displays an interactive overlay of related video thumbnails when playback is paused or has ended.

Related Videos via Tags

Related Videos via Tags (Playback API)**

This example displays an interactive overlay of related video thumbnails when playback is paused or has ended.

Tabbed Playlist

Tabbed Playlist**

Select a tab in the tabbed navigation to switch between playlists. Select a video within a playlist to start video playback.

All Time Video Views

All Time Video Views

The player below includes a playlist to show you that the code used to retrieve all time views will work with playlists. It will also work with a single video player.

Video Before Playlist

Video Before Playlist

Create a playlist-enabled player to start with a video not in the playlist.

Video at End of Playlist

Video at End of Playlist

You see that the playlist has three videos in it. After those three videos play, another video NOT in the playlist will play. After the video not in the playlist plays, video playback stops.

Playback Rate Adjuster

Add a playback rate button to the Brightcove Player control bar.

Get Seeked Time

Get Seeked Time

As you click in the seekbar you will see the times at which you clicked displayed below the player.

Chapter Markers in Progress Bar

Chapter Markers in Progress Bar

Create markers in the progress bar to display defined chapters.

Dynamic Custom Endscreen

Dynamic Custom Endscreen

Add a link associated with video data in the custom endscreen.

Are You Still Watching?

Are You Still Watching?

In this topic, you will learn how to create a Brightcove player that detects when the viewer has stopped watching, while leaving the video playing.

Enlarge Player on Mouseover

Enlarge Player on Mouseover

In this topic, you will learn how to use JavaScript and CSS to enlarge a small player when you mouse over it, and then shrink it to small size when you mouse off.

Floating Player

Floating Player

In this topic, you will learn how to configure the HTML/CSS/JavaScript to allow the player to be dragged to a new position. The player position will then remain fixed even when the user scrolls up and down the page.

Limited Plays

Limited Plays

In this topic, you will learn how to use a Brightcove player that limits how many times a user can view a video in a single day.

Register to Play

Register to Play

In this topic, you will learn how to use a Brightcove player where the user must fill in a form to view the video.

Register to Play after Preview

Register to Play after Preview

In this topic, you will learn how to use a Brightcove player where the user must fill in a form to view the video, after a short preview is shown.