The Studio: Video example project has a VideoSurface component that shows how a single video with audio can be displayed on an entity and paused/played on tap, but it uses globally scoped variables that are shared across all instances of the component. This means when I have multiple planes that I want to show different videos on, I can’t reuse this component since they’d all just show the same shared video as a texture (from whichever instance was initialized last).
It would be very helpful to see how this component could be built using variables that are scoped to each component instance. It seems like the data property is intended to handle per-instance internal data, but the available types don’t allow for things used in this example project like DOM references or materials. Looks I can could also move the globally scoped variables directly into the stateMachine property for use by the all the states there, but then they wouldn’t be available to the remove() method. Maybe there is another way for internal data to be shared that I’m missing?
Here is a clone of this project showing the issue. I created a 2nd plane entity and assigned a different video to its VideoSurface component. Hopefully that shows the issue clearly!
Initial view:
View when one of the planes is tapped:
