Ayamel.js

Client-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

actor.js

Um... I'm not sure how this fits in.

Dependencies:

• Ayamel.js

annotator.js

Used for annotating stuff. You can call it with one of the following:

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

---

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

async.js

Don't know.

Dependencies:

• None

Ayamel.js

This is the starting point of the Ayamel scripts. This defines a namespace contained within the Ayamel 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
• Text

Dependencies:

• None

Used by:

• actor.js
• MediaController.js
• Text.js
• TimedMedia.js
• UniformAspectRatio.js
• video.js
• VideoPlayer.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 MediaControls.js.

Dependencies:

• ProgressBar.js
• ControlBarComponents.js
• jQuery

Used by:

• MediaController.js

You shouldn't ever need to call it, as it's called from MediaController.js

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:

• ControlBar.js

h5Clip.js

This script defines the video player installer which can be used to support HTML5 video.

Dependencies:

• Ayamel.js
• video.js

To use the installer, do one of the following:

Ayamel.AddVideoPlayer(h5PlayerInstall, priority, callback);
Ayamel.InstallVideoPlayers([h5PlayerInstall, ...], callback)

For a description of these functions, see video.js

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:

• Ayamel.js
• ControlBar.js or MediaControls.js

Used by:

• VideoPlayer.js

MediaControls.js

Provides a graphical interface for controlling media. Can use ControlBar.js instead.

Dependencies:

• None

Used by:

• MediaController.js

ProgressBar.js

The progress bar used by the control bar.

Dependencies:

• jQuery

Used by:

• ControlBar.js

swfobject.js

Used to load flash objects onto the page.

Dependencies:

• None

Used by:

• ytClip.js

Text.js

Has to do with text somehow.

Dependencies:

• Ayamel.js
• TextMenu.js

textmenu.js

A menu for text?

Used by:

• TextMenu.js

TimedMedia.js

An abstract layer for working with timed media (video, audio).

Dependencies:

• Ayamel.js

Used by:

• video.js

UniformAspectRatio.js

This helps maniuplate DOM Elements such that a certain aspect ratio can be maintained.

Dependencies:

• Ayamel.js

Used by:

• VideoPlayer.js

video.js

This adds video support. Provides video player installers.

Dependencies:

• TimedMedia.js

It provides the following video player installers within the Ayamel namespace:

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

---

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 function

VideoPlayer.js

An interface for creating video players on the page.

Dependencies:

• Ayamel.js
• MediaController.js
• UniformAspectRatio.js

To create a video player, do the following:

var player = Ayamel.VideoPlayer(parameters);

Creates a video player on the page.

parameters 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:

• Ayamel.js
• swfobject.js
• video.js

To use the installer, do one of the following:

Ayamel.AddVideoPlayer(ytPlayerInstall, priority, callback);
Ayamel.InstallVideoPlayers([ytPlayerInstall, ...], callback)

For a description of these functions, see video.js

Setup

1. Create a target element on the page
   <div id="timeline"></div>
var target = document.getElementById("timeline");

2. Create a timeline
   var timeline = new Timeline(target, {});
   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");
   The arguments are

   • An array of Cue objects or a TextTrack object
   • A track name
   • Language

4. Add event handlers

   // addtrack is fired whenever a text track is added to the timeline
   // and passes the added track object to the listener
   timeline.on('addtrack',function(track) {});
   
   // 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) {});