How to play YouTube videos in sync on multiple cli

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.

Answer 2

For me the ideal solution is to use Vynch. With this technology you can embedded in your own website a room with video that you can watch synchronized. You can create playlist and share with friends and user! there is also a chat to exchange your impressions..

Answer 3

You have a couple of ways you can accomplish this:

• The ideal solution is to use a real time collaboration protocol and server (such as XMPP and OpenFire) set-up and develop a custom module that will allow you to pass custom stanzas back and forth. Unfortunately not only it doesn't meet your requirements about the tech involved but it's also rather complicated to implement, but the result is spectacular.

• Next up, if cross-browser compatibility is not an issue, you can use the WebSocket API in HTML 5. Check out this guy's example on how to build an HTML 5 WebSocket-enable chat.

• Finally, you're left with AJAX polling, either the usual method or long-polling, in which you block the server side script execution until you have some data available. See this link for further reference.