Wistia onPlay not firing

[brandon-rentpingmedia]

Current Behavior

If you have the same wistia video on multiple pages within your react application, only the first one will fire the onPlay (and other) events.

Expected Behavior

Each wistia video should fire events.

Steps to Reproduce

1. Embed a wistia video on a page with onPlay.
2. Embed the same wistia video on another page/popup with onPlay.

Environment

• URL attempting to play: Any
• Browser: Any
• Operating system: Any

Other Information

The issue looks to be because Wistia.js is using the Wistia video key as the unique identifier for the array. So two of the same video will not end up with unique entries in the array.

[cookpete]

I'm afraid I need more information to look into this. I can render multiple of the same Wistia video and onPlay is firing correctly for all of the videos. I can also toggle videos off and on, and onPlay still fires correctly.

[brandon-rentpingmedia]

Sorry about that. Our specific use case is we have an overview page with a Wistia video, then you can click into a detailed page with that has a different react component, but the same Wistia video (url). The onPlay event fires fine for the first video, but when you get to the second video, the onPlay does not fire. Similarly, if you start on the detail page (reload browser), the onPlay fires there, but not on the overview. Does that help?

[cookpete]

Can you reproduce this in jsFiddle? My attempts to cause the issue to happen aren't working.

[jondkinney]

@cookpete I think @brandon-rentpingmedia is correct. If you look here:
https://github.com/CookPete/react-player/blob/bb69b1df1972ca50feb97090c8ff35aab5203b3c/src/players/Wistia.js#L106

https://github.com/CookPete/react-player/blob/bb69b1df1972ca50feb97090c8ff35aab5203b3c/src/players/Wistia.js#L113

you can see that the key that is being used for the wistia video is the URL. So if you have two of the same players on the page they are fighting with each other in the virtual dom.

[cookpete]

Annoyingly, this is just how the Wistia player works. You render a div with class of wistia_async_abcde12345 where abcde12345 is the ID of your video, then call _wq.push({ id: 'abcde12345', ... }) to embed the player.

I can't see a way to use an ID that isn't the video ID (like a random string) to embed a player in the same way. The docs even mention having multiple players with the same video but I can't see how this is possible. Using wistia_async_randomstring123 will cause a Media not found. error and won't let you call replaceWith('actualvideoid') when the play is initialised/ready.

If someone is able to contact Wistia about this, feel free to report back here.