Brightcove Player Sample: Stopping Other Players on the Page when a Video Starts

In this topic, you will learn how to pause all the other Brightcove Players on a page when video playback starts in one of the players. The functionality described in the document requires Brightcove Player version 5.0.3 or later.

Player example

Start playing one of the videos. Next, play the video in a different player and see that video playback stops in the other player that was playing.

See the Pen 18179-stopping-other-players-page-when-video-starts by Brightcove Learning Services (@rcrooks1969) on CodePen.

Source code

View the complete solution on GitHub.

Using the CodePen

Here are some tips to effectively use the above CodePen:

  • Toggle the actual display of the player by clicking the Result button.
  • Click the HTML/CSS/JS buttons to display ONE of the code types.
  • Later in this document the logic, flow and styling used in the application will be discussed in the Player/HTML configuration, Application flow and Application styling sections. The best way to follow along with the information in those sections is to:
    1. Click the EDIT ON CODEPEN button in the CodePen and have the code available in one browser/browser tab.
    2. In CodePen, adjust what code you want displayed. You can change the width of different code sections within CodePen.
    3. View the Player/HTML configuration, Application flow and/or Application styling sections in another browser/browser tab. You will now be able to follow the code explanations and at the same time view the code.

Development sequence

Normally for samples this section suggests an approach to development moving from one page to using a Brightcove Player plugin. In this case, the code acts on all the players in the page in concert, and cannot be assigned to one player as a plugin, hence no plugin code is shown.

API/Plugin resources used

API Methods API Events
play() play
pause()  

Player/HTML configuration

This section details any special configuration needed during player creation. In addition, other HTML elements that must be added to the page, beyond the in-page embed player implementation code, are described.

Player configuration

No special configuration is required for the Brightcove Player, but there are three distinct players on the page inside HTML <div> tags for layout control.

Other HTML

No other HTML elements are added to the page.

Application flow

The basic logic behind this application is:

  • Determine how many players are on the page.
  • Loop over the players, initializing them as Brightcove Players and also setting a play event listener on each.
  • Each time a play event is handled, loop over the players and pause all players that do not have the name of the player that dispatched the event.

Create a loop over the players and assign an event handler to each

Find the code which is labeled:

// ### Determine the available player IDs ###

If you have multiple players on a page they are stored in an object name videojs.players with keys that are the names of the players. You use JavaScript Object.keys() method to extract the names of the players, which you want for the loop, not the actual player objects. In the loop you assign an event handler then push the player into an array.

Handle the play event and stop other player playing

Find the code which is labeled:

// ### Handle all players' play event ###

Whenever a play event is handled, you extract the player name (id) from the event object, then loop over all the players and pause all players then don't have the name of player whose video just started playing.

Application styling

The CSS used for the page controls the layout of the multiple players.