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]);


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.


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


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


See more examples in action.

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

	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);

Whitewater Player
Example Code

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

Controlling Playback

Visit the homepage
Learn about the encoder

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