Brightcove Native Player Controls

In this topic, you will learn how to use and customize player controls with the Brightcove Native SDKs.

Introduction

Fusing the Brightcove Web Player aesthetics with iOS and Android platform standards, the Brightcove Native Player Controls provide a stylish look on top of a solid set of functionalities right out of the box.

Dynamic UI

The Brightcove Native Player Controls are highly adaptive to make sure your content is displayed in a beautiful user interface regardless of the situation.

Adaptive Screen Size

Ensuring UI elements are large enough to clearly see and use is crucial for any mobile application. The Brightcove Native Player Controls contain logic to determine how much space is available for the user interface. If the width falls under a certain threshold, the controls will automatically switch to use a two line configuration.

Player controls
Player controls
Compact player controls
Compact player controls

Android

The Native SDK for Android checks the device screen size to set the player controls layout.

  • When width is 480dp or greater, the one-line layout is used.
  • When width is less than 480dp, the two-line, compact layout is used.

To learn more about density-independent pixels (dp), see Android's Support different pixel densities document.

iOS

The Native SDK for iOS checks the device screen size to set the player controls layout.

  • When width is 450px or greater, the one-line layout is used.
  • When width is less than 450px, the two-line, compact layout is used.

Playback Modes

Your player may contain varying types of content throughout its lifecycle that each require a specific user interface layout. The Brightcove Native Player Controls contain logic to automatically determine if the type of content type is VoD, Live, or Live DVR and adapt the user interface accordingly, even throughout a playlist of changing content types!

Video On Demand (VoD)

Accounting for the majority of playback experiences, the VoD interface is the root of all the player UI designs.

Scroll through the images below to see the Brightcove Player Controls. Notice that the controls switch to a two-line, compact layout when the width of the viewer is small:

 

  • Android controls
  • Android compact controls
  • Closed captions button
  • iOS controls
  • iOS compact controls

Notable features for the Brightcove Player Controls include:

  • Play/Pause Button
    • Plays and pauses the content
  • Jump Back Button
    • When pressed, causes the content to seek back 10 seconds.
  • Enhanced Seekbar
    • Shows content played back in pink
    • Shows content buffered in light gray
    • Supports the usage of markers for advertisements or other purposes (Android)
  • Closed Captions Button
    • Only shown when captions are detected. Selecting this button brings up the closed captions settings menu.
  • Full Screen Button
    • Allows the viewer to go to fullscreen or back to inline playback
  • Airplay Button (iOS only)
    • Only shown if Airplay devices are detected. This feature allows the viewer to setup Airplay streaming.

Live

The Live UI hides certain elements that a user would not be able to engage with. Elements removed include the Jump Back Button and the Seekbar. However, a new “LIVE” label is added, which when green indicates that the content being watched is live.

iOS live video
iOS live video

Live DVR

The Live DVR format provides all the same functionality as the VoD layout, plus an additional LIVE label which turns green when the content is live, and is grey when the viewer is watching older content. Additionally, the LIVE label acts as a button which can be pressed at any time to seek back to the most recent live moment.

iOS DVR live video
iOS DVR live video

Customization

Want to change the colors or the skin to match your app's color themes? Not a problem! The Brightcove Native Player Controls were designed to be easily customizable. Here are some of the ways you can customize the controls:

  • Swap colors and use your own custom buttons to create personalized themes. The Native SDK for Android allows you to easily include/exclude a wide variety of common buttons. Here, the control buttons have been changed to orange, and the seekbar has a custom image.
    Android custom controls
    Android custom controls
  • While the Native SDK for iOS also allows you to choose from a set of common buttons and layouts, you can also create your own custom layout. Here, is an example of a custom layout.
    iOS custom controls
    iOS custom controls
  • Alternatively, you can remove buttons to create a simple and clean layout.
    iOS simple controls
    iOS simple controls

Fast forward and rewind buttons

The Brightcove Native SDKs allow you to add fast forward and rewind buttons to the player controls.

Android

To create your own customized media controller, there are pre-defined IDs that you can use.

For implementation details, see the following:

iOS

The SDK includes a jump back button in the default layout. You can also add your own jump forward button by creating your own layout.

For a custom button, you can perform a seek on the playback controller. To determine where you want to seek, get the current time, add/subtract 10 seconds (for example), and then use that value.

For implementation details, see the following:

Accessibility

Accessibility features come out of the box as a standard part of our UI, with no additional setup required.

Hearing Impaired

The Brightcove Native Player Controls integrate a Closed Captions button into every layout to ensure that when captions are available, the caption viewing experience can be easily customized. For more information on Closed Captions with the SDKs, please see our Video Formats and Captioning section.

Visually Impaired

Android

Coming Soon!

iOS

Coming Soon!