Vimeo Play Vimeo videos directly within Flowplayer



The Vimeo Flowplayer plugin uses the AS3 API to show the Vimeo videos using Flowplayer.


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 plugin works with manual playlists aswell in combination with the flowplayer playlist javascript api.

Features

  • Chrome player support with integration with other Flowplayer 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 Flowplayer 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.

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 Flowplayer 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.

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 Flowplayer 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 3.2.8)

Compatibility

  • Flowplayer 3.2.6 and above

Plugin Available For Purchase via Paypal


License Options

(Version 3.2.8)

License Information

The Vimeo Plugin is a once off commercial license with updates and support to the Vimeo plugin only. Flowplayer related questions and support may be provided on their forums at http://flowplayer.org/forum/index.html

  • 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.
  • Unlimited - Suitable for distributing with software, provided will be the plugin as an actionscript library to compile into the flopwlayer unlimited player.

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.

List Of Examples

Examples

Example with vimeo playlists.

Flowplayer configuration

The controls can be disabled by configuring it as null when working with the vimeo Chrome player.



    .....
	plugins:  {
		controls: null,
		.....
	},
	....

A default vimeo video id is also required to initially load the API due to a logical limitation, if none is set the current clip url is used or else this can be done like so: 



    .....
	defaultId: vimevideoid,
	....

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) {


    $("#content-container a .view-count").prettynumber({
        delimiter : ','
    });

    $("#playlist").overscroll();


   $('#content-container a .video-time').showTime();

    $('#tags-content').html(data.tags.join(","));

    $('#description').html(formatContent(data.content));


	$('#playlist').show();


    $('#content-container').show();

}


$f("vimeo", "http://static.electroteque.org/swf/flowplayer.swf", {
	plugins:  {
		controls: null,
		vimeo: {
			url:'http://static.electroteque.org/swf/flowplayer.vimeo-3.2.8.swf',
            enableApiData: true,
            loadOnStart: false,
            defaultId: 2,
            onApiData: function(data) {
                // use the function defined above to show tche related clips
                showInfo(data);
            }
		}
	},
	playlist: [
	    { url: "api:1084537", title: "Big Buck Bunny", author: "Blender Foundation", videoDuration: "9.56",  thumbnail: "http://b.vimeocdn.com/ts/209/636/20963649_200.jpg" },
	    { url: "api:1132937", title: "Elephants Dream", author: "Blender Foundation", videoDuration: "10.54", thumbnail: "http://b.vimeocdn.com/ts/209/725/20972598_200.jpg" },
	    { url: "api:28103524", title: "Les chiens isolés", author: "CRCR", videoDuration: "6.32", thumbnail : "http://b.vimeocdn.com/ts/205/905/205905221_200.jpg" },
	    { url: "api:17922322", title: "Junkspace", author: "CRCR", videoDuration: 0.55, thumbnail: "http://b.vimeocdn.com/ts/130/627/130627553_200.jpg" },
	    { url: "api:16051959", title: "TODOR and PETRU", author: "CRCR", videoDuration: "2.45", thumbnail: "http://b.vimeocdn.com/ts/205/911/205911527_200.jpg" },
	    { url: "api:15160326", title: "Red River Bay", author: "CRCR", videoDuration: "1.07", thumbnail: "http://b.vimeocdn.com/ts/130/627/130627947_200.jpg" },

	],
    onLoad: function() {
        showPlaylist("#playlist1");
    },
	clip: {
		provider: 'vimeo',
        autoPlay: false
	},
    log: {
        level: 'debug',
        filter: 'org.electroteque.vimeo.*, org.flowplayer.controller.*'
    }

}).playlist("#playlist1", {loop:true});

Configuration

Here is a list of the configuration options:

property / datatype default description
apiPlayerURL
string
http://api.vimeo.com/moogaloop_api.swf? The url to the Vimeo moogaloop API.
dataApiURL
string
http://vimeo.com/api/v2/video/ The url to the Vimeo video data feed.
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.
displayErrors
boolean
false Setting to enable vimeo errors to be displayed for debugging purposes, or use the javascript callback functions and console logging.
defaultId
string
The default Vimeo video id used to load the chrome API.
apitype
string
chrome Valid options are chrome to display the default chrome player.
oauthKey
string
The 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.
loadOnStart
boolean
true By default the plugin will load the api on player load. By turning this off the api will load on request when working with other video providers in a playlist.
secure
boolean
false When loading the player in a secure server environment, enable this to load the Vimeo api via secure server also.

Vimeo Video Playlist Example

This example demonstrates of a video playlist of Vimeo and Youtube videos. 




$(function() {


$f("manualVideoPlaylist", "http://static.electroteque.org/swf/flowplayer.swf", {
	// configure the required plugin
	playlist: [

	            {  url: "api:1084537", provider: "vimeo", title: "Big Buck Bunny - Vimeo", author: "Blender Foundation", videoDuration: "9.56",  thumbnail: "http://b.vimeocdn.com/ts/209/636/20963649_200.jpg" },
	            { url: "api:bsGEWHNJ3s8", provider: "youtube", title: "Elephants Dream - Youtube", author: "Blender Foundation", videoDuration: "10.54", thumbnail: "http://i.ytimg.com/vi/XSGBVzeBUbk/default.jpg" },


                { url: "api:XSGBVzeBUbk", provider: "youtube", title: "Big Buck Bunny - Youtube", author: "Blender Foundation", videoDuration: "9.56",  thumbnail: "http://i.ytimg.com/vi/XSGBVzeBUbk/default.jpg" },
                { url: "api:1132937", provider: "vimeo", title: "Elephants Dream - Vimeo", author: "Blender Foundation", videoDuration: "10.54", thumbnail: "http://b.vimeocdn.com/ts/209/725/20972598_200.jpg" },
    ],
	plugins:  {

		controls: { autoHide: true, playlist: true },
		vimeo: {
				url:'http://static.electroteque.org/swf/flowplayer.vimeo-3.2.8.swf'
		} ,
		youtube: {
				url:'http://static.electroteque.org/swf/flowplayer.youtube-3.2.7.swf',
                onVideoRemoved: function() {
                    console.log("Video Removed");
                },
                onVideoError: function() {
                    console.log("Incorrect Video ID");
                },
                onEmbedError: function() {
                    console.log("Embed Not Allowed");
                }

		}
	},
	onLoad: function() {
        showPlaylist("#playlist2");
    },
	clip: {
        autoPlay: true
	},
	log: {
        level: 'debug',
        filter: 'org.flowplayer.view.Panel, org.flowplayer.controller.*,org.electroteque.vimeo.*'
    }

}).playlist("#playlist2", {loop:true});

});

Vimeo Video with Poster Image Example

This example demonstrates having the Vimeo video poster in the playlist as a splash.

The configuration uses the playlist splash example http://flowplayer.org/demos/configuration/playlist-splash.html where a splash image url is configured before the clip in the playlist. 



$(function() {

$f("poster", "http://static.electroteque.org/swf/flowplayer.swf", {
	// configure the required plugin
	playlist: [
			       {
						url: 'http://b.vimeocdn.com/ts/209/636/20963649_640.jpg'
				   },
			       {
						url: 'api:1084537',
						provider: 'vimeo',
						title: 'Big Buck Bunny',
						autoPlay: false,
						autoBuffering: true
				   }
    ],
	plugins:  {

		controls: null,
		vimeo: {
				url:'http://static.electroteque.org/swf/flowplayer.vimeo-3.2.8.swf'
		}
	},
	clip: {

	},
	log: {
        level: 'debug',
        filter: 'org.flowplayer.controller.*,org.electroteque.vimeo.*'
    }

});

});



    .....
	playlist: [
			       {
						url: 'http://b.vimeocdn.com/ts/209/636/20963649_640.jpg'
				   },
			       {
						url: 'api:1084537',
						provider: 'vimeo',
						title: 'Big Buck Bunny',
						autoPlay: false,
						autoBuffering: true
				   }
    ],

	....

The Vimeo poster image url is obtained from http://i.ytimg.com/vi/XSGBVzeBUbk/hqdefault.jpg where XSGBVzeBUbk is the video id.

The video clip config is then configured with autoPlay set to false and autoBuffering set to true.

Events

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

Data Object

Property Description
url The video url ie api: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



flowplayer.vimeo-3.2.8-demo.swf the Flash file to get you started
flowplayer.vimeo-3.2.8-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.