- From: Francois Daoust <fd@w3.org>
- Date: Thu, 18 Jun 2015 14:03:43 +0200
- To: public-webtiming@w3.org
Hi,
Pursing my exploration of synchronization concepts and interfaces that
could help Web developers who, like me, are not experts in
synchronization issues, I implemented a first version of a "Sequencer"
class to coordinate the playback of one or more media elements with a
timing object.
Ingar, I don't know if my sequencer matches what you had in mind with
the HTMLMediaSequencer. If not, I'll just rename to something along the
lines of "TimingObjectController".
The source code is in the same Git repo as before, on GitHub:
https://github.com/tidoust/timingservice
The Sequencer class is defined in:
https://github.com/tidoust/timingservice/blob/master/src/Sequencer.js
From a Web developer perspective, the code needed to use a sequencer
associated with a timing object that is in turn associated with an
online timing service through some "SocketTimingProvider" class would
look like:
=====
// Create the timing object
// (SocketTimingProvider provided by the online timing service)
var timingProvider = new SocketTimingProvider('ws://...');
var timing = new TimingObject();
timing.srcObject = timingProvider;
// Create the sequencer that takes input from the timing object
var sequencer = new Sequencer(timing);
// Add video to the slaved media elements of a sequencer
var video = document.getElementById('myvideo');
sequencer.addMediaElement(video);
// Attach video controls to the sequencer
playButton.onclick = function () { sequencer.play(); };
pauseButton.onclick = function () { sequencer.pause(); };
=====
The interface exposed by the Sequencer is voluntarily close to that of a
MediaController (play, pause, currentTime, playbackRate). If browsers
start implementing something similar, it would probably make sense to
replace the call to "addMediaElement" with a more familiar
"video.controller = sequencer;" and perhaps attach the video controls to
the sequencer automatically under the hoods.
It is "close to" but not exactly the same as the MediaController
interface. In particular, the "readyState" attribute of the sequencer
currently represents the state of the timing object, not that of the
media elements. I'm not sure how to handle the whole part about
buffering for the time being. This does not map well with the timing
object approach.
Check the "How to use" section in the README of the Git repo to try out
a concrete example in your browser. The result depends on the browser
and platform you will be using. It is somewhat good with video, less so
with audio.
This "so-so" outcome is due to the low-quality of this implementation
(in other words, I do not doubt that one can do much better), but some
of it is probably also due to the fact that controlling a video
externally by adjusting its playback rate is inherently not very efficient.
Thanks,
Francois.
PS: I also improved the clock synchronization mechanism. The whole code
should still be regarded as "rough", though ;)
Received on Thursday, 18 June 2015 12:04:48 UTC