Code Samples 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 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 In the player, notice the horizontal volume control bar replaces the default vertical control bar. Horizontal Volume Control (1.x Player Only) In the player, a horizontal volume control bar replaces the default vertical control bar. Vertical Volume Set the volume control to display a vertical slider instead of the default horizontal layout. 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 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 Create a countdown timer for an advertisement using the Overlay plugin. 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** 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** You will be able to see three different call to action display techniques with this player. Play/Pause Video from iframe Parent Click either the play or pause button, which is part of the iframe's parent page, to see it initiate play/pause of the video in the iframe player. 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. Autoplay with Unmute Button The video will behave differently depending on the browser/platform on which you run the video. If the video will autoplay with audio, it does so. If not, the video begin to play, but an unmute button will appear. 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** 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. Full Window Background Video** In this topic, you will learn how to use a playlist to supply background videos, and automatically resize the player when the browser window is resized so that the video entirely fills the browser window. Creating a Video Loop There are some situations where you may want to use a looping video. This example loops the video 3 times and then stops video playback. Disable the Progress Scrubber Play the video. Notice that you cannot use the progress scrubber to advance the video. Stopping Other Players on the Page when a Video Starts Start playing one of the videos. Next, play the video in a different player and see that video playback stops in the other player that was playing. Loading the Player Dynamically In this sample you click the Add Player button to dynamically build and load the player, and then play the video. RequireJS and Brightcove Player In this topic, you will learn how to use RequireJS, a JavaScript file and module loader, with Brightcove Player. Dynamically Change Source Videos** Click the button below the player to dynamically change the source video. Kiosk App** The player will be playing a video from the array of video objects in an infinite loop. 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** 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 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 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 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 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 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 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 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 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 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 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 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 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 Start video playback. Then click on the rewind video button. You should see that video playback goes back 5 seconds. Download Video Plugin** You will see a download icon located on the right side of the control bar to download the highest quality MP4 rendition of the video loaded in the player. 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 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 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** 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** 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** 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** 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** 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** This example displays an interactive overlay of related video thumbnails when playback is paused or has ended. 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 (Playback API)** This example displays an interactive overlay of related video thumbnails when playback is paused or has ended. 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 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 Create a playlist-enabled player to start with a video not in the 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. Background Video Use a Brightcove Player for a background video on your web page. 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 Create markers in the progress bar to display defined chapters. Dynamic Custom Endscreen Add a link associated with video data in the custom endscreen. 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 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 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 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 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 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. Password to View Video In this topic, you will learn how to ask for a password to view the video. Toggle Controlbar In this topic, you will learn how to have a button toggle the display of the controlbar. Back Forward Buttons In this topic, you will learn how to place buttons in the controlbar that rewind and advance the video a specified number of seconds. Add Country Flag to Caption Label In this topic, you will learn how to add a country flag in front of the country caption label. Download Transcript In this topic, you will learn how to use the captions WebVTT file and convert it into a downloadable transcript. Download Audio In this topic, you will learn how to create a link to allow downloading the best quality MP4 of an audio asset playing in Brightcove Player. Automatically Set Caption Language In this topic, you will learn how to set the default caption language based on the browser language. Automatically Set Audio Track Language In this topic, you will learn how to set the default audio track language based on the browser language. Vertical Video In this topic, you will learn how to display a vertical video with the Brightcove Player.
