vimeo-js-api

A wrapper for Vimeo Javascript API
Based on Vimeo's Froogaloop API

Example

Embed the video to your page:

<iframe id="myplayer" src="//player.vimeo.com/video/VIDEO_ID?player_id=myplayer&api=1" width="100%" height="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

Do not forget api=1 and to set the right iframe id on player_id=myplayer
For more info about embeding, see vimeo's embeding page

var api=$f('myplayer'); //or new Vimeo('myplayer') 

Usage

instantiate via element

var element=document.getElementById('myVimeoIframe');
var api=$f(element);
//alias of
var api=new Vimeo(element);

or via iframe id

var api=$f('myVimeoIframe');
//alias of
var api=new Vimeo('myVimeoIframe');

Troubleshooting

• ready event firing more than once Be sure that the embed code url contains the player ID

Methods

Example of use:

var myVideo=$f('myVimeoIframeID');
myVideo.play();
//alias of
myVideo.api('play');

Using arguments:

var myVideo=$f(document.getElementById('playerID'));
//from the start, 0 seconds
myVideo.seekTo(0);
//alias of
myVideo.api('seekTo',0);

• play play the video

api.play();//Rock'n roll

• pause pause the video

api.pause();//Tired of the video? Pause it

• unload stop the video

api.unload();//ok, video has stopped, go do something else

• stop alias of unload

api.stop();//put it to end

• seekTo Float set video current time (in seconds)

api.seekTo(12);//Bored? put the video in a cooler part

• setVolume Float set video volume from (muted) 0 to 1 (max)

api.setVolume(0.9);//as loud as you want

• setLoop Boolean set video to loop or not

api.setLoop(true);//video will now play forever

• setColor String set player color

api.setColor('000000');//and I want to paint it black

• paused Boolean get wheter the video is paused or not

api.paused(function(isPaused, playerID){
 console.log(playerID+' is '+(isPaused ? 'paused' : 'playing'));
});

• getCurrentTime Integer get video current time in seconds

api.getCurrentTime(function(currentTime, playerID){
 console.log(playerID+' is at '+currentTime+' seconds');
});

• getDuration Integer get video duration in seconds

api.getDuration(function(duration, playerID){
 console.log(playerID+' has the duration of '+duration+' seconds');
});

• getVideoWidth Integer get video current width

api.getVideoWidth(function(width, playerID){
 console.log(playerID+' has width '+width);
});

• getVideoHeight Integer get video current height

api.getVideoHeight(function(height, playerID){
 console.log(playerID+' has height '+height);
});

• getVideoUrl String get video current url

api.getVideoUrl(function(videoUrl, playerID){
 console.log(playerID+' has the video '+videoUrl);
});

• getVideoEmbedCode String get video embed code

api.getVideoEmbedCode(function(videoEmbedCode, playerID){
 window.prompt('To share the video, paste this code in your website:',videoEmbedCode);
});

• getVolume Float get video current height

api.getVolume(function(volume, playerID){
 console.log(playerID+' current volume is '+volume);
});

• getLoop

api.getLoop(function(isLoop, playerID){
 console.log('Is '+playerID+' in loop?',isLoop ? 'yes' : 'no');
});

• getColor

api.getColor(function(color, playerID){
 console.log(playerID+' current color is '+color);
});

All methods return the api instance, so you could use like:

api.pause().seekTo(10).play();

Events

Example of use:

var myVideo=$f('myVimeoIframeID');
myVideo.onPlay();
//alias of
myVideo.addEvent('play',function(event){
  console.log('Ok, we are live!');
});

• ready Trigger once the video is ready to play

api.onPause(function(event) {
  console.log('Video is now ready to play ... rock\'n roll!',event);
});
//alias of
api.addEvent('ready',weAreReadyCallback);
api.removeEvent('ready');

• play Trigger whenever the user or you via api play the video

api.onPlay(function(event) {
  console.log('Video is now playing  ... enjoy!',event);
});
//alias of
api.addEvent('play',doSomethingWhenPlay);
api.removeEvent('pause');

• pause Trigger whenever the user or you via api pause the video

api.onPause(function(event) {
  console.log('Video is pause ... take a break!',event);
});
//alias of
api.addEvent('pause',doSomethingWhenPauseFunction);
api.removeEvent('pause');

• finish Trigger when video ends

api.onFinish(function(event) {
  console.log('Video ended ... what should we do now?',event);
});
//alias of
api.addEvent('finish',onFinishCallback);
api.removeEvent('finish');

• seek Object {seconds: Float, duration: Float, percent: Float} Trigger when seek has changed.

api.onSeek(function(event) {
  console.log(
    'video changed position to play at '+event.seconds+' seconds of '+event.duration+' total', 
    'it is now at '+(event.percent*100)+'%'
  );
});
//alias of
api.addEvent('playProgress',onPlayProgressCallback)
api.removeEvent('playProgress');

• playProgress Object {seconds: Float, duration: Float, percent: Float} Trigger while playing, a few times per second.

api.onPlayProgress(function(event) {
  console.log(
    'video is playing at '+event.seconds+' seconds of '+event.duration+' total', 
    (event.percent*100)+'% already played'
  );
});
//alias of
api.addEvent('playProgress',onPlayProgressCallback)
api.removeEvent('playProgress');

• loadProgress Object {bytesTotal: Float, bytesTotal: Float, duration: Float, percent: Float} Trigger while loading, a few times per second.

api.onLoadProgress(function(event) {
  console.log(
    'video loaded '+event.percent+'%', 
    event.bytesLoaded+' bytes loaded of '+event.bytesTotal+' total', //or -1 if not avaliable
    'Video duration is  '+event.duration+' seconds'
  );
});
//alias of
api.addEvent('loadProgress',onLoadProgressCallback);
api.removeEvent('loadProgress');

LICENCE

MIT

To be clear, I'm not affiliated with Vimeo in any way