jQuery Plugin For Easy Vimeo Video Controller Vimeo API js - Download jQuery Plugin For Easy Vimeo Video Controller - Vimeo.API.js

Download jQuery Plugin For Easy Vimeo Video Controller – Vimeo.API.js

By Posted on

This time I will share jQuery Plugin and tutorial about jQuery Plugin For Easy Vimeo Video Controller – Vimeo.API.js, hope it will help you in programming stack.

jQuery Plugin For Easy Vimeo Video Controller Vimeo API js - Download jQuery Plugin For Easy Vimeo Video Controller - Vimeo.API.js
File Size: 16.4 KB
Views Total: 5741
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

Vimeo.API.js is a lightweight jQuery wrapper around the Vimoe video API which allows you to control Vimeo videos embedded in your webpage with custom jQuery methods and events.

Basic usage:

1. Make sure both the jQuery vimeo.api.js and jQuery library are included.

view source
1 <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
2 <script src="src/jquery.vimeo.api.js"></script>

2. Embed an iframe Vimoe player into your web page.

view source
1 <iframe src="https://player.vimeo.com/video/128947850" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

3. Available API methods to control the Vimeo video.

view source
01 // play the video
02 $("iframe").vimeo("play");
03  
04 // pause the video
05 $("iframe").vimeo("pause");
06  
07 // jump to a defined position (seconds) in the video
08 $("iframe").vimeo("seekTo", 10);
09  
10 // set the volume
11 $("iframe").vimeo("setVolume", 0.6);
12  
13 // enable looping
14 $("iframe").vimeo("setLoop", true);
15  
16 // set the color
17 $("iframe").vimeo("setColor", "#666");
18  
19 // unload the plugin
20 $("iframe").vimeo("unload");

4. Get the return information about the vidoe.

view source
01 // whether video is paused
02 // return true or false
03 $("iframe").vimeo("paused", function(data){ 
04   console.log( "Is paused?", data );
05 })
06  
07 // get current position (time)
08 $("iframe").vimeo("getCurrentTime", function(data){
09   console.log( "Current time", data );
10 })
11  
12 // get total duration in seconds
13 $("iframe").vimeo("getDuration", function(data){
14   console.log( "Video length", data );
15 })
16  
17 // get volume in percentage
18 $("iframe").vimeo("getVolume", function(data){
19   console.log( "Volume is", data );
20 })
21  
22 // get video's height
23 $("iframe").vimeo("getVideoHeight", function(data){
24   console.log( "Height", data );
25 })
26  
27 // get video's width
28 $("iframe").vimeo("getVideoWidth", function(data){
29   console.log( "Width", data );
30 })
31  
32 // get video's URL
33 $("iframe").vimeo("getVideoUrl", function(data){
34   console.log( "Video URL", data );
35 })
36  
37 // get video's color
38 $("iframe").vimeo("getColor", function(data){
39   console.log( "Player color", data );
40 })

5. Events.

view source
01 // fired when the video is playing
02 $("iframe").on("play", function(){
03   console.log( "Video is playing" );
04 });
05  
06 // fired when the video is paused
07 $("iframe").on("pause", function(){
08   console.log( "Video is paused" );
09 });
10  
11 // fired when the video is finished
12 $("iframe").on("finish", function(){
13   console.log( "Video is done playing" );
14 });
15  
16 // return information as video is playing
17 $("iframe").on("playProgress", function(event, data){
18   console.log( data );
19 });
20  
21 // return information as video is seeking.
22 $("iframe").on("seek", function(event, data){
23   console.log( data );
24 });

6. Mixing methods and events.

view source
1 $("iframe").vimeo("play")
2   .vimeo("getVolume", function(d){ console.log("volume", d); })
3   .vimeo("setVolume", 0.6)
4   .vimeo("getVolume", function(d){ console.log("new volume", d); })
5   .on("pause", function(){ console.log("paused"); })

This awesome jQuery plugin is developed by jrue. For more Advanced Usages, please check the demo page or visit the official website.

source : jqueryscript.net

Related posts: