stVideo

HTML5 video canvas player. Prevents video fullscreen on iPhone/iPad.

SEE DEMO

How to use

Just create div where canvas or video element will be inserted. Optionally you can add attribute with params.

<div id="player" data-stvideo="{'mp4': 'filename.mp4', 'webm': 'filename.webm', 'width': 524, 'height': 270}"></div>

Then create new object.

var video = new stVideo( '#player' );

Or create new object with params, if you not added them to HTML element.

var video = new stVideo( '#player', {
  "mp4"   : "filename.mp4",  //recommended
  "webm"  : "filename.webm",  //recommended
  "ogg"   : "filename.ogg",
  "width" : 524,  //required
  "height": 270,  //required
  "force" : "",  //'video' or 'canvas',
  "framesPerSecond": 30,  //needed for canvas refresh, default 30
  "volume": 1  //default
} );

Look at the table below, and best use .mp4 and .webm video files format.

	.mp4	.webm	.ogg
Android	X		X
iPhone	X
Firefox		X	X
Chrome		X	X
Safari	X
IE >= 9	X
IE Mobile	X

At the end, you can play video immediately after initialization.

video.on( 'canplaythrough', function() {
	video.play();
} );

You can attach other events from list http://www.w3.org/TR/html5/embedded-content-0.html#mediaevents but some of them may not work properly with canvas video for ex. "volumechange".

Examples:

video.on( 'play', function() {
    console.log( 'play' );
} );

video.on( 'pause', function() {
    console.log( 'pause' );
} );

video.on( 'end', function() {
    console.log( 'end' );
} );

Events

video.play(); //play video

video.pause(); //pause video

video.on( 'name', function(){} ); //for attach event

video.destroy(); //not working - future function to remove player