cialis online canada

Over a past while I have noticed that I want to start integrating Vimeo players on websites and provide full functionality based on various circumstances. Vimeo has an API open to the public – http://vimeo.com/api/docs/player.

Now I find that the Vimeo API, quite challenging to use and I figured that writing a wrapper class would make my life much easier. I found working directly with the Vimeo Moogaloop Flash player much easier to work with and directly called methods to the Moogaloop Flash Player.

You can download my class here. Vimeo Class. SWFobject is also required and can be downloaded here: http://code.google.com/p/swfobject/downloads/list

Implementing my Vimeo class is quite easy

<script type="text/javascript" src="swfobject.js">
<script type="text/javascript" src="Vimeo.js">
<div id="vimeoPlayer"></div>

<script type=’text/javascript’>
var vimeo;
vimeo = new Vimeo( “vimeoPlayer”, 480, 320, “vimeo” );
vimeo.loadVideo( ’24198254′ );
vimeo.addEventListener( vimeo.VIMEO_FINISH, videoFinished );

function videoFinished() {
//video finished playing
}
</script>

In order to start the Vimeo Class we need to setup the basics. We have to load in both the Vimeo class and swfobject. We also need a <div> tag to contain the Vimeo player.

Once we have that setup, we can call the Vimeo class and load in our video. In order to do so we have to initialize the Vimeo class and pass in the following parameters . Div container ID, video width dimensions, video height dimensions, variable name, show title of video, show by line of video, show user portrait, allow fullscreen, and video player colour.

Not all of these parameters are required. The only required parameters are: Div container ID, video width dimensions, video height dimensions, and variable name.

We can tell the class to load a specific video by calling loadVideo and pass in the video ID.

I bubbled all of the events the Moogaloop player dispatches out to the class for users. In my example, when the video has finished playing it calls our own function ‘videoFinished()’ and we can do whatever we want from there.

A finished example of this Vimeo class looks like this:

Below is a full documentation on my wrapper class methods:
- Constructor
- container – the html element that the vimeo player would be located in
- width – the vimeo player width
- height – the vimeo player height
- variableName – the variable name of the vimeo player
- showTitle (Boolean) – (optional) displays the title of the vimeo video. Default is true.
- showByline (Boolean) – (optional) displays the by line of the vimeo video. Default is true.
- showPortrait (Boolean) - (optional) displays the user portrait of the vimeo video. Default is true.
- fullScreen (Boolean) - (optional) allows users to watch Vimeo video in fullscreen. Default is true.
- playerColour (uint) – (optional) change the Vimeo video player colour. Default is the Vimeo blue (hex: #00adef)

- Event Types
- VIMEO_PLAYING – Fires when the vimeo player started to play.
- VIMEO_PAUSED – Fires when the vimeo player is paused.
- VIMEO_FINISH – Fires when the vimeo video is finished playing.
- VIMEO_PROGRESS – Fires as the vimeo video is playing and returns the position in seconds.
- VIMEO_LOAD_PROGRESS – Fires as the vimeo player is loading.
- VIMEO_LOAD_COMPLETE – Fires when the vimeo player has been loaded.
- VIMEO_SEEK – Fires when the user seeks through the video and returns the position in seconds.

- Public Functions
- addEventListener ( type, callback ) – A method that listens for events triggered by the Vimeo Player and calls the specific callback function as each event fires.
- type:String – The event that is being listened for
- callback:Function – The function that is called when the event is fired
- removeEventListener ( type, callback ) – A method that removes the callback function for a particular event type.
- type:String – The event that is being listened for
- callback:Function – The function that is called when the event is fired
- loadVideo ( vimeoID ) – Loads a specific video based on the Vimeo ID.
- vimeoID:String – The Vimeo video ID
- playVideo – Plays the loaded Vimeo video.
- pauseVideo – Pauses the loaded Vimeo video.
- seek( seekTime ) – Seeks the Vimeo video to the provided time.
- seekTime:String – The duration to seek the video to. This seekTime is based per second.
- volume( volumeLevel ) – Sets the volume level of the Vimeo player.
- volumeLevel:String – Sets the volume of the video. 0 is the lowest, 1 is the highest.
- changeVimeoColour( colour ) – Changes the Vimeo player colour.
- colour:String – This is a hexadecimal string that changes the colour of the Vimeo Video Player.
- unloadVideo – unloads the video.
- setVideoDimensions ( width, height ) – Sets the Vimeo video player’s width and height.
- width:Number – The width of the video player in pixels
- height:Number – The height of the video player in pixels


This post is tagged , , , ,

13 Responses

  1. suri says:

    Thank you so much for that, thats great work!
    After searching the web for hours I’ve found this and it makes life so much easier (at least according to vimeo embeds, that is)!

    Just one quick question, how do i set optional parameters when loading a vimeo video?
    say i want to not show the title, what do i have to add to this:

    vimeo = new Vimeo( “vimeoPlayer”, 480, 320, “vimeo” );

    because vimeo = new Vimeo( “vimeoPlayer”, 480, 320, “vimeo”, showTitle=0 );

    doesn’t work?

    Thank you in advance -for this class and for a quick one-line-answer! ;-)

    Suri

  2. suri says:

    Aaaah!

    I was close! Its showTitle=false!
    ;-)

  3. Josh says:

    yeah I am checking for booleans. I have made the adjustments to the documentation to reflect that.

    Thanks

  4. suri says:

    Hi Josh!
    Its me …again ;-)
    I can’t get Vimeo.js to work with Fitvids.js, it always strips height and width inside the object generated by Vimeo.js. Do you have a hint or idea how to solve this?
    Thank you very much in advance for your help!

    Suri

  5. suri says:

    Aaah, found that it doesn’t like defined width/height in pixels in the object. if i alter your code and delete the width/height “+px” it works!
    ha, answered that one myself again! ;-)
    I’m getting a little proud myself for me being a js beginner, just started learning 2 weeks ago…
    sry, delete that post, if it is inappropriate…

    Now i just have to find a way to vertically center it, but a cross browser solution is probably only possible by getting the video height somehow and change top css accordingly via query, i guess…
    i won’t be able to answer that one, for sure!
    sigh…

  6. Josh says:

    Anytime, glad to have helped.

    You could try using css for a quick and easy way to center your video player.

  7. Ivan says:

    In the example above, adding event listeners doesn’t seem to work.

  8. Ivan says:

    Nevermind. Had to run the sample from the server to see it work.

  9. Josh says:

    No worries. Glad to hear that everything works

  10. Ivan says:

    VIMEO_FINISH doesn’t seem to fire for me.
    I get the VIMEO_PLAYING and VIMEO_PAUSED just fine, but once the video ends, there is no FINISH event. Tried it in a couple of different browsers.

  11. Josh says:

    Hello Ivan

    The VIMEO_FINISH event should be firing as with the rest of the events.

    Just to debug, you’re not loading in the mobile version of Vimeo are you? As in you are accessing the video via a smartphone. As it is my understanding that none of the events aside from the onComplete or VIMEO_LOAD_COMPLETE can be accessible.

    Also to clarify, the event that you are looking for is VIMEO_FINISH? instead of FINISH?

  12. Ivan says:

    Here is an example of a video that fires VIMEO_PLAYING but is sending ‘undefined’ for both VIMEO_PAUSED and VIMEO_FINISH states.

    vimeo.com/51686357

    Not all Vimeo videos display the same behavior, some communicate state correctly.
    I’m not loading a mobile version of Vimeo. It’s running in Firefox/Webkit on OSX.

  13. Josh says:

    The best solution that I could find so far is this: http://vimeo.com/forums/topic:37563.

    It looks like some of the events are not being fired in the Vimeo player, and thus my class would not receive it from the Vimeo player.

    There are 2 solutions I could think of that might ‘bandaid’ this issue:
    1. Upload the video to Vimeo and have Vimeo generate a new id, which may possibly fix the event issue not firing.
    2. You could run a setInterval for 100ms and check to see if the video time is the same as the total time.

    Let me know how that turns out.

Leave a Reply

Categories