HTML5 video canvas player. Prevents video fullscreen on iPhone/iPad.
How to use
Just create div where canvas or video element will be inserted.
Optionally you can add attribute with params.
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
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
