An easy way to control Vimeo videos using standard jQuery event structure and methods.
You can check out the entire repo, or download the latest release below:
jQuery Vimeo API v0.10.1 (zip)
jQuery Vimeo API v0.10.1 (tar.gz)
Make sure to include this plugin's .js file after jQuery library. Use the minified version in dist folder for best performance.
This plugin works with iframe Vimeo embeds only. You can target the iframe using any normal jQuery CSS conventions, but often it's easier to put an id attribute on the iframe to target it specifically.
<script src="//code.jquery.com/jquery-latest.min.js"></script>
<script src="dist/jquery.vimeo.api.min.js"></script>
<!-- Vimeo embed code with custom id attribute added -->
<iframe id="myvideo" src="//player.vimeo.com/video/77889659" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<script>
//use jquery document ready function
$(document).ready(function($) {
$("#myvideo").vimeo("play");
});
</script>For multiple videos, it is recommended to include a query string to the end of the URL of your video with the variables api=1, and player_id=[unique_name] for each video, like so:
<iframe src="//player.vimeo.com/video/00000?&api=1&player_id=vid1" ... </iframe>
Because of a peculiarity with the way Vimeo sends messages, it's impossible to tell which API messages we receive from Vimeo belong to any specific video on the page. The solution for this is to identify each video by appending a special query string identifier to each video's URL.
For convenience (and for CMS plugins) this plugin is designed to work without doing this; it will automatically append generic ids to the query strings of the Vimeo embeds on the page. But in doing so, there will be a brief reloading of the video at page load when it changes the src attribute. In order to prevent this, you should manually add your own.
For methods, you can call API immediately with one argument as a string. For methods which take additional information
$("#myvideo").vimeo("play");
$("#myvideo").vimeo("seekTo", 5); //seeks to five seconds$("#myvideo").vimeo("play");Plays videos as soon as this is called. Note for time sensitive presentations: this will wait until the video is ready and receives a ready message from Vimeo, so there might be a slight delay if playing right when the page loads.
$("#myvideo").vimeo("pause");Will pause video at it's current location.
$("#myvideo").vimeo("unload");Equivalent to stop or rewind, as it reverts player back to original state.
$("#myvideo").vimeo("setVolume", 0.5);Sets the volume of the video as a percentage from 0 to 1.
$("#myvideo").vimeo("setLoop", true);Set looping to boolean value.
$("#myvideo").vimeo("seekTo", 5);Seeks to specified number of seconds. (Does not work on mobile)
$("#myvideo").vimeo("setColor", "#333333");Sets color of player to hex value as a string.
These are methods which return information about video. Because we need to contact Vimeo for information about the status of the video, the second argument needs to be a callback function. This also means, these calls will be asynchronous, and there might be a small delay.
$("#myvideo").vimeo("paused", function(data){
console.log( "Is paused?", data );
})Returns boolean showing whether video is paused.
$("#myvideo").vimeo("getCurrentTime", function(data){
console.log( "Current time", data );
})Returns current play time as seconds. This is a one time return. For continous updates, use playProgress event.
$("#myvideo").vimeo("getDuration", function(data){
console.log( "Video length", data );
})Return total duration of video in seconds.
$("#myvideo").vimeo("getVolume", function(data){
console.log( "Volume is", data );
})Return volume in seconds
$("#myvideo").vimeo("getVideoHeight", function(data){
console.log( "Height", data );
})
$("#myvideo").vimeo("getVideoWidth", function(data){
console.log( "Width", data );
})Height or width as number.
$("#myvideo").vimeo("getVideoUrl", function(data){
console.log( "Video URL", data );
})Get the url to the video itself as a string. (not the Vimeo page, but the actual video embed)
$("#myvideo").vimeo("getColor", function(data){
console.log( "Player color", data );
})Color as string.
This plugin uses the standard jQuery notation for calling events.
These will trigger when they happen. As with any event, you need to include a function callback.
###play
$("#myvideo").on("play", function(){
console.log( "Video is playing" );
});Fires whenever the video is played.
###pause
$("#myvideo").on("pause", function(){
console.log( "Video is paused" );
});Fires whenever the video is paused.
###finish
$("#myvideo").on("finish", function(){
console.log( "Video is done playing" );
});Fires whenever the video is finished.
###loadProgress
$("#myvideo").on("loadProgress", function(event, data){
console.log( data );
});
//{
// "percent" : "0.326",
// "bytesLoaded" : "32159909",
// "bytesTotal" : "98650027",
// "duration" : "365.507"
//}This will continuously return info as video is loading.
###playProgress
$("#myvideo").on("playProgress", function(event, data){
console.log( data );
});
//{
// "seconds" : "4.308",
// "percent" : "0.012",
// "duration" : "359.000"
//}This will continuously return info as video is playing.
###seek
$("#myvideo").on("seek", function(event, data){
console.log( data );
});
//{
// "seconds" : "192.622",
// "percent" : "0.527",
// "duration" : "365.507"
//}This will continuously return info as video is seeking.
This plugin supports chaining any of the above items.
$("#myvideo").vimeo("play")
.vimeo("getVolume", function(d){ console.log("volume", d); })
.vimeo("setVolume", 0.5)
.vimeo("getVolume", function(d){ console.log("new volume", d); })
.on("pause", function(){ console.log("paused"); })Released under the MIT license
- 2015-06-01 v0.10.1 Force https always. API calls don't seem to work over http
- 2015-04-14 v0.10.0 Support for multiple videos automatically.
- 2015-03-09 v0.9.3 Fixed playProgress and loadProgress events due to capitalization issue.
- 2015-02-20 v0.9.2 Fixed Bower package, so it only installs js files.
- 2015-02-20 v0.9.1 Added package controls for bower, npm, and Grunt tasks.
- 2015-02-06 v0.9.0 Fixed window.location.protocol, which was missing a colon.
- 2014-12-25 v0.8.9 Fixed issue with Firefox, which didn't recognize hasOwnProperty. Used for...in instead.