Features

This library is in its early stages of developement. Currently supported:

• All styling is done through external CSS. See the DOM section to see the generated DOM structure. If you want to exclude certain elements from the interface, simply display: none; them in your style sheet.
• Standard interface features:
  • Play, pause, stop;
  • Advanced volume control, mimicking that of YouTube's player. One deviation: un-muting while volume is truly at 0, sets the volume to .5 (seems sane) instead of simply not doing anything.
  • Progress: seeking, current time, total duration.
• Additional interface features:
  • Play button on initial load;
  • Buffering message when buffering (has issues);
  • Replay button on video end if looping is off and there is no playlist provided;
  • Cursor-tracking stream time indicator on progress bar. (Does this have a name? It should :-);
  • Previous/next buttons if playlist provided.
• Other features:
  • Playlist support;
  • Captions support, including language selection;
  • Settings panel for enabling or disabling various options such as looping, captions and auto-hiding of controls bar.
• Debug mode: real-time information panel.

Instantiation

Moovie(items, options)

items

Array or Collection, required. Each item must be either a video element reference or an object. If the item is an object, advanced functionality can be invoked — following is a list of properties the object takes:

items: [ { video, id, options }, … ]

video

Element, required. A reference to a video element.

id

String, optional. An identifier for the video that is initially loaded in the video element. Required for captions support.

options

Object, optional. An options object. Options provided here override any generic options set in the second argument of the Moovie constructor. See below for possible options.

options

Object, optional. An options object. The following options are available:

options: { … }

title

String, optional. Defaults to the empty string. The title for the video. Used to overlay the title of the video for a short time when playback starts, and as the identifier for the video in the playlist. Should be supplied even when not providing a playlist. May contain HTML.

autohideControls

Boolean, optional. Defaults to true. Specifies whether or not to auto-hide the controls bar when the pointer is not over the video element.

playlist

Array, optional. Defaults to null. Allows you to specify a playlist. For more information, see the section on playlists.

captions

Object, optional. Defaults to null. Is used internally and should generally be left alone. For details on how to provide captions, see the section on captions.

captionLang

String, optional. Defaults to "en". Used to set the initial language for captions display.

showCaptions

Boolean, optional. Defaults to true. Used to enable or disable display of captions. Set to false to provide captions, but initially have them turned off. The user can enable them through the “Settings” panel.

debug

Boolean, optional. Defaults to false. Specifies whether or not to enable the debugging features.

Example of method one:

var items   = $$('video'); var options = { debug: true, autohideControls: false }; Moovie(items, options);

Example of method two:

var options = { autohideControls: false }; // Generic options var items   = [   { video: $('video-1'), id: 'my-video', options: { debug: true } },   { video: $('video-2') },   { video: $('video-3'), options: { autohideControls: true } } // Option overrides setting from generic options object ]; Moovie(items, options);

You can also mix the two methods.

A single video element must still be passed as an array or collection. $$('video') will do just fine for that, even if it only contains one element. If you have a reference to a single element, just pass it as Moovie([$('video-1')]); or Moovie([refToElement]); or whatever :-)

Playlists

The playlist array takes any number of objects, where each object represents one additional video source. When a playlist is provided, the controls bar will feature “previous” and “next” buttons, and the playlist panel is populated with the provided entries. When a video ends, the next video is started automatically. You do not have to specify the initial video that is loaded for the video element as it is added automatically. Each object takes the following properties:

playlist: [ { id, src, title }, … ]

id

String, optional. An identifier for the video. Required for captions support.

src

String, required. The URI at which the video can be found.

title

String, optional. Defaults to the empty string. The title for the video. Used to overlay the title of the video for a short time when playback starts, and as the identifier for the video in the playlist. Should always be supplied. May contain HTML.

Captions

For each video (including playlist entries), captions can be provided. Each video can have any number of caption “streams”, one for each language. Captions are matched to videos by their ids. A static method is provided to make supplying captions easy: you can store the captions in an external JavaScript file and call the method from there. At any rate: make sure any calls you make to this method are done after the declaration of the Moovie object :-) Syntax is as follows:

Moovie.registerCaptions(id, captions)

id

String, required. Used to match the captions against a video source (or more specifically, the provided id).

captions

Object, required. An object, where each property name should be a language identifier, such as “en” for English. You can add additional language definitions to the Moovie.languages object, in Moovie.js — this is used for the captions language selection interface. The value of each property should be an array of objects, where each object represents one set of captions. Each object takes the following properties:

captions: { language: [ { start, end, text }, … ], … }

start

Number, required. The start time of the set of captions, in milliseconds.

end

Number, required. The end time of the set of captions, in milliseconds.

text

String, required. The captions. May contain HTML.

DOM structure

To be filled in later: the generated DOM structure.

License

Moovie is licensed under the MIT license.

Download