Hello Stack Overflow munity,

I'm a rather novice coder, but I have a project I've been devising that looks more and more plicated every day, and I don't know where to start.

With inspiration taken from Synchtube & Phonoblaster, I'm looking to create something for my website that will allow visitors to watch YouTube videos and playlists that I have curated, together in real-time, in-sync.

Because I want to be able to put this in the context of my own website, I can't use the services listed above that already do this - so I wanted to figure out how to roll my own.

Some things have been written about this topic on Stack Overflow, and other blogs: HERE and HERE.

Because I still consider myself a novice programmer, and a lot of the information I've found on Google and Stack tends to be more than 1 or 2 years old, I'm still unsure where to begin or if this information is outdated. Specifically, what languages and tools I should be learning.

From what I've gathered so far, things like Javascript, Node.JS, and the YouTube API would form the crux of it. I've not used any of these before, but would be interested to see whether other experienced coders would have their own suggestions or ideas they could point me towards.

I appreciate you taking time out to read this post! Hope to hear from some of you soon :)

Many thanks.

Hello Stack Overflow munity,

I'm a rather novice coder, but I have a project I've been devising that looks more and more plicated every day, and I don't know where to start.

With inspiration taken from Synchtube & Phonoblaster, I'm looking to create something for my website that will allow visitors to watch YouTube videos and playlists that I have curated, together in real-time, in-sync.

Because I want to be able to put this in the context of my own website, I can't use the services listed above that already do this - so I wanted to figure out how to roll my own.

Some things have been written about this topic on Stack Overflow, and other blogs: HERE and HERE.

Because I still consider myself a novice programmer, and a lot of the information I've found on Google and Stack tends to be more than 1 or 2 years old, I'm still unsure where to begin or if this information is outdated. Specifically, what languages and tools I should be learning.

From what I've gathered so far, things like Javascript, Node.JS, and the YouTube API would form the crux of it. I've not used any of these before, but would be interested to see whether other experienced coders would have their own suggestions or ideas they could point me towards.

I appreciate you taking time out to read this post! Hope to hear from some of you soon :)

Many thanks.

• javascript
• api
• node.js
• youtube

• I find it really hard to believe that this would be possible, but I'm interested to see answers from people with direct experience. – Pointy Commented Dec 10, 2012 at 2:03
• I don't know about exact implementation, but perhaps you could have a server-push to the client telling it to play the video. Of course this would involve something like etd, or long polling techniques, but the fact of the matter is that the server needs to somehow tell the clients when to play. If you want specifically synchronized playing, perhaps you could have the server set a play time in the near future, perhaps 2 seconds after the server issues the message. Just a thought. – AI Generated Response Commented Dec 10, 2012 at 2:06
• This question is quite vague, but you're on the right track. Were I to do this today, I would probably use Node.js with some library for WebSocket abstraction, like Socket.IO. – Michelle Tilley Commented Dec 10, 2012 at 2:09
• I would look into seeing if you can publish your own live stream on youtube(or some other similar service). Live video seems the natural way to synchronize the end clients, with you controlling the feed. – goat Commented Dec 10, 2012 at 2:15
• @BrandonTilley - Socket.IO looks really interesting. As Geuis also suggested it in his detailed response, this might be the key! :) Thanks so much for your ideas. – copyflake Commented Dec 10, 2012 at 3:30

1 Answer 1

It partially sounds like you need a live stream from Youtube. You can find more info here. https://support.google./youtube/bin/answer.py?hl=en&answer=2474026

If you can get that going, then syncing play between any number of users is as simple as embedding a regular youtube embed of your stream in a browser.

Looking past that, if you wanted to sync video playback amongst any number of users, the first big problem is learning how to set time on a video. Luckily, that's easy with the hashbang #t=seconds.

Eg: http://www.youtube./watch?v=m38RdUGqBPM&feature=g-high-rec#t=619s will start this HuskyStarcraft video at 619 seconds into the video.

The next step is to have some backend server that keeps track of what the current time is. Node.js with Socket.io is incredibly easy to get setup. Socket.io is a wonderful library that gracefully handles concurrency connections from web sockets all through long polling and more and works well even on very old browsers. Note that websockets aren't even required, but will be the most modern and full-proof method for you. Otherwise its hacks and stuff.

One way this could work would be as follows.

User1 visits your site and starts playing the video first. A script on your page sends an XHR request to your server that says, "video started at time X". X then gets stored as the start time.

At this point, you could go 2 routes. You can have a client-side script using the Youtube API to poll the video and get its current status every second. If the status or time changes, send another request back to the server to update the state.

Another simple route would be to have the page load for User2+, then send an XHR request asking for the video play time. The server sends back the difference between the start time from User1, then the client script sets the 't' hashbang on the youtube player for User2+. This lets you sync start times, but if any users pause or rewind the video, those states dont get updated. A subsequent page refresh might do that though.

The entire application plexity depends on exactly what requirements you want to have. If its just synchronized start times, then route #2 should work well enough. Doesn't require sockets and is easy to do with jQuery or just straight javascript.

If you need a really synchronized experience where any user can start/stop/pause/fast forward/rewind the video, then you're looking at either using an established library solution or writing your own.

Sorry this answer is kind of open ended, but so was your question. =)