vidstack
Vidstack Player: Errors with Self-Hosted Video Playback on Page Navigation Using React Router
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.
