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.
  • Vimeo video markers features embedding and displaying markers produced within the video description content.

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.
  • Vimeo has randomly broken Flash cross policy security and therefore cannot load their data api. A javascript example workaround is provided. The internal loading features are not functional for the moment.

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

Compatibility

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

(Version 3.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 showFlashInfo(data) { $('#tags-content').html(data.tags); $('#description').html(formatContent(data.description)); $('#content-container').show(); } jwplayer("basic").setup({ flashplayer: "https://static.electroteque.org/swf/jwplayer.flash-6.8.swf", width: 760, height: 350, html5player: "jwplayer.api.html5.js", primary: "flash", 'playlist.position': 'right', 'playlist.size': '250', listbar: { position: 'right', size: 250 }, playlist: [ { file: "http://vimeo.com/1084537.mp4", provider: "https://static.electroteque.org/swf/vimeo-3.0.swf", title: "Big Buck Bunny", author: "Blender Foundation", videoDuration: "9.56", image: "http://b.vimeocdn.com/ts/209/636/20963649_640.jpg" }, { file: "http://vimeo.com/1132937.mp4", provider: "https://static.electroteque.org/swf/vimeo-3.0.swf", title: "Elephants Dream", author: "Blender Foundation", videoDuration: "10.54", image: "http://b.vimeocdn.com/ts/209/725/20972598_640.jpg" }, { file: "http://vimeo.com/28103524.mp4", provider: "https://static.electroteque.org/swf/vimeo-3.0.swf", title: "Les chiens isolés", author: "CRCR", videoDuration: "6.32", image: "http://b.vimeocdn.com/ts/205/905/205905221_640.jpg" }, { file: "http://vimeo.com/17922322.mp4", provider: "https://static.electroteque.org/swf/vimeo-3.0.swf", title: "Junkspace", author: "CRCR", videoDuration: 0.55, image: "http://b.vimeocdn.com/ts/130/627/130627553_640.jpg" }, { file: "http://vimeo.com/16051959.mp4", provider: "https://static.electroteque.org/swf/vimeo-3.0.swf", title: "TODOR and PETRU", author: "CRCR", videoDuration: "2.45", image: "http://b.vimeocdn.com/ts/205/911/205911527_640.jpg" }, { file: "http://vimeo.com/15160326.mp4", provider: "https://static.electroteque.org/swf/vimeo-3.0.swf", title: "Red River Bay", author: "CRCR", videoDuration: "1.07", image: "http://b.vimeocdn.com/ts/130/627/130627947_640.jpg" }, ], vimeo: { } }); var player = jwplayer('basic'); player.onReady(function() { if (player.getRenderingMode().match(/flash/)) { player.onPlaylistItem(function(index, pl) { var playlist = player.getPlaylist(); var item = playlist[index.index]; var videoId = parseInt(item.file.match(/vimeo\.com\/(?:.*#|.*\/videos\/)?([0-9]+)/)[1]); $.getJSON(document.location.protocol + "//vimeo.com/api/v2/video/" + videoId + '.json?callback=?', {format: "json"}, function(arg) { showFlashInfo(arg[0]); }); }); } });

Configuration

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


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.

Configuration For The Vimeo Markers Plugin

property / datatype default description
container
string
Specify the markers container id or style selector to enable markers generation and display.
timecodecss
string
timecode-marker Specify the caption time link style. This is required to be the same as what is used in the html template.
html
boolean
false Enable displaying the original vimeo description with the processed chapter point times.
listTemplate
string
<dt>{timecode}</dt><dd><a href=\"#\" data-time=\"{start}\" class=\"timecode-marker\">{caption}</a></dd> The html template for generating the markers list with. Either the timecode or the caption can be specified as the chapter point link.
htmlTemplate
string
"<a href=\"#\" data-time=\"{time}\" class=\"timecode-marker\">{timecode}</a> The html template for processing the description with the chapter point links.

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: "https://static.electroteque.org/swf/jwplayer.flash-6.8.swf",
        width: 760,
        height: 350,
        html5player: "jwplayer.api.html5.js",
        primary: "flash",
        'playlist.position': 'right',
        'playlist.size': '250',
        listbar: {
                        position: 'right',
                        size: 250
        },
        playlist: [

	            { file: "http://vimeo.com/1084537.mp4", provider: "https://static.electroteque.org/swf/vimeo-3.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://www.youtube.com/watch?v=YE7VzlLtp-4", title: "Bug Buck Bunny Youtube"},
                { 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" },
                { file: "http://vimeo.com/1132937.mp4", provider: "https://static.electroteque.org/swf/vimeo-3.0.swf", title: "Elephants Dream - Vimeo", author: "Blender Foundation", videoDuration: "10.54", image: "http://b.vimeocdn.com/ts/209/725/20972598_640.jpg" },
        ]
});



});


Vimeo Video With Markers Example

This example obtains the markers from the Vimeo video description and generates either a marker list or processed description to display with chapter point links enabled.



   <div id="markers-main" style="width:100%;">
     <div style="float:left;" style="width:640px;">
    	    <div id="markers"></div>
    	    <div>
               <div id="markers-desc"/>
           </div>
     </div>
   </div>
    <div id="markers-container" style="float:right; width: 300px;"></div>

   </div>


$(function() {

jwplayer("markers").setup({
        flashplayer: "https://static.electroteque.org/swf/jwplayer.flash-6.8.swf",
        width: 640,
        height: 350,
        html5player: "jwplayer.api.html5.js",
        primary: "flash",
        playlist: [
	           { file: "http://vimeo.com/35071481.mp4", provider: "https://static.electroteque.org/swf/vimeo-3.0.swf"}
        ],
        vimeo: {

        },
        plugins: {

            "vimeomarkers-3.0.js" : {
            	html: true,
            	container: "#markers-container"
            }
        }
});



var player = jwplayer('markers');

player.onReady(function() {

	player.onVimeoMarkers(function(markers) {
        console.log("Found markers", markers);
	});

	player.onVimeoHtmlMarkers(function(description) {
            console.log("Html markers", description);

            $("#markers-desc").html(description);
    });
});

});

Style for the markers list


         #markers-container {
               width: 300px;
               margin:0 0 0 0;
               padding:0px;
               float:right;
               margin-left:0px;
               margin-top:0px;

         }

         #markers-container dt, #markers-container dd {
                       float: left;
                       margin: 0;
                       color: black;
                       font-size: 12px
         }

         #markers-container dt {
                     clear:both;
                     margin-right: 1em;
          }

Vimeo Markers with the Markers Plugin for Pro Accounts

It is possible to configure the markers plugin with the generated Vimeo markers by simply configuring the plugin. The Vimeo markers plugin will detect it is loaded and configure it via it's api methods.

Because this requires the JWPlayer controlbar visible it is only suggested to be used with Pro accounts where embedded players can be turned into chromeless players by hiding the default controlbar.

Example Configuration




$(function() {

jwplayer("markers").setup({
        flashplayer: "https://static.electroteque.org/swf/jwplayer.flash-6.8.swf",
        width: 640,
        height: 350,
        html5player: "jwplayer.api.html5.js",
        primary: "flash",
        playlist: [
	           { file: "http://vimeo.com/35071481.mp4", provider: "https://static.electroteque.org/swf/vimeo-3.0.swf"}
        ],
        vimeo: {
          //this is required for chromeless players
          showControls: true
        },
        plugins: {

            "vimeomarkers-3.0.js" : {
            	container: "#markers-container"
            },
            //configure the markers plugin
            "https://static.electroteque.org/swf/videomarkers-2.0.js": {
                color: "#FFFFFF",
                overColor: "#CCCCCC",
                alternateColor: "#CCCCCC",
                alternateOverColor: "#FFFFFF",
                circleRadius: 4,
                enableButtons: true,
                offset: 0
            }

        }
});

});

Html Markers Example

This parses out the description directly to display with the processed times.



$(function() {

jwplayer("markers").setup({
        flashplayer: "https://static.electroteque.org/swf/jwplayer.flash-6.8.swf",
        width: 640,
        height: 350,
        html5player: "jwplayer.api.html5.js",
        primary: "flash",
        playlist: [
	           { file: "http://vimeo.com/35071481.mp4", provider: "https://static.electroteque.org/swf/vimeo-3.0.swf"}
        ],
        vimeo: {

        },
        plugins: {

            "vimeomarkers-3.0.js" : {
            	html: true
            }
        }
});



var player = jwplayer('markers');

player.onReady(function() {

	player.onVimeoHtmlMarkers(function(description) {
            console.log("Html markers", description);

            $("#markers-desc").html(description);
    });
});

});

Vimeo Description Item Config Example

The vimeo description could possibly be stored in the backend and configured on the playlist item using the `vimeodescription` property. This reduces the need to obtain the data for the video which likely also has daily request limits.



$(function() {

jwplayer("markers").setup({
        flashplayer: "https://static.electroteque.org/swf/jwplayer.flash-6.8.swf",
        width: 640,
        height: 350,
        html5player: "jwplayer.api.html5.js",
        primary: "flash",
        playlist: [
	           { file: "http://vimeo.com/35071481.mp4", provider: "https://static.electroteque.org/swf/vimeo-3.0.swf", vimeodescription: "3:00 test caption
\n 4:00 test caption2"} ], vimeo: { showControls: true }, plugins: { "vimeomarkers-3.0.js" : { container: "#markers-container" } } }); var player = jwplayer('markers'); player.onReady(function() { player.onVimeoMarkers(function(markers) { console.log("Found markers", markers); }); }); });

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