Vimeo Play Vimeo videos directly within JW Player 8



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


This demonstrates a setup to play a video from Vimeo with a playlist of other videos.

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.
  • Full playlist support provided by JW Player to work with other video provider types like http, rtmp and youtube.
  • Bitrate selection, subtitles selection and playback rate full support. Bitrate selection is a new feature for Vimeo.
  • Support for Pro and Free Accounts. For Pro account configurations, the JWPlayer controlbar will be displayed.
  • Vimeo Chapters features adding cues to the JWPlayer Controlbar.
  • Vimeo poster images obtaining data from their api.

Known Issues

  • Free account videos have no Chromeless 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.

(Current Version 8.0.0)

Compatibility

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

(Version 8.0.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.

Demo

Contact for a site or local demo download.

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

    var player = jwplayer("basic").setup({
            width: "100%",
            aspectratio: "16:9",
            //preload: "none",
            //autostart: true,
            playbackRateControls: true,

             playlist: [
                { file: "http://vimeo.com/1084537", type: "mp4" },
                { file: "http://vimeo.com/1132937", type: "mp4" },
                { file: "http://vimeo.com/17922322", type: "mp4" }
            ],

           
            vimeo: {
                //not required
                pro: false

            }
    });

     

})(window.jwplayer);



Configuration

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


vimeo: {
    ....
}

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.
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 using a playlist combination of Vimeo and normal html5 videos




(function(jwplayer) {

    jwplayer("manualVideoPlaylist").setup({
            width: "100%",
            aspectratio: "16:9",
            //preload: "none",
            autostart: false,
            playlist: [
                                    { file: "http://vimeo.com/1084537", type: "mp4",  title: "Big Buck Bunny", author: "Blender Foundation", videoDuration: "9.56",  image: "http://b.vimeocdn.com/ts/209/636/20963649_640.jpg" },
                                    {
                                         
                            sources: [
                                                                    { type: "webm", file: "//videos.electroteque.org/bitrate/elephants_dream_600k.webm"},
                                                                    { type: "mp4", file: "//videos.electroteque.org/bitrate/elephants_dream_600k.mp4"},
                                                                    { type: "ogg", file: "//videos.electroteque.org/bitrate/elephants_dream_600k.ogv"}
                            ],
                            title: "Elephants Dream - Mp4", author: "Blender Foundation", videoDuration: "10.54", image: "http://i.ytimg.com/vi/XSGBVzeBUbk/default.jpg"
                        },

                                    { file: "http://vimeo.com/28103524", type: "mp4", title: "Les chiens isolés", author: "CRCR", videoDuration: "6.32", image: "http://b.vimeocdn.com/ts/205/905/205905221_640.jpg" },
                                  

            ],

            vimeo: {

            }
    });



})(window.jwplayer);

Vimeo Video Chapters Example

Vimeo has recently implemented Chaptering cuepoint examples with cuepoint events. This demonstrates how to add these cues to JWPlayer.




(function(jwplayer) {

    var chapters = jwplayer("chapters").setup({
            width: "100%",
            aspectratio: "16:9",
            //preload: "none",
            //autostart: true,
            playbackRateControls: true,

             playlist: [
                { file: "https://vimeo.com/399759138", type: "mp4" }
            ],

           
            vimeo: {
                chapters: true,
                pro: true

            }
    });

    chapters.on("ready", function() {
        chapters.on("chapterchange", function(e) {
            console.log(e);
        });
    });

})(window.jwplayer);