CwVideo – Help

About / Feedback • Demo • Help / Download

Requirements

  • Works in Safari 3+, Firefox 3+, Chrome 3+, Opera 10.5+
  • Requires mootools 1.24+ Core and Fx.Slider (1.24+ More)

Download

Download at Mootools Forge »

Comments? Problems? Feedback? Leave a comment »

GitHub Repository: github.com/mariofischer/cwvideo »

⇧ top

Documentation

What is this plugin about?

First at all it extends the current (1.24) mootools release to handle the new HTML5 video-tag. So you can easily access a videos properties and control the video in a mootools-like way.

Furthermore it contains two extensions to the Fx.Slider class from mootools:
CwVideo.Volumeslider creates a volume slider
CwVideo.Timeline for a timeline slider with several features to simplify creating your own video controls.

CwVideo

Given a HTML-page with a video embedded, you simply call CwVideo(id) with the id of the video tag. Then you can immediately access the properties of the video like duration, volume etc. These properties can be accessed via mootools:

Initial setup and usage
myvideo = new CwVideo('myvid'); // initialize CwVideo

// video controls shown?
if (myvideo.video.get('controls')) { ... }

// get and set volume
set myvol = myvideo.video.get('volume');
myvideo.video.set('volume', 0.5);
CwVideo – Documentation

Use myvideo.video to access the HTML-video element and following methods and events:

Parameters
  • element: ID of the HTML video element
Methods
  • rewind: function(): Rewind video to beginning
  • move: function(secs): Move playback forward or backward given amount (positive or negative numbers)
  • play: function(): Play video
  • pause: function(): Pause video
  • stop: function(): Stop playback and rewind
  • togglePlay: function(): Play/Pause video toggle
  • toggleMute: function(): Toggle “muted” state
  • volumeChange: function(amt): Change volume by positive or negative values (volume is from 0.0 to 1.0)
  • getNetworkState: function(): Get current network state as string
  • getReadyState: function(): Get current ready state as string
Events
  • onPlaybackHasChanged: function(el, value) – Triggered if playback has changed (play, pause, loadstart)

CwVideo.Timeline

This is an extension of Fx.Slider, usage example:

var timeSlider1 = new CwVideo.Timeline('timeSliderBg', 'timeSlider', {
    wheel: true,
    video: 'myvid',
    timeDisplay: 'timeSlider'
});
Parameters
  • element: ID of the enclosing slider element
  • knob: ID of the knob
  • options: Options to use
Options

All options from Fx.Slider PLUS the following:

  • video: false ID of the video element
  • timeDisplay: false ID of the element where the current time shall be displayed
  • timeAsPercent: false If true: display time as percent (instead of mm.s)
  • timeDisplayDisabled: — Text to show in the time display, if current time is not available.
Events

All events from Fx.Slider PLUS the following:

  • onChange: function(position) – Triggered each time the sliders position has changed
  • onError: function(error) – Triggered if an error has occured

CwVideo.Volumeslider

This is an extension of Fx.Slider, usage example:

var volSlider1 = new CwVideo.Volumeslider('volSliderBg', 'volSlider', {
    initialVolume: 0.2,
    range: [0, 10],
    mode: 'vertical',
    snap: true,
    steps: 10,
    video: 'myvid'
});
Parameters
  • element: ID of the enclosing slider element
  • knob: ID of the knob
  • options: Options to use
Options

All options from Fx.Slider PLUS the following:

  • video: false ID of the video element
  • initialVolume: false If set, the videos volume is initially set to the given value (0.0 – 1.0)
Events

All events from Fx.Slider PLUS the following:

  • onChange: function(position) – Triggered each time the sliders position has changed
  • onError: function(error) – Triggered if an error has occured