Skip to content
This repository has been archived by the owner. It is now read-only.
Samir Zahran edited this page Jul 11, 2016 · 4 revisions
var video = new Whitewater(canvas, source [, options]);

Arguments

Argument Type Description
canvas element A reference to the <canvas> element that will serve as the player.
source string A path to the video source.
options object (optional) An object of key/value pairs containing player options.

Options

Option Type Default Description
loop bool false If set to true, the video will start over from the beginning when it reaches the end.
autoplay bool false If set to true, the video will automatically play once it's assets are loaded.
controls bool/element false When set to true, clicking on the <canvas> will play/pause the video. Optionally, controls can be set to an HTML element to use that element as the play/pause control.
speed float (between 0.0 and 1.0) 1.0 Allows you to slow the video down by the given amount (0.5 = half speed).

Checking Support

Whitewater.supported

A boolean value set to true if your browser supports Whitewater() and false otherwise.

if (Whitewater.supported) {
	// initialize a video
} else {
	// fallback to something else
}

Example

See more examples in action.

<canvas id="video"></canvas>
<div id="button"></div>

<script>
	var canvas = document.getElementById('video');
	var button = document.getElementById('button');
	var source = 'path/to/video/';
	var options = {
    	autoplay: true,
    	loop: true,
    	controls: button
	};

	var video = new Whitewater(canvas, source, options);
</script>

Whitewater Player
Initialization
Arguments
Options
Compatibility
Example Code

[Player API](Player API)
[Methods](Player API#methods)
[Properties](Player API#properties)

Canvas
Events
Attributes
Controlling Playback

Visit the homepage
Learn about the encoder

Clone this wiki locally
You can’t perform that action at this time.