Brightcove Player Sample: Stopping Other Players on the Page when a Video Starts
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.
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:
- Click the EDIT ON CODEPEN button in the CodePen and have the code available in one browser/browser tab.
- In CodePen, adjust what code you want displayed. You can change the width of different code sections within CodePen.
- 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.
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|
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.
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.
No other HTML elements are added to the page.
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
playevent listener on each.
- Each time a
playevent 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
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.
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.
The CSS used for the page controls the layout of the multiple players.