Best Practices for Implementing the EX.CO Player on SPA Pages

This article provides a clear overview of how to properly implement and manage the EX.CO Player within Single Page Applications (SPAs). It covers best practices for initialization, destruction, and re-initialization of the player during route changes, as well as performance considerations, lifecycle guidelines, and event handling. By following the recommendations in this guide, you can ensure stable player behavior, prevent duplication issues, and optimize performance across your application.

1. Integration & Setup

• On a SPA, page transitions do not reload the browser window, so the EX.CO Player must be manually destroyed and re-initialized whenever users navigate between different pages.

• Initialization: Initialize the player after the component or page has mounted.

   For frameworks like React, use useEffect or lifecycle hooks.

  For Vue, use mounted().
  Preferably, have the SDK script in the head element.

• Always implement EX.CO by using the programmatic player API to manage the player manually: Programmatic player 

• Single Instance: Avoid multiple uncontrolled instances. If multiple players are needed, ensure each has a unique container and proper cleanup.
• Route Changes: Ensure you destroy the player via playerApi.destroy() when navigating between SPA routes to prevent duplicate playback or memory leaks.
  It's important to destroy the existing player instance before navigating to a new page, otherwise the old instance may continue running in the background, causing duplicate playback or memory leaks.

• You should not call destroy/init inside a component’s internal render cycle, where re-renders might accidentally trigger them multiple times.

• More information about the player can be found in the developer docs
  https://developer.ex.co/#/video-channels/embed 

2. Performance & Optimization

• Resource Management: Destroy the player instance on unmount to free memory and unwanted auctions running.
• Multiple Instances: Limit simultaneous player instances and reuse a single instance when possible.
• Monitoring: Track performance impact, especially on mobile devices or low-memory environments.
• Component Life Cycle: 

• .connect() is called once per session. 

• Store the result of .connect() in a persistent variable

• SPA navigation does NOT require reconnecting.
  https://developer.ex.co/#/video-channels/api-reference/init-method?id=init-method
  https://developer.ex.co/#/video-channels/api-reference/destroy-method?id=destroy-method 

3. Events & Interactivity

• When the user navigates between SPA pages:

  Call: playerApi.destroy()

  Load or update your page content

  Call: playerApi.init()

• This ensures:

  no duplicated players

  no stacked iframes

  clean initialization on each route change

• Inject the EX.CO script only once during the lifetime of the SPA.

• If duplicates appear → it means the script or player is being initialized more than once.

• Following this rule + using destroy() fixed the duplication issue.

• Dynamic Content: Update playlists or media dynamically by using the provided player APIs to avoid full reinitialization. For reference, please use this link:
  https://developer.ex.co/#/video-channels/api-reference/addPlaylistItems-method