videojs / videojs-vimeo

Support Vimeo source for Video.js

Videojs Vimeo plugin

Videojs Vimeo plugin using the official Vimeo Player API. This is heavily inspired by the official VideoJS YouTube project.

Installation

For now, the package is not published on any package manager — download the dist file or point your package manage at this repo.

Usage

See index.html

videojs-vimeo's Issues

Hide share, save for later and and like

Is it possible to hide the 3 icons in the top right corner?
And if possible also the Vimeo logo title and such. I'm going to use it with a business account, so I should be allowed to do this according to the terms.

Alternative hide all Vimeo-player-code, and use VideoJS "natively" but still use your code to connect the player

Video.js 5.0.2 and videojs-vimeo

Hello!

Should Video.js 5.0.2 work together with VideoJS-vimeo. I do not get out that it works.

Many thanks

ps: it works with VideoJS-youtube

Cant get it to work

I can not get my vimeo and videojs to work properly. Can I please get a code example. Lets just say my vimeo video id is 123456789. How would I implement this? I really need help and have posted this question to numerous sites with no good answers. I dont want to have to use vimeos player. I have a vimeo pro $199/yr account so I can use videojs. I look at laracasts.com as an almost exact example of what I want to implement. please help.

Thanks
Mike
[email protected]

Remove duplicate code block

// Copy the JavaScript options if they exists
if (typeof options['source'] != 'undefined') {
for (var key in options['source']) {
player.options()[key] = options['source'][key];
}
}

This block is repeated twice probably due to a merge error.

npm ERR! missing script: build

Hi! When I'm running npm run build I'm getting an error:

npm ERR! missing script: build

Can you help me out?

Or maybe it would make sense to just compile vimeo.min.js and make it available for download, so that people could just download it?

Crome in mac, vimeo doesn't work.

It's showing black area and after refreshing three-four time it shows but most randomly.
data setup is like that:

I keep both youtube and vimeo js. It's happening for both of them.

http://screencast.com/t/HXyXgtEif2jg

Can't get the plugin it to work, Youtube works fine, but not Vimeo…

Hi,

got a problem with the vimeo plugin for videojs. The vimeo videos won't load. I think this is not an issue with my code, as I used a stripped down example from videojs and added the plugins as it was explained in the readme.

http://alexanderalbrecht.ch/video-js/index.html Youtube videos work as intended
http://alexanderalbrecht.ch/video-js/index-vimeo.html Vimeo videos won't load

kind regards
alex

Switching between Vimeo and Youtube.

Hi eXon,
This is not really and issue but more of a question.
I'm using your videojs-vimeo and videojs-youtube plugins together and I'm trying to switch between Vimeo and Youtube videos.
I tried several ways and short of disposing of it and re-initializing it, I haven't been very successful.

Among other things, I've tried to set the techOrder in the

I also tried several variations of:
V("projects_video").options.techOrder = [newType];
V("projects_video").src(newURL);
and
V("projects_video").src({ type: "video/"+newType, src:newURL });

Where newType is "vimeo" or "youtube".

So my question is, how would I go about changing the techOrder to load the Vimeo or Youtube videos short of disposing/reinitialize .
Thanks!

How do I responsively size the video?

This is pretty much right from your example that is sized by inline style http://jsfiddle.net/nightcoregirl/2v2jegy2/11/

I wanted to use this responsive embed plugin https://github.com/davatron5000/FitVids.js/ but it wasn't working out for me.

Fullscreen in Chrome

Hi,

I noticed that in Chrome, when you enter fullscreen, the vimeo player disappears, and the video just plays with the basic html5 player. Not sure if this is intended, but if you could share some light on this matter, i'd appreciate it. Example: http://jsbin.com/senodi/1/edit?html,js,output.

Thanks

Captions / Subtitles

Is it possible to load subtitles and streaming from vimeo same time? I figured it out for YouTube, but without vimeo support, video.js doesn't solve the same problem we have now with longtail videoplayer.
Thanks in advance.

Vimeo.js: Cannot read property 'getJSON' of undefined

Getting this error when trying to use a Vimeo embed
Vimeo.js:94 Uncaught TypeError: Cannot read property 'getJSON' of undefined

Code is embedded like this
<div data-setup="{ "techOrder": ["vimeo"], "sources": [{ "type": "video/vimeo", "src": "https://vimeo.com/153836040"}] }" class="video-js vjs-sublime-skin vjs-paused project-video-dimensions" id="project-video"></div>

Here are my versions.
"videojs-vimeo": "^2.0.0",
"video.js": "videojs#^5.8.5",

Progressbar

Hello,

This was commented in #6, but I think this is possible...

This was done with the https://github.com/travist/minplayer .

Can you help me to just show the progress bar?

Thanks,

Paulo

Advanced Custom Fields to return a unique ID# and mobile

Thanks for a great solution to using vimeo and video.js. I solved this already but wanted to post my solution in case someone else comes across it.

I'm calling the video URL and the unique ID with advanced custom fields, here is the code:

<video id="vid<?php the_sub_field('unique_number'); ?>" src="" class="video-js vjs-default-skin video" controls preload="auto" width="100%" height="auto" data-setup='{ "techOrder": ["vimeo"], "src": "<?php the_sub_field('videourl'); ?>", "loop": false, "autoplay": false }'>
     <p>Video Playback Not Supported</p>
</video>

It works on desktop, but the second video loads broken on mobile. I have checked that the returned ID is actually unique and it is. I solved the issue by using a counter instead of pulling the unique number with a custom field. Not sure why ACF custom ID field didn't work on mobile, but here is the code that works with a counter:

<?php $count = 1;  elseif( get_row_layout() == 'video' ): ?>
     <video id="vid<?php echo $count++; ?>" src="" class="video-js vjs-default-skin video" controls preload="auto" width="100%" height="auto" data-setup='{ "techOrder": ["vimeo"], "src": "<?php the_sub_field('videourl'); ?>", "loop": false, "autoplay": false }'>
           <p>Video Playback Not Supported</p>
     </video>   

Updating from 4.1.0 to 4.3

Hi, thanks for updating the vjs youtube plugin. Would it be possible to do the same for the vimeo plugin as well?

WordPress Plugin Conflict

I am using videojs in WordPress and there seem to be a conflict with one of the plugins I have activated in WordPress.

I am using youtube and vimeo videojs plugins and the conflict seem to affect youtube and vimeo videos only when using videojs 4.2.1. Faced similar problem in 4.1 version.

The video work sometime but then if page is reloaded then it does not work and I am left with a black video screen with play button on top.

Browsers:
Chrome - 29.0.1547.76
Firefox - 23.0.1 / 24
Safari - 6.0.5

OS:
Mac - 10.8.5

Check here - http://gautamthapar.me/gt-shortcodes-video-player/

---

P.S. With the other WordPress plugin disabled all videos work fine.

Permission denied to access property "toString"

Although it is working I am getting this error in console terminal:
Error: Permission denied to access property "toString"
Really appreciate all the help.

Not a issue But suggestion for Vimeo with Videojs 5+

The Vimeo plugin do not work with the latest Videojs 5+.
It would be great to do a Vimeo plugin based on your Youtube plugin.
There's a api for Vimeo
https://developer.vimeo.com/player/js-api
Here a way to remove with css all Vimeo Control.
http://www.cssplay.co.uk/menu/cssplay-vimeo-hide-control-bar.html
Vimeo API example.
https://github.com/vimeo/player-api

Support for VAST plugin?

Hi guys,

Just wondering if support for the VAST plugin is on the cards?

Apparently, the problem is caused by the lack of currentSrc implementation, which has been noted here.

This would be an awesome feature!

Second initialization fails

Hi

I have a problem with ajax-loaded videos. When i am loading bunch of videos, I am initializing them using videojs function.

For each element (using jQuery.each()):

var newId = 'video-id-'+idCount;
var setup = JSON.parse(el.attr("data-setup"));
el.removeAttr( "data-setup" );
videojs(newId, setup, function() {});
idCount++

And this is working for Youtube videos.
But for video from Vimeo, after first videos are loaded, when I click Load more (it gets new HTML from server and runs code, I wrote above on this HTML), I have an error in console:

TypeError: el is undefined

After some research, I found that Dom.createEl() fails to create element.

with id is created, but without content.

In short:

1. When I am initializing one element, it is working
2. When I am initializing more elements at once (in one jQuery.each() loop) - it is working
3. When I am trying to initialize additional elements, in second run (no matter if I am running videojs() from console to test, or from another jQuery.each() loop) - it fails

What can I do with this?

Why vimeo no autoplay?!

Have tried the example with another vimeo video and the video does not autoplay. 👎

Importing videojs-vimeo using ES6

I'm trying to import videojs-vimeo as an ES6 module, which works great with the videojs-youtube plugin but not this. I tried emulating the code in the videojs-youtube script but am not very very far! What do I need to do?

fullscreen event not triggering

I have been trying to implement this plugin on my website now and while I can add event-listeners for 'play', 'pause', etc if I add one for 'fullscreenchange' it doesn't fire.
Any idea how that could be fixed?

Edit:
$(document).on("webkitfullscreenchange mozfullscreenchange fullscreenchange", function());
works though

Example Given not working

Example given in the folder is not working. I mean i am not able to see the skin in video instead video is playing with the default vimeo skin .

Thanks

Change SRC fail

Because reinitialize fails I tried to reuse a different players for each source (youtube, vimeo...)

But I change myplayer.src("new video link") and it simply ignore it.

Am I doing something the wrong way?

Using video.js controls and progressbar?

Vimeo has changed their policy regarding hiding elements for embedded videos for PLUS and PRO members:

https://vimeo.com/help/faq_old/upgrading_to_vimeo_plus
https://vimeo.com/help/faq/sharing-videos/embedding-videos#how-do-i-customize-the-appearance-of-embedded-videos

Is there a way to enabled the videojs controls/progressbar?

Vimeo poster image

Hi.
Is it possible to use Vimeo video default image as poster like in the youtube plugin?
If poster not defined use video default image as poster.
Thanks
Really appreciate all the help.

[enhancement] Add missing bower.json.

Hey, maintainer(s) of eXon/videojs-vimeo!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library eXon/videojs-vimeo is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "eXon/videojs-vimeo",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!

HTTPs check is broken

There are two bugs on line 46. Firstly, document.location.protocol returns with the colon on the end, the check is missing the colon so always fails. Secondly, secure.vimeo.com doesn't work any more, it should always be player.vimeo.com.

To fix: replace line 46 with this:

this.baseUrl = document.location.protocol + '//player.vimeo.com/video/';

Tested and working on one of our production sites :)

Cheers
Tom

Add Event Listener to Video End

Is there a way to add a listener to the end of the Vimeo video play? I've tried multiple ways but cannot seem to fire anything once video finishes playing.

API calls

Hi!

I am using both your youtube and vimeo extentions. They're great. Many thanks for your work.

Youtube works perfect. I can manipulate css through the API calls at play or pause. The API calls with Vimeo do give me a little problem. I call 'm like this

videojs('vid', { "techOrder": ["vimeo"], "src": "https://vimeo.com/" }).ready(function() { <<>> });

The movie is loaded and within the ready function this.play() does work

This however i cannot get the following to work in the ready function:

this.on('play', function() {
$('img.overlay').css('z-index','0'); $('#dark_overlay').fadeIn( "slow", function(){} );
});

nor

this.one('play', function() {
$('img.overlay').css('z-index','0'); $('#dark_overlay').fadeIn( "slow", function(){} );
});

The same code does work for the Youtube video's.

});
Should this be possible at all with your code? Or is Vimeo just more complex than YT?

Thanks again for your most helpfull work

Joera

Is there actual example online?

for now local example did not work for me.

video won't play on mobile devices

I tested on desktop(chrome and safari), both of them worked well. However, my iphone 6 and android Mi can not play the video. I can see the poster picture and big play button. but nothing happens when I click play button in my iphone 6. Things are slightly different on android. The default video player pops up when I click play button, but nothing can be loaded, keeps 0%. And my youtube videos works well both on desktop and mobile with videojs-youtube. My videojs is Video.js 5.8.0
here's my code:
in html:

 <video
   id="video-player"
   class="video-js vjs-default-skin"
   controls
   data-video="vimeo"
   data-setup='{ "techOrder": ["vimeo"], "sources": [{ "type": "video/vimeo", "src":      "https://vimeo.com/146820026"}] }'
   >
</video>

in coffeescript

$('#video-btn').click ->
      $('#video-player').width('100%')
      $('#video-player').css({
        'min-height': $('.video-placeholder').height(),
      })
      videojs('video-player').load()
      videojs("video-player").loadingSpinner.hide()

how to change video from vimeo to local video (mp4)

i'm new to programming and i really need help on how to dynamically switch vimeo video to local video if vimeo video is not working. here is my code http://jsfiddle.net/ksonia90/zxkz71k7/26/
please help :)

Broken video positioning and controls settings

i'm setting the options this way:

{
  "techOrder":["vimeo"],
  "sources":[{"type":"video/vimeo","src":"https://vimeo.com/25333478?ref=fb-share&1"}],
  "vimeo":{"ytControls":0}
}

When i start a video what happens is this;

The positioning is broken, and vimeo controls are still there.

Also if i switch on full screen, the vimeo video size stays the same, and the effect is pretty ugly:

Can anyone please give some hint?

Demo not working - Jsfiddle Sample

The demo is not working on local, can u provide a jsfiddle demo.
Youtube work but not the vimeo sample

http://jsfiddle.net/swinginsam/NWbUG/

Can't make it work.

The sample doesn't work. And then, now I see it works in Chrome and Safari. But not in the latest Firefox on Maverick OS. Rats.

doesn't work

Hi,
i've this error on loacl and online
'vjs is not defined'

thanks

Vimeo in videojs is broken for me

A quick list:

• When I change volume with the volume() setter I get: "Cannot set property 'volume' of undefined"
• It does not show any controls, only a vimeo playbutton and fullscreen button. I have read that I can't hide the vimeo controls, but atleast give a progressbar or something.
• Does not start muted when given the muted option, it can be muted however, with the muted() setter

I could split these up and make several issues, but maybe they are all connected somehow?

Events won't work on IE8

Hi!
I wanted to play and pause vimeo videos with videojs events (play(), pause()).
Everything works fine on chrome, firefox, opera, safari and ie 9-11. But on ie8 these events won't work for vimeo.

Please help!
Thanks

Video displayed outside of player frame

I've just discovered an interesting bug: if I set fluid: true in videojs data-setup options, the Vimeo video displays outside of the videojs player frame, like this:

This doesn't happen with YouTube videos when fluid: true is set.

Play/Pause button stop working

Hi.
When using loop option as true, during the first playback every thing works as expected ( video.js play/ pause button is working ), but after the first loop video.js play/pause button stop working.
I am using Vimeo and Youtube plugins but this is only happening with Vimeo videos.
Mute/Unmute button is working on every situations.
Also is it possible to hide vimeo control bar?
Thank you.
UPDATE: This is happening in Firefox 40 and IE 11 but not in Chrome 44, Safari 5.1.7 and Opera 31
Really appreciate all the help.

errors at re-initializing vimeo videos after dispose()

With dynamical creating, disposing video elements, it works for the first time. but it throw me an error at the second initialization. Uncaught TypeError: Cannot read property 'vdata1458668645722' of undefined at function getElData(el) { in video.js.

$('#video-btn-vimeo').click ->
      video = '<video id="video-player" class="video-js vjs-default-skin vjs-big-play-centered"></video>'
      $(video).insertAfter $('.video-placeholder')

      $('#video-player').width('100%')
      $('#video-player').css({
        'min-height': $('.video-placeholder').height(),
      })
      videojs 'video-player',
        controls: true,
        techOrder: ["vimeo"],
        sources: [{
          type: "video/vimeo",
          src: $('#video-btn-vimeo').attr('data-video'),
        }],

$('#video-close-btn').click ->
      videojs('video-player').dispose()

First use the code above to create an video, then dispose(), then create again. error comes.
video-youtube works well. No luck for vimeo

Getting errors for the vimeo plugin.

The vimeo plugin works well so far. But it gives me a console error when loading the Video. I think it is some change at the Vimeo api. I can't figure out what it is exactly. The variables are kind of cryptic to me.

Cant get it to work

@eXon sorry I realised I commented on a closed issue, so I created this one.

I'm also having a lot of problems with this plugin not working; I'm using VideoJS version 5.7.

Your Youtube plugin works flawlessly, but using the exact same code to instantiate a vjs/vimeo player just breaks constantly. It looks like maybe some kind of a race issue? I'm getting this error:

TypeError: a is undefined - video.min.js (line 22, col 3904)
TypeError: a is undefined video.min.js (line 22, col 3981)

Sometimes I get lucky and it loads, but most times it doesn't, especially if I dynamically create a

Would you be willing to help us resolve this? We're desperate to get this working by next Friday...

Android Fullscreen

I'm using the plugin to play videos on an Android device, I understand that it is not possible to play the videos inline, only fullscreen. I can live with this but if you interrupt the video and close the pop up/out the video holder is black, if you tap the video it plays but only sound works.. no video.

Thank you.

Update for VideoJs 4.5

I'd like to ask if there will be an update for videoJs Version 4.5 for videojs-vimeo.

Thanks

Vimeo Parameters

The Vimeo Parameters link is not working: https://developers.google.com/vimeo/player_parameters?hl=en#Parameters

What are the options for ytcontrols?

Is there another link that has this info?

tag releases

hi, can you tag releases so it's easier to use this as a dependency? thanks!

Plugin Dosen't loading

Hy!
I tryed this plugin, but just dosen't load the video js.
When you type a Vimeo url, you get the default vimeo player.
Try it with test html, becouse this also doen't work.