video-client.html

<!-- https://gist.github.com/mahemoff/443933
     This is a Node+WebSocket powered demo to sync videos
     across different browsers. This file is the client,
     the other one is the Node server. Powered by Node and
     https://github.com/einaros/ws -->

<style>
  .inactive { display: none; }
  .active { display: block; }
</style>
<script>
var controller = null;
window.onload = function() {

  if ($_("#name").value == "")
      $_("#name").value = "user"+parseInt(99999*Math.random());

  var conn;
  $_("#join").onclick = function() {
    conn = new WebSocket("ws://" + window.location.host + "/test");
    $_("#username").innerHTML = $_("#name").value
    $_("#room").className = "active";
    $_("#registration").className = "inactive";
    var video = $_("video");
    video.removeAttribute("controls");
    video.addEventListener("timeupdate", function() {
      if (iAmControlling() && !video.paused) conn.send(video.currentTime);
    }, true);
    video.addEventListener("pause", function() {
      if (iAmControlling()) conn.send("pause "+video.currentTime);
    }, true);
    video.addEventListener("play", function() {
      if (iAmControlling()) conn.send("play "+video.currentTime);
    }, true);
    conn.onmessage = function (ev) {
      var matches;
      if (matches = ev.data.match(/^control (.+)$/)) {
        $_("#controller").innerHTML = matches[1];
        video.removeAttribute("controls");
        if (matches[1] === $_("#username").innerHTML)
        {
            video.setAttribute("controls", "");
        }
      } else if (matches = ev.data.match(/^userCount (.+)$/)) {
        // $_("#userCount").innerHTML = matches[1];
        document.getElementById("userCount").innerHTML = matches[1];
      } else if (matches = ev.data.match(/^pause (.+)$/)) {
        video.currentTime = matches[1];
        video.pause();
      } else {
        if (iAmControlling()) return;
        var estimatedTimeOnMaster = parseInt(ev.data)+1;
        if (Math.abs(estimatedTimeOnMaster-video.currentTime)>1)
          video.currentTime = estimatedTimeOnMaster;
        if (video.paused) video.play();
      }
    };
    $_("#takeControl").onclick = function(ev) {
      conn.send("control "+$_("#name").value);
      //var video = document.getElementById("video"); // assuming "video" is your videos' id
      video.setAttribute("controls", "");
    };
    $_("#leave").onclick = function() {
      conn.close();
      $_("#room").className = "inactive";
      $_("#registration").className = "active";
    };
  };
};

function iAmControlling() {
  return $_("#controller").innerHTML == $_("#name").value;
}

function $_(sel) {
  return document.querySelector(sel);
}
</script>

<div id="registration" class="active">
  <p>Username: <input id="name" /> <button id="join">Join Room</button></p>
</div>

<div id="room" class="inactive">
  User: <span id="username"></span>
  <button id="leave">Leave Room</button>
  <p>Users: <span id="userCount"></span></p>
  <p>Controller: <span id="controller">---</span> <button id="takeControl">Take Control</button></p>
  <p><video src="http://www.wowza.com/_h264/bigbuckbunny_450.mp4"></video></p>
</div> 

video-server.js

var express = require('express');
var http = require("http");
var WebSocketServer = require('ws').Server
var app = express();

app.get('/', function(res, req) {
    req.sendfile(__dirname + '/video-client.html');
})

server = http.createServer(app);
//app.use(express.static(__dirname + '/public'));//.listen(80);
server.listen(8010);


var sys = require("sys");
//var ws = require('node-websocket-server');
var server = new WebSocketServer(/*{port: 4321}*/{server: server});
var userCount = [];

server.broadcast = function(data) {
    for(var i in this.clients)
        this.clients[i].send(data);
};

server.on("connection", function(conn){
  server.broadcast("userCount " + ++userCount);
  conn.on("message", function(message){
    server.broadcast(message);
  });
  conn.on("close", function(){
    server.broadcast("userCount " + --userCount);
  });
});

server.on("close", function(conn){
  server.broadcast("userCount " + --userCount);
});

function log(msg) {
  sys.puts(new Date + ' - ' + msg.toString());
}