How to play YouTube videos in sync on multiple clients?

Question

I'm looking to understand how to build a web app that allows multiple users to view the same YouTube video in sync on their computers. For example, synchtube.com or watch2gether.com

I'm seeking a simple approach that can be implemented using common technologies such as PHP, jQuery and Apache. I'm currently thinking along the lines of polling (or comet long polling but that requires more complex server setup which I hope to avoid), similar to how Ajax chat apps are implemented - that is clients continuously check with the server to see which video is playing. However, I suspect there will be latency issues here so videos will not be completely in sync. I can't think of a better approach yet.

To fellow developer community, any help on the methodology or code snippets are hugely appreciated!

Answer 1

Here's an example of keeping videos in sync using WebSockets and node.js: http://softwareas.com/video-sync-with-websocket-and-node

I know you don't want to use this tech, it's just a good starting point to show what you can do and how.

Since you want to use PHP and keep things simple then your best solution is to outsource the realtime communications layer (used to keep the user videos in sync) to a hosted service such as Pusher, who I work for. This means you don't need to maintain the persistent connection and you can use Pusher to deliver realtime events about the video states between users/clients.

If you want to use YouTube videos, and HTML5 isn't always going to be available, then you'll need to use the Player API. I can't see a similar timeupdated event (available in HTML5 video) so you might need to periodically check the video time (see player status API section. You can register for state change events so you know when a user pauses, stops a video etc.

@rob-w's comment provides some good insight into using the YouTube API.

Note: This might actually make for a really interesting blog post so if you are interested let me know and I'll see what I can do.