Vimeo Play Vimeo videos directly within JW Player 6



The Vimeo JW Player plugin uses the AS3 API to show the Vimeo videos using JW Player 6.


Tags:

This demonstrates a setup to play a video from Vimeo with a playlist of other videos. Additionally it fetches information about each video from the Vimeo API and shows some of the data provided. The Html5 fallback features provide the Vimeo Html5 Iframe API for mobile.

The plugin works with manual playlists aswell in combination with the JW Player playlist javascript api.

Features

  • Chrome player support with integration with other JW Player plugins.
  • Provides an event for obtaining data for the video to be used for customised features via the javascript API and Vimeo API.
  • Full playlist support provided by JW Player to work with other video provider types like http, rtmp and youtube.
  • Automatic management of the controlbar to hide / show the controls for the chrome player with other video types in a playlist.
  • Html5 API player fallback feature for Mobile playback.
  • Ability to display Jwplayer controlbar for Plus and Pro accounts where the player can be customised to disabled the Vimeo controls.

Known Issues

  • No official configurable chromeless player support, therefore all controlbar UI needs to be disabled.
  • All video UI customisations are provided by Plus and Pro only users for the owners of those videos if they choose to provide a chromeless interface.
  • No bitrate quality selection or HD selection support due to the lack of video quality level selection support or controlling HD access.
  • Not able to obtain volume value changes from the default UI therefore all volume settings to and from JW Player are disabled for the moment.
  • No seeking outside the buffer support due to the lack of proper pseudo streaming / byterange seeking functions over http.
  • No video start time support due to being a progressive download only stream.
  • An initial vimeo video id is required to load the API before actually requesting the correct video due to a logical limitation, this can be provided by a defaultId config or the current clip url is used. This will affect the play count.
  • Limitations with both the JW Player Javascript and Flash apis making certain features impossible.
  • No JW Player api for calling plugin methods on a provider or returning events, some work arounds have been made.
  • The JW Player Html5 player API requires overriding modifications to provide playback features in a playlist for other video types than just Html5 video contained within JW Player.

Known Issues For Mobile Fallback

  • Limitations within the JWPlayer Html5 player required complicated modifications and work arounds to provide playback support for both Html5 video and Html5 video within the iframe api players. The repackaged Html5 player is required to be loaded instead.
  • Due to this limitation of IOS preventing video playback until user interaction when going between the Html5 video and Html5 video within the iframe playback is required to be prevented until user interaction to click play.
  • When playing back video of the same type this limitation is not an issue as there has already been user interaction once but will reset when changing video types.

NOTE: The Vimeo Moogaloop API is severely limited and crippled because of their organisational, developer and business policies. Whenever the API is evolved and improved in the future those feature improvements may be carried across.

There is a hidden feature to provide near chromeless support but it is not enabled by default, it is required that owners of the videos hold a Plus or Pro account to be able to change the way the video appears in the API and only the users with such an account has access to disable features they do not need for the videos they own.

As of now only a chrome player is supported which requires disabling the JW Player controlbar which will then allow universal embedding and playing with other video formats in a playlist.

There will be no ETA as of yet of any other feature compatibility therefore can be bundled with the Youtube plugin at a reduced cost.

(Current Version 2.0)

Compatibility

  • JW Player 6 and above
License Options
Domain(s)

(Version 2.0)

License Information

The Vimeo Plugin is a once off commercial license with updates and support to the Vimeo plugin only. JW Player related questions and support may be provided on their forums at http://www.longtailvideo.com/support/forums/jw-player/

  • Single Domain License - Suitable for small to medium sites with updates and unlimited support included.
  • Multi Domain License - Suitable for larger sites and video platform sites with updates, feature requests and unlimited priority support included.
  • Single Domain Not For Profit License - Suitable for not for profit organisations.

Note:

With your purchase please provide your domains to be provided with your licensed plugin. New domains need to be requested manually for the moment.

Refund Policy:

Please try the demo before purchase or request for a 60 day site demo. Refunds will not be issued unless under some circumstances sorry for the inconvenience.

List Of Examples

Examples

Example with vimeo playlists.

JW Player configuration

The clip object sets the Vimeo plugin to be the video's streaming provider and URL resolver:


function formatContent(text){
    if (text) {
        text = text.replace(
            /((https?\:\/\/)|(www\.))(\S+)(\w{2,4})(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/gi,
            function(url){
                var full_url = url;
                if (!full_url.match('^https?:\/\/')) {
                    full_url = 'http://' + full_url;
                }
                return '' + url + '';
            }
        ).replace(/(\r\n|\r|\n)/g, "
"); } return text; } function showInfo(data) { $('#tags-content').html(data.tags.join(",")); $('#description').html(formatContent(data.content)); $('#content-container').show(); } function onVimeoApiData(data) { showInfo(data); } jwplayer("basic").setup({ flashplayer: "http://static.electroteque.org/swf/jwplayer.flash.swf", width: 760, height: 350, html5player: "jwplayer.api.html5.js", primary: "flash", 'playlist.position': 'right', 'playlist.size': '250', listbar: { position: 'right', size: 250 }, playlist: [ { apitype: "vimeo", file: "http://vimeo.com/1084537.mp4", provider: "http://static.electroteque.org/swf/vimeo-2.0.swf", title: "Big Buck Bunny", author: "Blender Foundation", videoDuration: "9.56", image: "http://b.vimeocdn.com/ts/209/636/20963649_640.jpg" }, { apitype: "vimeo", file: "http://vimeo.com/1132937.mp4", provider: "http://static.electroteque.org/swf/vimeo-2.0.swf", title: "Elephants Dream", author: "Blender Foundation", videoDuration: "10.54", image: "http://b.vimeocdn.com/ts/209/725/20972598_640.jpg" }, { apitype: "vimeo", file: "http://vimeo.com/28103524.mp4", provider: "http://static.electroteque.org/swf/vimeo-2.0.swf", title: "Les chiens isolés", author: "CRCR", videoDuration: "6.32", image: "http://b.vimeocdn.com/ts/205/905/205905221_640.jpg" }, { apitype: "vimeo", file: "http://vimeo.com/17922322.mp4", provider: "http://static.electroteque.org/swf/vimeo-2.0.swf", title: "Junkspace", author: "CRCR", videoDuration: 0.55, image: "http://b.vimeocdn.com/ts/130/627/130627553_640.jpg" }, { apitype: "vimeo", file: "http://vimeo.com/16051959.mp4", provider: "http://static.electroteque.org/swf/vimeo-2.0.swf", title: "TODOR and PETRU", author: "CRCR", videoDuration: "2.45", image: "http://b.vimeocdn.com/ts/205/911/205911527_640.jpg" }, { apitype: "vimeo", file: "http://vimeo.com/15160326.mp4", provider: "http://static.electroteque.org/swf/vimeo-2.0.swf", title: "Red River Bay", author: "CRCR", videoDuration: "1.07", image: "http://b.vimeocdn.com/ts/130/627/130627947_640.jpg" }, ], vimeo: { enableApiData: true } });

Configuration

The configuration of the Vimeo provider plugin needs to be in a config object property `vimeo` like so:


vimeo: {
    ....
}

Html5 Configuration

The configuration of the Html5 Vimeo player feature requires a property `apitype` set to `vimeo` in a playlist item like so:


{ apitype: "vimeo" .... }

The configuration property of the Html5 video player url `html5player` requires to be configured with the url `jwplayer.api.html5.js` like so:


{ html5player: "jwplayer.api.html5.js", .... }

Here is a list of the configuration options:

property / datatype default description
enableApiData
boolean
false When enabled the video data feed will be collected and video information will be returned via the onApiData event. This will collect information like statistics, thumbnails, portraits, tags, title, description etc.
oauthKey
string
The required developer oauth key to load the api. The oauth key is required and can be obtained by first logging into Vimeo and registering your application at http://vimeo.com/api/applications/new.
secure
boolean
false When loading the player in a secure server environment, enable this to load the Vimeo api via secure server also.
showControls
boolean
false For Plus and Pro accounts, users can control the player design and disable the default controls and display the JWPlayer controlbar.
embedConfig
object
The config for embedding properties.

Embed Config

property / datatype default description
color
string
Specify the color of the video controls. Defaults to 00adef. Make sure that you don’t include the #.
title
number
0 Show the title on the video. Defaults to 0.
portrait
number
0 Show the user's portrait on the video. Defaults to 0.
byline
number
0 Show the user's byline on the video. Defaults to 0.

Vimeo Video Playlist Example

This example demonstrates of a video playlist of Vimeo and Mp4 videos for both Flash and Html5. The plugin will manage hiding and displaying the controlbar when changing stream providers.




$(function() {

jwplayer("manualVideoPlaylist").setup({
        flashplayer: "http://static.electroteque.org/swf/jwplayer.flash.swf",
        width: 760,
        height: 350,
        html5player: "jwplayer.api.html5.js",
        primary: "flash",
        'playlist.position': 'right',
        'playlist.size': '250',
        listbar: {
                        position: 'right',
                        size: 250
        },
        playlist: [

	            {  apitype: "vimeo", file: "http://vimeo.com/1084537.mp4", provider: "http://static.electroteque.org/swf/vimeo-2.0.swf", title: "Big Buck Bunny - Vimeo", author: "Blender Foundation", videoDuration: "9.56",  image: "http://b.vimeocdn.com/ts/209/636/20963649_640.jpg" },
	            { file: "http://videos.electroteque.org/Elephants_Dream_720-h264-st-aac.mp4", title: "Elephants Dream - Mp4", author: "Blender Foundation", videoDuration: "10.54", image: "http://i.ytimg.com/vi/XSGBVzeBUbk/default.jpg" },


                { file: "http://videos.electroteque.org/big_buck_bunny_400k.mp4", title: "Big Buck Bunny - Mp4", author: "Blender Foundation", videoDuration: "9.56",  image: "http://i.ytimg.com/vi/XSGBVzeBUbk/default.jpg" },
                { apitype: "vimeo", file: "http://vimeo.com/1132937.mp4", provider: "http://static.electroteque.org/swf/vimeo-2.0.swf", title: "Elephants Dream - Vimeo", author: "Blender Foundation", videoDuration: "10.54", image: "http://b.vimeocdn.com/ts/209/725/20972598_640.jpg" },
        ]
});



});


Events

Event When does it fire?
onVimeoApiData() Fires when the data feed information is collected when the enableApiData config is enabled. The callback is fed with the following arguments:
  • data the data object with information of the video.

Data Object

Property Description
url The video url ie videoid.
id The vimeo video id.
author The author object with the following properties:
  • name the author username.
  • url the url to the author profile.
title The video title.
content The video content / description.
defaultThumbnail The default video thumbnail.
duration The duration of the video in seconds.
statistics The statistics object with the following properties:
  • favoriteCount the count of favorites added by users.
  • viewCount the view count.
  • commentCount the comments count.
tags A numbered array of tags.
thumbnails An array of thumbnail objects with the following properties:
  • url the thumbnail url.
In order from small, medium, large.
portraits An array of the author portrait images objects with the following properties:
  • url the portrait url.
In order from small, medium, large.
embedAllowed If the video is allowed to be embedded into the player.

Download a demo



jwplayer.vimeo-2.0-demo.zip same as above + README.txt and LICENCE.txt, and an example page

This is a non expiring demo version of the plugin. Works only on your local machine on localhost or 127.0.0.1.