- 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