Client-side services and display elements for the Flagship Media Library interface
npm install ayamel.jsClient-side services and display elements for the Flagship Media Library interface.
Scripts, purposes, and usage.
Table of Contents:
+ actor.js
+ annotator.js
+ async.js
+ Ayamel.js
+ ControlBar.js
+ ControlBarComponents.js
+ h5Clip.js
+ language_modules.js
+ h5Clip.js
+ MediaController.js
+ MediaControls.js
+ ProgressBar.js
+ swfobject.js
+ Text.js
+ textmenu.js
+ TimedMedia.js
+ UniformAspectRatio.js
+ video.js
+ VideoPlayer.js
+ ytClip.js
Dependencies:
+ Ayamel.js
``javascript`
Annotator.HTML(config, content);
Annotates HTML.
Parameter | Type | Description
--- | ---| ---
config | Object | Configuration. Not sure exactly what it needs/can contain.
content | DOM Element? | The content to annotate
*
`javascript`
Annotator.Text(config, content);
Annotates text.
Parameter | Type | Description
--- | ---| ---
config | Object | Configuration. Not sure exactly what it needs/can contain.
content | String? | The content to annotate
Dependencies:
+ None
Dependencies:
+ None
object. It also defines an AyamelElement which is used as the prototype for other elements. You'll never call just the Ayamel object, but one of the sub objects which each require a separate script to work properly. These include:
+ TimedMedia
+ VideoPlayer
+ Video
+ TextDependencies:
+ None
Used by:
+
actor.js
+
+
+
+
+
+ ControlBar.js
This is the control bar for media controller. This creates a graphical interface that can be used to control media playback. This is a customizable alternative to .Dependencies:
+
ProgressBar.js
+
+ jQueryUsed by:
+
You shouldn't ever need to call it, as it's called from
ControlBarComponents.js
This defines a bunch of components that can be added to the control bar. You shouldn't ever need to call this, as you can define the components through the video player.
Dependencies:
+ jQuery
Used by:
+
h5Clip.js
This script defines the video player installer which can be used to support HTML5 video.Dependencies:
+
+ To use the installer, do one of the following:
javascript
Ayamel.AddVideoPlayer(h5PlayerInstall, priority, callback);
Ayamel.InstallVideoPlayers([h5PlayerInstall, ...], callback)
`
For a description of these functions, see language_modules.js
Something to do with languages.Dependencies:
+ None
MediaController.js
As the name suggests, this is a controller for media. This connects the media player with the controls.
Dependencies:
+
+ or MediaControls.jsUsed by:
+
MediaControls.js
Provides a graphical interface for controlling media. Can use instead.Dependencies:
+ None
Used by:
+
MediaController.jsProgressBar.js
The progress bar used by the control bar.
Dependencies:
+ jQuery
Used by:
+
swfobject.js
Used to load flash objects onto the page.Dependencies:
+ None
Used by:
+
Text.js
Has to do with text somehow.Dependencies:
+
+ textmenu.js
A menu for text?Used by:
+
TimedMedia.js
An abstract layer for working with timed media (video, audio).Dependencies:
+
Used by:
+
UniformAspectRatio.js
This helps maniuplate DOM Elements such that a certain aspect ratio can be maintained.Dependencies:
+
Used by:
+
video.js
This adds video support. Provides video player installers.Dependencies:
+
It provides the following video player installers within the Ayamel namespace:
javascript
Ayamel.AddVideoPlayer(installer, priority, callback)
`Installs a video player.
Parameter | Type | Description
--- | ---| ---
installer | Player installer | The video player installer.
priority | integer | The priority of the player. The lower the number the more preferred the player
callback | function | A callback function
*
javascript
Ayamel.InstallVideoPlayers(installers, callback)
`
Installs multiple video players.
Parameter | Type | Description
--- | ---| ---
installers | Array of player installers | The list of video players to install. The order is the priority.
callback | function | A callback functionVideoPlayer.js
An interface for creating video players on the page.
Dependencies:
+
+
+ To create a video player, do the following:
javascript
var player = Ayamel.VideoPlayer(parameters);
`
Creates a video player on the page. is an object. The following are valid within it:Parameter | Type | Description | Required
--- | --- | --- | ---
aspectRatio | Number | The ratio of height to width on a scale of 100. 50 is a square. | Yes
components | Array of strings | The components to add to the player. | No
element | DOM Element | The element where the video player will be added. | Yes
resource | Resource | The video resource that will be played. | Yes
Valid components include:
+
play The play/pause button
+ volume The volume control
+ captions Caption track selection. For more information, see ControlBar.js
+ More coming soon!ytClip.js
This script defines the video player installer which can be used to support YouTube videos.
Dependencies:
+
+
+ To use the installer, do one of the following:
javascript
Ayamel.AddVideoPlayer(ytPlayerInstall, priority, callback);
Ayamel.InstallVideoPlayers([ytPlayerInstall, ...], callback)
`
For a description of these functions, see Setup
=====
1. Create a target element on the page
var target = document.getElementById("timeline");2. Create a timeline
The arguments are
* A DOM node into which to insert the timeline.
* A map of optional parameters, including:
* width: the width of the timeline display in pixels (defaults
to the offsetWidth of the target).
* length: the length of the timeline in seconds.
* start: the initial starting time of the viewing window.
* end: the initial ending time of the viewing window.
3. Create the cues and add them to the timeline
timeline.addTextTrack(TimedText.WebVTT.parse(vttdata), "track-id", "en");` // removetrack is fired whenever a text track is removed from the
// timeline and passes the removed track object to the listener
timeline.on('removetrack',function(track) {});
// select is fired whenever a segment is selected and passes the
// segment object (which includes the backing cue object) to the listener
timeline.on('select',function(seg) {
var cue = seg.cue;
....
});
// unselect is fired when the selection is terminated
timeline.on('unselect',function(seg) {});
// jump is fired whenever the timeline alters its current time internally;
// e.g., when a repeat point is hit or when the time marker is moved manually.
timeline.on('jump', function(time) {
controls.currentTime = time/1000;
});
// timeupdate is fired whenever the timeline's time marker is moved;
// e.g., when timeline.currentTime is set by external code
timeline.on('timeupdate', function(time) {});
// abRepeatEnabled is fired whenever the AB repeat functionality is turned on
timeline.on('abRepeatEnabled',function() {});
// update is fired whenever the contents of a segment change
timeline.on('update', function(seg) {});