12

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!

Vimal
  • 1,266
  • 1
  • 9
  • 16
Anthony
  • 131
  • 1
  • 1
  • 8
  • The only thing i can think of is to have each user select ready. Once all are ready, push the video to all of them. I would look into a pub/sub service using php. I'm not sure what browser support you are looking at, but I've found various websocket technologies to be quite handy for pub/sub. Which is supported in most modern browsers. – agmcleod Dec 07 '11 at 21:53
  • 1
    Use a server to sync the clients. Then, use the YouTube JavaScript player API to play a video. See [this answer](http://stackoverflow.com/questions/7443578/youtube-iframe-api-how-do-i-control-a-iframe-player-thats-already-in-the-html#7513356) for a simple, easy-to-understand method to play a video. For more complex calls, such as getting the player's state and events, see [this answer](http://stackoverflow.com/questions/7988476/listening-for-youtube-event-in-jquery/7988536#7988536). – Rob W Dec 07 '11 at 22:18
  • Even if all users start the video at exactly the same moment, what happens if some have a slower connection that can keep up with the video stream only as long as other apps aren't using some of its bandwidth? Do you make all clients pause so that nobody falls behind? – nnnnnn Dec 07 '11 at 22:56
  • I voted to close this question because the topic is too broad to cover in a few paragraphs here. A full answer would require many pages or even an entire book. This is evident when you see how many answers to this are links to tutorials or product recommendations rather than showing how it can be done in code. – Stephen Ostermiller Mar 29 '22 at 17:55

2 Answers2

4

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.

leggetter
  • 15,248
  • 1
  • 55
  • 61
2

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.

AlexB
  • 726
  • 4
  • 13
  • Also, have a look at how the NTP protocol handles network delay when synchronising clocks - you may want to implement something similar – Basic Dec 07 '11 at 22:09