Customizing Buttons

This topic explains how to customize the buttons on your MediaPlayer. There are several buttons that are available by default on the transport control bar. You can hide or disable buttons and add custom ones to the transport control bar. The transport control bar has enough space to add a couple of buttons. You can gain additional space by hiding some of the defaults. If you need more space, you should make sure to include a More button which shows the additional controls. Do not create a second row of buttons in the transport control bar.

There are three primary ways to customize the button controls.

• Add a Custom Button
• Hide a Button
• Disable a Button

Add a Custom Button
When you add a custom button, you need to provide an icon for the button. You can either provide your own custom icon, or use one of the ones provided for you on the console. If you do create a custom icon, make sure that it is not identical to one of the icons for another, existing button.

The following code adds a custom button and provides a method that will be called whenever the button is clicked.

JavaScript

function handleMyButtonClick() {
    // Put code here that you want to execute when the button is pressed.
}
  
// Get the MediaPlayer. In this example the MediaPlayer is named myMediaPlayer.
var mediaPlayer = document.getElementById("myMediaPlayer").tvControl;
  
// Create the new button
var myCustomButton = document.createElement("button");
myCustomButton.textContent = "my button";
  
mediaPlayer.commands.push(myCustomButton);
  
// This code makes sure we call the handler method when the button is clicked.
myCustomButton.addEventListener("click", handleMyButtonClick, false);

You may want to insert your custom button at a specific location. The commands object is an array so you can use the splice method to insert the custom button.

The following are the indices for the built in buttons:

• 0 - replay
• 1 - Chapter skip back
• 2 - Previous track
• 3 - Stop
• 4 - Time skip back
• 5 - Play on remote device
• 6 - Zoom
• 7 - Audio tracks
• 8 - Rewind
• 9 - Play / Pause toggle
• 10 - Fast forward
• 11 - Closed captions
• 12 - Volume
• 13 - Time skip forward
• 14 - Chapter skip forward
• 15 - Next track
• 16 - Playback rate
• 17 - Live
• 18 - Fullscreen

Hide a Button

The following code hides the rewind and fast forward buttons on the MediaPlayer. You can customize the code to hide any buttons that you do not support in your app. This code snippet should be added to your JavaScript file.

JavaScript

// Get the MediaPlayer. In this example the MediaPlayer is named myMediaPlayer.
var mediaPlayer = document.getElementById("myMediaPlayer").tvControl;
mediaPlayer.fastForwardButtonVisible = false;
mediaPlayer.rewindButtonVisible = false;

Disable a Button

The following sample disables the chapter skip buttons. You can disable a button when you don't want to completely hide it, but it should not be currently be available in your app.

JavaScript

// Get the MediaPlayer. In this example the MediaPlayer is named myMediaPlayer.
var mediaPlayer = document.getElementById("myMediaPlayer").tvControl;
mediaPlayer.chapterSkipBackButtonEnabled = false; 
mediaPlayer.chapterSkipForwardButtonEnabled = false;