Player Templates

ProductEdition
Video CloudExpress I, Express II, Express III, Professional, Enterprise

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:

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: 486x52
  • 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.

Video player with logo

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.

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.

For information about using the Accessible Video Player, see the document Accessible Video Player Template. For information on how to add captioning support to videos played using the Accessible player, see Adding Captioning Support to an Accessible Video Player.

  • 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.

Widescreen with Horizontal List 3.0

  • 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.

Widescreen with Vertical Video List

  • 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.

Widescreen with Video Text List

  • 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.

Video Player with Horizontal Video List

  • 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.

Tabbed Navigation 3.0

  • 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.

Compact Tabbed Navigation 3.0

  • 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.

Chromeless Video Player with Tabbed Playlists

  • 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.

Thumbnail Navigation player template

  • 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.

Video Player with Dropdown Navigation

  • 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.

Widescreen with Dropdown Navigation

  • 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

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.

Mobile Optimized Video Player

  • 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.

Mobile-Optimized Video Player with Horizontal Video List

  • 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

Post new comment

The content of this field is kept private and will not be shown publicly.
0

Comments