API Docs
HypervideoController Module
I am the HypervideoController.
I am the central controller module of the application. I control the interactions between the UI elements of the hypervideo and its data model.
My two most important jobs are:
- I init the video element, all its UI controls, and my sub-controllers (for annotations, overlays, videolinks)
- I control the playback und the update handlers to show time-based contents
Item Index
Methods
Attributes
Methods
_pause
()
private
After playback has paused, we need to do several things:
- Clear the interval functions (highPriorityUpdater and highPriorityInterval; if necessary: nullVideoUpdater)
- Change pause button back into play button
- Tell the OverlaysController to synchronize media
_play
()
private
After playback has started, we need to do several things:
- Register interval functions (highPriorityUpdater and highPriorityInterval; if necessary: nullVideoUpdater)
- Change play button into a pause button
- Tell the OverlaysController to synchronize media.
clearIntervals
()
private
Cancel all currently running intervals
formatTime
-
aNumber
I take a number, which represents a time in seconds, and return a formatted string like HH:MM:SS
Parameters:
-
aNumberNumber
Returns:
String
highPriorityUpdater_HTML5
()
private
I am the high priority update function, when there is a HTML5 video element present.
I am called from the browser runtime environment via its window.setInterval mechanism. The interval is defined in the {{#crossLink "HypervideoController/_play:method"}}_play method{{/crossLink}}, and the interval length is set to 40 milliseconds.
I fetch the currentTime attribute from the video element and store it in {{#crossLink "HypervideoController/currentTime:attribute"}}.
I update the slider position of the progress bar.
highPriorityUpdater_NullVideo
()
private
I am the high priority update function, when there is no HTML5 video element ("Null Player").
I am called from the browser runtime environment via its window.setInterval mechanism. The interval is defined in the _play method, and the interval length is set to 40 milliseconds.
I update the slider position of the progress bar.
initController
-
callback -
failCallback -
update
I initialize the Controller.
I check, wether there are playable video source files, and append the right <source> nodes to the video element. Otherwise I prepare the "Null Player", meaning a simulated playback machine, which serves as a timer for update functions.
After the video has sufficiently loaded (or the "Null Player" is ready), I initalize the UI control (play button and progress bar).
initPlayButton
()
private
I init the UI of the play button and connect it with the play/pause functions.
initProgressBar
()
private
I initialize the UI elements of the progress bar.
This depends on the duration of the video already being known.
I make the DOM element a jQuery UI Slider, and attach its event listeners.
initVideo
-
callback -
failCallback
I delay the execution of callback until enough data from the video source file has loaded.
readyState == 0 means, that metadata is loaded. This is needed to know the duration of the video.
lowPriorityUpdater_HTML5
()
private
I am the low priority update function, when there is a HTML5 video element present.
I am called from the browser runtime environment via its window.setInterval mechanism. The interval is defined in the _play method, and the interval length is set to 180 milliseconds.
I perform the following tasks:
- Display the currentTime in the UI (numeric display in progress bar)
- Call all sub-controllers (OverlaysController, VideosController, AnnotationsController), to update the state for which they are responsible for.
lowPriorityUpdater_NullVideo
()
private
I am the low priority update function, when there is no HTML5 video element ("Null Player").
I am called from the browser runtime environment via its window.setInterval mechanism. The interval is defined in the _play method, and the interval length is set to 180 milliseconds.
I perform the following tasks:
- Display the currentTime in the UI (numeric display in progress bar)
- Call all sub-controllers (OverlaysController, VideosController, AnnotationsController), to update the state for which they are responsible for.
nullVideoUpdater
()
private
I am the update function of the "Null Player", which sets the {{#crossLink "HypervideoController/currentTime:attribute"}}.
When the currentTime reaches the duration of the null video, I stop playback.
pause
()
I pause the playback of the hypervideo.
When there is a HTML5 video present, i call its .pause() method, which in turn triggers the "pause" event of the <video> element; The _pause() method is set as event handler for the pause event.
When there is no HTML5 video ("null player") I directly call the _pause() method.
play
()
I am the function, which starts the playback of the hypervideo.
When there is a HTML5 video present, i simply call its .play() method, which in turn triggers the "play" event of the <video> element; The _play() method is set as event handler for this event.
When there is no HTML5 video ("Null player"), then I do two things:
- I check if the currentTime reached the end of the "null video", and reset it to 0 if necessary.
- I store the computer's current system clock time in the module var nullVideoStartDate (from this number the nullVideoUpdater()) can calculate the new currentTime.
setCurrentTime
-
aNumber
The HypervideoController stores the currentTime. When this property is being set, several things have to happen:
- The currentTime of the <video> element has to be updated...
- or – when there is no video source file – the nullVideoStartDate has to be updated
- The update functions have to be called (highPriorityUpdater and lowPriorityUpdater)
- The OverlaysController has to synchronize media
Parameters:
-
aNumberNumber
Returns:
Number
setMuted
-
muted
The HypervideoController stores the muted. When this property is being set, the muted attribute of the <video> element has to be updated (only when there is a video source file)
Parameters:
-
mutedBoolean
Returns:
muted
updateDescriptions
()
I update the descriptions of the hypervideo and of the current project, which is shown in the UI in the Sidebar
Attributes
currentTime
This attributes stores the currentTime of the hypervideo.
When this attribute is being read, it returns the value, which was automatically updated by highPriorityUpdater_HTML5() or respectively nullVideoUpdater().
When the attribute is being set, like this:
FrameTrail.module('HypervideoController').currentTime = 3then the setCurrentTime() is called.
muted
These attributes store the muted state of the hypervideo.
The muted state is set like this:
FrameTrail.module('HypervideoController').muted = truethen the setMuted() is called.