Home Doc API Examples GitHub

Example MediaSync (multi-device)

Synchronization and control of two video elements using timing object. Both videos produce audio independently. Listening to the audio is likely the best way to detect synchronization errors.

Demo Tips

  • open this page on multiple devices (or at least multiple browser tabs) (simultaneously) to verify multi-device timing.
  • the timing provider is shared globally, so others might be playing with demo too…
  • try reloading the demo on one device/tab while the demo is running on others.

Demo

Player 1

Player 2

JavaScript

// timing object
var to = new TIMINGSRC.TimingObject({provider:timingProvider});

// set up video sync
var sync1 = new TIMINGSRC.MediaSync(document.getElementById('player1'), to);

// set up video sync
var sync2 = new TIMINGSRC.MediaSync(document.getElementById('player2'), to);