Player Templates

This document provides a reference to all of The Video Cloud standard player templates. When you create a player in the Video Cloud Studio, you select the player template that the player is based on. In this reference, for each player template, you can download the BEML definition of the player template, view a working example player, and learn about sizing dimensions and Photoshop layouts for standard players.

You might be curious what a Chromeless player looks like, or the difference between a horizontal or vertical layout for the video playlist in a player. By browsing these working examples, you can think about the types of players you might create in Video Cloud Studio, their size, and layout. If you download the standard player templates and Photoshop layout files, you can customize the look and feel of your players further.

If you haven't created a player, read Creating Players with the Publishing Module. Video Cloud Pro and Enterprise publishers can also Customize Players with Brightcove Experience Markup Language (BEML). Also read Feature and Layout Considerations for Player Templates.

In this document, you can find information about each of the standard player templates:

• Single video players
  • Video player
  • Video player with logo
  • Chromeless video player
  • Accessible video player
  • Mobile optimized video player
• Single playlist players
  • Widescreen with horizontal list
  • Widescreen with vertical video list
  • Widescreen with video text list
  • Video player with horizontal video list
  • Mobile optimized video player with horizontal video list
• Multiple playlist players
  • Tabbed navigation 3.0
  • Compact tabbed navigation 3.0
  • Chromeless video player with tabbed playlists
  • Thumbnail navigation
  • Video player with dropdown navigation
  • Widescreen player with dropdown navigation
• Mobile-optimized player players
  
  • Mobile-Optimized Video Player
  • Mobile Optimized Video Player with Horizontal Video List

Download PSD files for the standard player templates

For each of the standard player templates, we provide a Photoshop template (PSD file). The archive includes template descriptions, sample players, and Photoshop templates. You can use the templates to help you build custom backgrounds for your players. You can download the PSD files as a single .zip file (614 KB) instead of individually below.

Standard player template reference

For each of the standard player templates, we provide a description, layout image, sample player, and Photoshop template.

Smart players: All of the standard players are smart players. In HTML5 mode, standard multiple playlist templates will show only one playlist, which will be the first playlist, or the featured playlist if a featured playlist is assigned. Smart players detect their current environment and run as a Flash player on devices that support Flash, and otherwise, typically for iOS devices, run as an HTML5 player. For more on the Video Cloud smart players, see Delivering Video with HTML5 and Smart Players.

Video Player

This is a simple single-video player that displays video controls underneath the video. You can scale this player to match the dimensions of the video file, which is useful for displaying 16:9 aspect ratio videos without letterboxing. You can assign content to this player using the Media module's Quick Video Publish, modifying the configuration parameters in the player's publishing code (in the help document, Assigning Content to Players Programmatically), or using the Player APIs.

• View Player
• Download PSD layout (.zip)
• Default Dimensions
  Overall: 486x412. The Video Player has a minimum size of 180x176. The controls and menu do not render correctly at less than that size.
  Video display area: 480x360
  Player excluding video display area: 6x52
• Components
  video player
  player control bar

Video Player with Logo

This is a simple single-video player that provides a 480x55 pixel branding area above the video display. You can scale this player to match the dimensions of the video file, which is useful for displaying 16:9 aspect ratio videos without letterboxing. You can't assign content to this player using the Media module; instead, use Quick Video Publish, modify the configuration parameters in the player's publishing code (in the help document, Assigning Content to Players Programmatically), or use the Player APIs.

• View Player
• Download PSD layout (.zip)
• Components
  video player
  player control bar
  branding area, 480x55

Chromeless Video Player

The Chromeless Video Player looks like a Video Display component with no player control "chrome." When the viewer moves his mouse over the video display area, the player controls appear at the bottom of the video display. You can scale this player to match the dimensions of the video file, which is useful for displaying videos without letterboxing. You can't assign content to this player using the Media module; instead, use Quick Video Publish, modify the configuration parameters in the player's publishing code (in the help document, Assigning Content to Players Programmatically), or use the Player APIs. Read more in Three simple tips for customizing our new chromeless video player.

• View Player
• Default dimensions: 480x270
• Components: video player, with player controls appearing on mouse-over
  

Accessible Video Player

This template is a single-video player that supports accessibility features for vision and hearing impaired users, including closed captioning, keyboard navigation, and screenreader support. The Accessible Video Player is a single video player; it does not directly support playlists.

While the Accessible Video Player is available to all Video Cloud publishers, its closed captioning feature is available only to Video Cloud Pro and Enterprise publishers, since it requires using a custom metadata field in your videos. For another approach, you could use the Captions APIs in the Smart Player API or the Flash-only Player API, which are available to all Video Cloud publishers and can be used with any player template, but which are more complex than using the Accessible Video Player. For information about using the Accessible Video Player, read Accessible Video Player Template.

• View Player
• Download PSD layout (.zip)
• Default Dimensions
  Overall: 500x470
  Video display area: 480x360
• Components
  video display
  player control bar: 38 px high
  closed captions menu
  title label and short description label
  top right image: 180x52
  border: 10 px

Widescreen with Horizontal List 3.0

This template supports a single playlist. It can display standard 16:9 or 4:3 video with letterboxing. The name and thumbnail of each video displays in a scrolling list beneath the video player.

• View Player
• Download PSD layout (.zip)
• Default Dimensions
  Overall: 650x630
  Video display area: 630x354
  Player excluding video display area: 20x276
• Components
  video player
  player control bar
  title label
  top right image: 300x60
  scrolling horizontal video list

Widescreen with Vertical Video List

This template supports a single playlist. By default the player is sized for 16:9, but it can be scaled and resized through the publishing code for 4:3. The thumbnail of each video displays in a scrolling list next to the video player.

• View Player
• Download PSD layout (.zip)
• Default Dimensions
  Overall: 588x410
  Video display area: 480x270
  Player excluding video display area: 108x140
• Components
  video player
  player control bar
  title label
  bottom right image: 300x60
  scrolling vertical video list with thumbnails

Widescreen with Video Text List

This player template supports a single playlist. By default the player is sized for 16:9, but you can scale and resize it through the publishing code for 4:3. The name and description of each video is displayed in a scrolling text list next to the video player.

• View Player
• Download PSD layout (.zip)
• Default Dimensions
  Overall: 480x215
  Video display area: 302x170
  Player excluding video display area: 178x45
• Components
  video player
  player control bar
  title label
  scrolling vertical list of video titles and short descriptions

Video Player with Horizontal Video List

This player template supports a single playlist. By default the player is sized for 4:3, but it can be scaled and resized through the publishing code for 16:9. The thumbnail of each video displays in a scrolling list below the video player.

• View Player
• Download PSD layout (.zip)
• Default Dimensions
  Overall: 300x340
  Video display area: 300x230
  Player excluding video display area: 0x110
• Components
  video player
  player control bar
  title label
  scrolling horizontal video list with thumbnails

Tabbed Navigation 3.0

This player allows the viewer to toggle though multiple playlists by selecting tabs at the top of the playlist area. The scrollable list on the right includes the short description and thumbnails for each video.

• View Player
• Download PSD layout (.zip)
• Default Dimensions
  Overall: 966x546
  Video display area: 480x360
  Player excluding video display area: 486x186
• Components
  video player
  player control bar
  top left image: 480x55
  bottom right image: 468x60
  video list with thumbnails and short descriptions
  tab bar with playlists
  drop-down menu with additional playlists

Compact Tabbed Navigation 3.0

This player is similar to the Tabbed Navigation 3.0 player. It is sized for display on a 1024 x 768 display and is narrower than the standard Tabbed Navigation template. This player allows the viewer to toggle though multiple playlists by selecting tabs at the top of the playlist area. The scrollable list on the right includes the short description and thumbnails for each video.

• View Player
• Download PSD layout (.zip)
• Default Dimensions
  Overall: 798x603
  Video display area: 480x360
  Player excluding video display area: 318x243
• Components
  video player
  player control bar
  top left image: 300x40
  bottom image: 728x90
  video list with thumbnails and short descriptions
  tab bar with playlists
  drop-down menu with additional playlists

Chromeless Video Player with Tabbed Playlists

This player combines a re-sizable Chromeless Video Player with tabbed navigation that allows the viewer to toggle though multiple playlists by selecting tabs at the top of the playlist area. The scrollable list on the right includes the short description and thumbnails for each video.

• View Player
• Download PSD layout (.zip)
• Default Dimensions
  Overall: 960x445
  Video display area: 640x360
  Player excluding video display area: 320x85
• Components
  chromeless video player
  video list with thumbnails and short descriptions
  tab bar with playlists
  drop-down menu with additional playlists

Thumbnail Navigation

This player supports multiple playlists. Each playlist has a tab in the tabbed navigation. Each tab displays a scrollable tiled list with thumbnails and titles for each video in the playlist.

• View Player
• Download PSD layout (.zip)
• Default Dimensions
  Overall: 956x654
  Video display area: 480x360
  Player excluding video display area: 476x294
• Components
  video player
  player control bar
  tabbed menu with playlists
  scrolling tiled video list with thumbnails and short descriptions
  top branding area, 480x40
  bottom branding area, 728x90

Video Player with Dropdown Navigation

This player supports multiple playlists that are selectable through the drop-down menu. By default, the player is sized for 4:3, but you can scale and resize it through the publishing code for 16:9. The name, description and thumbnail of each video displays in a scrolling list below the video player.

• View Player
• Download PSD layout (.zip)
• Default Dimensions
  Overall: 300x540
  Video display area: 300x230
  Player excluding video display area: 0x310
• Components
  video player
  player control bar
  drop-down menu with playlists
  scrolling video list with thumbnails and short descriptions

Widescreen with Dropdown Navigation

This player supports multiple playlists. By default the player is sized for 16:9, but you can scale and resize it through the publishing code for 4:3. The thumbnail of each video displays in a scrolling list next to the video player.

• View Player
• Download PSD layout (.zip)
• Default Dimensions
  Overall: 776x410
  Video display area: 630x354
  Player excluding video display area: 146x56
• Components
  video player
  player control bar
  drop-down menu with playlists
  vertically scrolling video list with thumbnails

Mobile optimized player templates

These two standard player templates are optimized for playback on mobile devices. They will work well on any screen, however. They have larger controls, which make them easier to use on touch screens. The mobile optimized player templates do function as smart players, but the HTML5 mode will differ from the Flash mode version. The HTML5 player of the the mobile optimized templates will use the native video player controls, while the Flash player will use the template's large button controls, suitable for tapping on mobile devices.

• Mobile Optimized Video Player
• Mobile Optimized Video Player with Horizontal Video List

Mobile Optimized Video Player

This is a simple single-video player that displays video controls underneath the video. The controls are larger, which make them easier to use on touch screens. You can scale this player to match the dimensions of the video file, which is useful for displaying 16:9 aspect ratio videos without letterboxing. You can't assign content to this player using the Media module. Instead, use Quick Video Publish, modify the configuration parameters in the player's publishing code (in the help document, Assigning Content to Players Programmatically), or use the Player APIs.

• View Player
• Default Dimensions
  Overall: 480x450
  Video display area: 480x360
  Player excluding video display area: 0x90
• Components
  video player
  player control bar

Mobile Optimized Video Player with Horizontal Video List

This template supports a single playlist. The controls are larger, which make them easier to use on touch screens. By default the player is sized for 4:3, but it can be scaled and resized through the publishing code for 16:9. The thumbnail of each video in the playlist is displayed in a scrolling list below the video player.

• View Player
• Default Dimensions
  Overall: 480x628
  Video display area: 480x360
  Player excluding video display area: 0x268
• Components
  video player
  player control bar
  title label
  scrolling horizontal video list with thumbnails