Example window sequencing mode(multi-device)

• Sequencer Background
• Sequencer API
• Sequencer Usage

The Sequencer may also provide enter and exit events based on a moving window. Window endpoints are implemented by two timing objects. The two endpoints may therefore be controlled independently, though in this demo they are not. Instead, SkewConverter is used to skew a root timing object (by -5 and +4) to create two new (but dependent) timingobjects. Window sequencing may be helpful for timed prefetching, visualization of a sliding window of timed data, etc.

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

Active Window : [ , ]

Play Pause Reset Backwards

JavaScript

 // Timing Object
var to = new TIMINGSRC.TimingObject({provider:timingProvider});
var toA = new TIMINGSRC.SkewConverter(to, -5.0);
var toB = new TIMINGSRC.SkewConverter(to, 4.0);

// Sequencer
var s = new TIMINGSRC.Sequencer(toA, toB);

// Load Data
var r = s.request();
Object.keys(data).forEach(function (key) {
	r.addCue(key, new TIMINGSRC.Interval(data[key].start, data[key].end));
});
r.submit();

// Register Handlers
s.on("change", function (e) {
  var el =  document.getElementById(e.key);
  el.classList.add("active");
});
s.on("remove", function (e) {
  var el = document.getElementById(e.key);
  el.classList.remove("active");
});