CODEWITHSUNDEEP
javascriptvue.js
CodeToad
CodeToad

Reputation: 4724

vue.js synchronized play of video player components

I have multiple video player components on a page. I need to implement a sync button on all of the componenets that what when pressed. sets the currentTime off all other "slave" videos to the same time as the "master" component, and plays/paused, rewinds etc.. all of the videos together.

Seems like the best approach is to communicate up to the parent, and have the parent synchronize all of the child components.

I could use some pointers on how to implement this in vue.

Upvotes: 0

Views: 579

Answers (1)

Roy J
Roy J

Reputation: 43881

I think the way you want to do this is create an event bus (just a data item that is, itself, a Vue instance) that you pass to each of the children as a prop. When a sync button is pressed, the child will emit an event on the bus. Each child will also listen for those events on the bus and set its video time accordingly.

Upvotes: 1

Related Questions