Android: Managing Player Controls

Overview

The Native Player SDK provides player controls similar to the Brightcove Web Player to provide a consistent user experience across platforms. You can use the out-of-the-box Brightcove player controls, or customize them with your own colors, styles and buttons.

Default player controls

When you create an app using the Brightcove Player SDK for Android, you should start with either the BrightcovePlayer or the BrightcovePlayerFragment class.

Extend the BrightcovePlayer

In your app code, extend the MainActivity class from one of the classes above. For example:

public class MainActivity extends BrightcovePlayer {
}

Now, you are ready to instantiate the video view in your code.

Instantiate the BrightcoveVideoView

In the MainActivity.java file, and in the onCreate() method, add the following code:

@Override
protected void onCreate(Bundle savedInstanceState) {
    setContentView(R.layout.activity_main);
    brightcoveVideoView = (BrightcoveExoPlayerVideoView) findViewById(R.id.brightcove_video_view);
    super.onCreate(savedInstanceState);
}

Your player controls should look like this:

Customize player controls

The Brightcove player controls provide support for captions, video rewind and full-screen mode. You can also select the animation style for showing and hiding the controls.

Change control colors

Easily customizable, you can change the Brightcove player control colors to match your company branding material.

1. Use the same code in your MainActivity.java file as above.
2. In your src/main/res/values/colors.xml or res/values/strings.xml file, include the following code:

   <?xml version="1.0" encoding="utf-8"?>
   <resources>
   
       <!-- Define the new colors. -->
       <color name="bc_orange">#F3951D</color>
       <color name="magenta_semi_trans">#4DFF00FF</color>
   
       <!-- Change the progress colors to magenta/black/orange, all transparent. -->
       <color name="bmc_seekbar_played">@color/magenta_semi_trans</color>
       <color name="bmc_seekbar_buffered">@color/black_semi_trans</color>
       <color name="bmc_seekbar_track">@color/bc_orange</color>
   
   </resources>

   Your player controls should look like this:

   

Change icons and buttons in the player controls

To further customize the Brightcove player controls, you can swap out icons and add your own buttons to match your company styles.

1. Use the same code in your MainActivity.java file as above.
2. In your src/main/res/values/strings.xml file, include the following code:

   <?xml version="1.0" encoding="utf-8"?>
   <resources>
       <!-- Use the Font Awesome fa-stepbackward icon for the rewind
            button face. -->
       <string name="brightcove_controls_rewind">&#xf048;</string>
   </resources>

   Your player controls should look like this:

   

For complete code examples, see the Brightcove Player Controls for Android Samples.

Show/hide player controls

There are three ways to show and hide the player controls during video playback:

1. The user can tap on the device screen to toggle the player controls between showing and hiding the controls.

2. You can use the BrightcoveMediaController class. Here is one example of how to show player controls for a defined playhead position range.

   brightcoveVideoView.getEventEmitter().on(EventType.PROGRESS, new EventListener() {
       @Override
       public void processEvent(Event event) {
           int playheadPosition = brightcoveVideoView.getCurrentPosition();
           if(playheadPosition > 24000 && playheadPosition < 29000) {
               BrightcoveMediaController controller = brightcoveVideoView.getBrightcoveMediaController();
               controller.show();
           }
       }
   });

   
   

3. You can use events as follows:

   import static com.brightcove.player.mediacontroller.ShowHideController.SHOW_MEDIA_CONTROLS;
   import static com.brightcove.player.mediacontroller.ShowHideController.HIDE_MEDIA_CONTROLS;
   ...
   eventEmitter.emit(HIDE_MEDIA_CONTROLS);
   eventEmitter.emit(SHOW_MEDIA_CONTROLS);

Disable player controls

While designing your app layout and functionality, you may have a need to turn off the player controls. This can be done by setting the MediaController to null as follows:

@
Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
   View rootView = inflater.inflate(R.layout.fragment_player, container, false);
   brightcoveVideoView = (BrightcoveExoPlayerVideoView) rootView.findViewById(R.id.brightcove_video_view);
   super.onCreateView(inflater, container, savedInstanceState); // Need to be called after brightcoveVideoView is set.
   brightcoveVideoView.setMediaController((MediaController) null); // Need to be called after onCreateView.
   return rootView;
}

This example uses the BrightcovePlayerFragment.

Manually control fullscreen mode

Typically, users will control fullscreen viewing by tapping on the fullscreen button in the control bar. There may be times when you want to control this functionality manually, in code.

To set fullscreen mode, use the following code:

brightcoveVideoView.getEventEmitter().emit(EventType.ENTER_FULL_SCREEN);

To exit fullscreen mode, use the following code:

brightcoveVideoView.getEventEmitter().emit(EventType.EXIT_FULL_SCREEN);

For a complete list of event types, see the Player SDK for Android Reference, and navigate to the EventType class document.

Alternatively, you can use the fullScreen() and normalScreen() methods. You can find these methods in the Player SDK for Android Reference, and navigating to the BrightcovePlayer class document.

Browse SDK property values

For a complete list of values, including arrays, colors, dimensions, ids, integer, strings and styles, do the following:

1. Locate the android-native-player-public-x.x.x.zip file and uncompress it.

2. In the sdk folder, open the android-sdk-x.x.x.aar file.

3. Open the res/values/values.xml file. Here you will find a list of values that you can reference in your applications.