- Home
- Code Samples
- Brightcove Player Sample: Horizontal Responsive Playlist
- Developer Basics Videos
- What is the Brightcove Player?
- Overview: Brightcove Player
- Learning Guide: Video Advertising
- Overview: Brightcove Player Plugins
- Player Development Training Videos
- Step-by-Step: Brightcove Player
- Step-by-Step: Player Customization
- Training: Developing with the Brightcove Player
- Learning Guide: Using the REST APIs
- Advanced Player Code
- Autoplaying a Video
- Custom Plugin - Converting Code
- Custom Plugin - Passing Data
- Custom Plugin - Using Studio
- Custom Plugin - Why and How
- Developer Basics Videos
- Generating Player Code
- Preparing to Write Code
- Brightcove Player 5 to 6 Migration Guide
- Brightcove Player API Documentation
- Brightcove Player Cookies
- Brightcove Player Error Reference
- Brightcove Player System Requirements
- Catalog Search Architecture
- Known Issues
- Player Catalog
- Player Feature Support by Browser
- Player Metadata from bcinfo
- Player Methods/Events API
- Playlist API Guide
- Video Metadata from mediainfo
- 360º Video
- Ad Only
- Advertising with the FreeWheel Plugin
- Advertising with the IMA3 Plugin
- Advertising with SSAI
- Advertising with SSAI and Open Measurement
- AirPlay
- Chromecast
- Custom Endscreen
- Display Error Messages
- Display Thumbnail Previews
- DRM
- Google Tag Manager
- HLS
- Live DVRUX
- Overlay
- Overview: Player Plugins
- Picture-in-Picture
- Player/Plugin Version Testing
- Playlist Endscreen
- Playlist UI
- Plugin Changelog
- Plugin Registry
- Plugin Version Reference
- Quality Selection
- Social Media
- Tealium Tag Manager
- Thumbnail Seeking
- Video SEO Schema Generator
- Ad Events and Ad Objects
- Ad Only Plugin
- Advertising with the FreeWheel Plugin
- Advertising with the IMA3 Plugin
- Advertising with Server-Side Ads [SSAI]
- Advertising with SSAI and Open Measurement
- Client-Side Pre-roll Ads with Live SSAI
- Displaying Ads Using Ad Cue Points
- Flash No Longer Valid with IMA
- Guide: Ad Partner Integration
- Guide: contrib-ads Migration
- Jump Start: Header Bidding Ad
- Jump Start: Outstream Ad
- Jump Start: Pre-roll Ad
- Known Issues: Server-Side Ad Insertion [SSAI]
- Learning Guide: Video Advertising
- Step-by-Step: Implementing Advertising
- Testing Pre-Release Advertising Plugins
- Using DFP Premium with Brightcove Player
- Using Player Enhancements for Live SSAI
- Video Cloud SSAI Ad Tag Validation
- Assigning Video to Player Programmatically
- Options for Advanced [in-page] Embed Code
- Options for Standard [iframe] Embed Code
- Brightcove Player Loader
- Bulk Updating Brightcove Default Player
- Choosing the Correct Embed Code
- Delaying Player Instantiation
- Pre-release Player
- Syndication Strategies
- Using a Non-Brightcove Player
- Using Multiple Players on One Page
- Using Reference IDs
- Video Renditions Inspector
- Brightcove Playback Technology App
- Brightcove Player Error Reference
- Brightcove Player Information Modal
- Brightcove Player Troubleshooting Guide
- Creating a Charles Log
- Creating a Network Log
- Domain Restrictions Messaging
- Display Error Messages Plugin
- Manually Setting the Player Version
- Player Debug Mode
- Player/Plugin Version Testing
- Player Informational Properties
- Sample: Live Custom Error Message
- Step-by-Step: Brightcove Player Debugger
- Running a Network Path Trace
- Using the Player Reference
- Vetting Brightcove Player Releases
- Viewing the Player Configuration
- Customizing Player Appearance
- Customizing Player Appearance - Legacy Skin
- Player Styling Playground
- Quick Start: Player Customization - Legacy Skin
- Step-by-Step: Player Customization
- Responsive Sizing for the Brightcove Player
- Sizing the Player
- Skins and Player Versions
- Styling Captions
- Styling Playlists
- Autoplay Considerations
- Brightcove Playback Technology App
- China Delivery
- Cross-Device Resume
- Deep Linking
- Delivering HLS Video
- Delivery Rules
- Determining Which Rendition Will Play
- Forensic Watermarking
- Guide: Playback Technology
- HLS Plugin
- iOS and Brightcove Player
- Playback Restrictions
- Overview: HTTPS Support
- Quality Selection Plugin
- Static URL Delivery
- Streaming PlayReady Protected Content
- Using the Brightcove Player for TVE
- Configuring Player Content Restrictions
- Creating a DASH DRM Manifest for the Brightcove Player
- Domain Restrictions Messaging
- DRM Plugin
- Overview: Content Protection
- Policy Keys
- Restricting Video Playback Using IP Address
- Signed URLs and Token Auth with a Live Stream
- Brightcove Player Loader
- Catalog Search Upgrade
- Custom Event
- Guide: Playback Technology
- Localizing Brightcove Player
- Localizing Plugins
- Player Events
- Overview: Components
- Overview: HTTPS Support
- Overview: Player API
- Pass Data to the Plugin
- React Player Loader
- Reporting on Brightcove Player Configurations
- RequireJS and Brightcove Player
- Retrieve Bitrate of Current Rendition
- Step-by-Step: Plugin Development
- Step-by-Step: Video.js Plugin Generator
- Using bc[] and getPlayer[] Methods
- Viewing the Player Configuration
- Adding an Application ID to the Player Embed Code
- Adding Captions to Videos Programmatically
- Adding Chapters to a Video
- Brightcove Player 6 Now Default Version
- Brightcove Player Accessibility
- Custom Endscreen Plugin
- Display Overlay Plugin
- Google Analytics Self Configuration
- Guide: Playlist API
- Identify and Delete Low Performing Videos
- Implementing Cue Points Programmatically
- Implementing Playlists
- Implementing the ModalDialog
- Live HLS
- Live Stream Configuration
- Multiple Audio Tracks
- Player Configuration Guide
- Playing Live Streams
- Playlist UI Plugin
- Rename 608/708 Captions in the Player
- Signed URLs and Token Auth with a Live Stream
- Social Media Plugin
- Step-by-Step: Player Management
- Styling Playlists
- Using a Screen Reader with the Brightcove Player
- Versions of the Brightcove Player Documentation
- Volume Control
- Code Samples by Group
- Code Sample Index
- AMP Using a Video Cloud Video
- AMP Using an External Video
- AMP and Advertising
- All Online Training Courses
- Developer Basics Videos
- Player Development Training Videos
- Register for Instructor-led Training
- Training: Developing with the Brightcove Player
- Training: Quick Start to Player Management
- Brightcove University Training Courses
- Brightcove Player Release Notes
- Brightcove Player Pre-Release Notes
- Viewing the Brightcove System Status Page
- Contact Sales
- Opening a Support Case
- Reset Your Support Portal Password
Brightcove Player Sample: Horizontal Responsive Playlist
Player example
This sample and associated code is provided as a guide for your production development. The code is not certified for production use nor officially supported.A horizontal playlist can also be implemented without code. For details, see the following:
- Styling Players in the Players Module
- Implementing Playlists
You will see the horizontal playlist below the player. If you resize your browser, you will see the player and playlist both resize.
See the Pen Horizontal Responsive Playlist by Brightcove Learning Services [@rcrooks1969] on CodePen.
Source code
View the complete solution on GitHub.
Using the CodePen
Here are some tips to effectively use the above CodePen:
- Toggle the actual display of the player by clicking the Result button.
- Click the HTML/CSS/JS buttons to display ONE of the code types.
- Later in this document the logic, flow and styling used in the application will be discussed in the Player/HTML configuration, Application flow and Application styling sections. The best way to follow along with the information in those sections is to:
- Click the EDIT ON CODEPEN button in the CodePen and have the code available in one browser/browser tab.
- In CodePen, adjust what code you want displayed. You can change the width of different code sections within CodePen.
- View the Player/HTML configuration, Application flow and/or Application styling sections in another browser/browser tab. You will now be able to follow the code explanations and at the same time view the code.
Development sequence
Here is the recommended development sequence:
- Use the In-Page embed player implementation to test the functionality of your player, plugin and CSS [if CSS is needed]
- Put the plugin's JavaScript and CSS into separate files for local testing
- Deploy the plugin code and CSS to your server once you have worked out any errors
- Use Studio to add the plugin and CSS to your player
- Replace the In-Page embed player implementation if you determine that the iframe implementation is a better fit [detailed in next section]
For details about these steps, review the Step-by-Step: Plugin Development guide.
iframe or In-Page embed
When developing enhancements for the Brightcove Player you will need to decide if the code is a best fit for the iframe or In-Page embed implementation. The best practice recommendation is to build a plugin for use with an iframe implementation. The advantages of using the iframe player are:
- No collisions with existing JavaScript and/or CSS
- Automatically responsive
- The iframe eases use in social media apps [or whenever the video will need to "travel" into other apps]
Although integrating the In-Page embed player can be more complex, there are times when you will plan your code around that implementation. To generalize, this approach is best when the containing page needs to communicate to the player. Specifically, here are some examples:
- Code in the containing page needs to listen for and act on player events
- The player uses styles from the containing page
- The iframe will cause app logic to fail, like a redirect from the containing page
Even if your final implementation does not use the iframe code, you can still use the In-Page embed code with a plugin for your JavaScript and a separate file for your CSS. This encapsulates your logic so that you can easily use it in multiple players.
API/Plugin resources used
| play[] | loadstart |
| on[] | loadedmetadata |
| one[] | play |
| el[] | |
| width[] | |
| playlist.currentItem[] | |
| playlist[] |
Note: The JavaScript framework jQuery is used in this code sample.
Player/HTML configuration
This section details any special configuration needed during player creation. In addition, other HTML elements that must be added to the page, beyond the in-page embed player implementation code, are described.
Player configuration
The player uses the standard HTML enhancements to add responsive behavior.
Other HTML
The JavaScript framework jQuery is loaded using a script tag.
Application flow
The basic logic behind this application is:
- Create a DOM element to hold the playlist.
- Create the playlist array data structure, and array of playlist items, and functions that perform the following:
- Clear the highlight of the selected/playing video thumbnail.
- Add the highlight of the selected/playing video thumbnail.
- Add click events to the left and right playlist arrows, as well as the on the video thumbnails.
- Create the playlist items, and add those items to the playlist.
Create an HTML element to hold the playlistFind the code which is labeled:
// ### Create div for playlist ###You use JavaScript's createElement[] method to create the
element, named playlistWrapper.Manually create playlist
Find the code which is labeled:
// ### Manually create playlist ###Start off by copying the playlist's array data structure into a new variable called playlistIData. Later you loop over this data structure to build the individual list items.
Loop over playlist data to create items and add to playlist
Find the code which is labeled:
// ### Create playlist items and add to playlist ###You dynamically create another
which holds an individual playlist item. The playlist item is populated and styled, then added to the playlistWrapper.
Application styling
A number of items are styled, including:
- Playlist wrapper
- Playlist items
- Item title
- Left and right arrows
Plugin code
Normally when converting the JavaScript into a Brightcove Player plugin nominal changes are needed. One required change is to replace the standard use of the ready[] method with the code that defines a plugin.
Here is the very commonly used start to JavaScript code that will work with the player:
videojs.getPlayer['myPlayerID'].ready[function[] {
var myPlayer = this;
...
}];You will change the first line to use the standard syntax to start a Brightcove Player plugin:
videojs.registerPlugin['pluginName', function[options] {
var myPlayer = this;
...
}];As mentioned earlier, you can see the plugin's JavaScript code in this document's corresponding GitHub repo: responsive-horizontal-playlist.js.
Using the plugin with a player
Once you have the plugin's CSS and JavaScript files stored in an Internet accessible location, you can use the plugin with a player. In Studio's PLAYERS module you can choose a player, then in the PLUGINS section add the URLs to the CSS and JavaScript files, and also add the Name and Options, if options are needed.
For more information on using Studio to assign plugins to players see the Configuring Player Plugins document.Brightcove Support
- System Status
- Contact Support
- Documentation
Training
- Online Courses
- Register for a course
- Brightcove University
Brightcove
- Brightcove.com
- Contact Us
Brightcove Inc. All rights reserved. Privacy | Terms & Conditions
Video liên quan
Find the code which is labeled:
// ### Create div for playlist ###You use JavaScript's createElement[] method to create the
Manually create playlist
Find the code which is labeled:
// ### Manually create playlist ###Start off by copying the playlist's array data structure into a new variable called playlistIData. Later you loop over this data structure to build the individual list items.
Loop over playlist data to create items and add to playlist
Find the code which is labeled:
// ### Create playlist items and add to playlist ###You dynamically create another
Application styling
A number of items are styled, including:
- Playlist wrapper
- Playlist items
- Item title
- Left and right arrows
Plugin code
Normally when converting the JavaScript into a Brightcove Player plugin nominal changes are needed. One required change is to replace the standard use of the ready[] method with the code that defines a plugin.
Here is the very commonly used start to JavaScript code that will work with the player:
videojs.getPlayer['myPlayerID'].ready[function[] { var myPlayer = this; ... }];You will change the first line to use the standard syntax to start a Brightcove Player plugin:
videojs.registerPlugin['pluginName', function[options] { var myPlayer = this; ... }];As mentioned earlier, you can see the plugin's JavaScript code in this document's corresponding GitHub repo: responsive-horizontal-playlist.js.
Using the plugin with a player
Once you have the plugin's CSS and JavaScript files stored in an Internet accessible location, you can use the plugin with a player. In Studio's PLAYERS module you can choose a player, then in the PLUGINS section add the URLs to the CSS and JavaScript files, and also add the Name and Options, if options are needed.
For more information on using Studio to assign plugins to players see the Configuring Player Plugins document.Brightcove Support
- System Status
- Contact Support
- Documentation
Training
- Online Courses
- Register for a course
- Brightcove University
Brightcove
- Brightcove.com
- Contact Us
Brightcove Inc. All rights reserved. | Privacy | Terms & Conditions |