Vidstack Player: Errors with Self-Hosted Video Playback on Page Navigation Using React Router

[rajatgautam755421]

We are encountering issues with the Vidstack player in our WordPress plugin when handling self-hosted videos in a React application using react-router-dom.

Steps to Reproduce:
Upload a self-hosted video as an admin in the WordPress plugin.
As a student, navigate to the page containing the self-hosted video.
Observe that the video plays correctly initially.
Use react-router-dom to navigate to a different page.
Return to the page with the self-hosted video.
Observed Behavior:
When navigating back to the page with the video, the following errors are shown:

vidstack-D2YCgfrz.js:373 Uncaught TypeError: video.canPlayType is not a function
vidstack-D2YCgfrz.js:4776 Uncaught TypeError: this._media.load is not a function
Expected Behavior:
The self-hosted video should play correctly when navigating back to the page without needing a full page refresh.

Temporary Workaround:
Refreshing the page resolves the issue, and the video plays without errors.

Additional Notes:
This issue only occurs with self-hosted videos. Other sources like Vimeo, BunnyNet, and YouTube are not affected.
The issue seems related to how Vidstack player initializes or handles unmounting/mounting when navigating between routes.
Please investigate this issue and provide a fix or guidance on handling Vidstack player lifecycle when using react-router-dom.