VideoSync

Synchronized YouTube Video Playback.
So you and your friends can watch a bunny eating raspberries.
Together

Github Annotated Source Tutorial
Video Player 1's Publish Stream:
Video Player 2's Publish Stream:
    1. 1
    2. 2
    3. 3
    4. 4
    5. 5
    6. 6
    7. 7
    8. 8
    9. 9
    10. 10
    11. 11
    12. 12
  2. // Initialize VideoSync
  3. var sync = new VideoSync("RoomName", "UserName");

  5. // Your standard YouTube embed code.
  6. var player = new YT.player('player', {
  7. videoId: 'A9HV5O8Un6k', // The Video ID
  8. events: {
  9. // Bind these 2 methods.
  10. 'onReady': sync.onPlayerReady,
  11. 'onStateChange': sync.onPlayerStateChange
  12. }
  13. });
Adding Synchronized Playback.

You can add synchronized playback to Embedded YouTube videos with two simple steps.
First, initialize a VideoSync object with a room name and a user name.
Then, all you have to do is bind two of VideoSync's methods to two event callbacks in your standard YouTube embed code.
Voilà, you now have synchronized YouTube videos!

But How Does it Work?

YouTube's iframe API allows you to bind callbacks to state events of the embedded YouTube player. When you initialize VideoSync, you bind VideoSync methods to the onReady event and the onStateChange event. When important state change events occur, they are published through the PubNub Global RealTime Network, and then other VideoSync clients will act accordingly. If you'd like to learn more about how VideoSync works, check out the annotated source and the more detailed README.

Realtime Red cloud

Start Building Real-time Apps Now!

Get Started

Loading...