vimeo / player.js Goto Github PK
View Code? Open in Web Editor NEWInteract with and control an embedded Vimeo Player.
Home Page: https://player.vimeo.com/api/demo
License: MIT License
Interact with and control an embedded Vimeo Player.
Home Page: https://player.vimeo.com/api/demo
License: MIT License
If I create a new player object for a domain protected video, but the user's browser does not send the referrer header or an incorrect one, the player should fire an error event telling me that the video cannot be played due to an 403 error.
we do a
var player = new VimeoPlayer(elementVideoPlayer, {id: <ID OF DOMAIN PROTECTED VIDEO>});
player.on('error', function(data) {
console.log('error', data);
});
The player displays correctly "Sorry Because of its privacy settings, this video cannot be played here.", but no error nor any other event is fired that allows me to detect and react to this problem.
see above
The code below is called via an event handler on the player, then tries to do something, perhaps simply writing to the console, once it is sure that the player has been paused. However, in the case where it is trying to pause the player and then run a callback, the code in the nested promise is never run.
player
.getPaused()
.then(function (paused) {
console.info("Was player paused?: " + paused);
if (paused) {
// Do something...
console.info("Doing something interesting.");
} else {
// If the player is not paused, pause it first, then do something...
console.info("Pausing player");
player
.pause()
.then(function () {
console.info("Doing something interesting post-pause - this never runs");
});
}
});
"play" event works fine for me:
player.on('play', function() {
console.log('played the video!');
});
but can't catch "ended" one:
player.on('ended', function(event, playerId) {
debugger
console.log('ended the video!');
});
This may be related to #45
This is a bit convoluted so please bear with me...
When a page loads both the Facebook and Vimeo player APIs a Vimeo video contained in a DIV with style "display: none" will not fire the "loaded" event.
If the container DIV for the Vimeo player does not have the "display: none" style the "loaded" event will fire.
If the page only loads the Vimeo player API the "loaded" event will fire.
In all cases the equivalent "loaded" event fires for Facebook.
Sorry, I can't use codepen because the Facebook API won't load in it. Here are two gists that show the problem.
From the documentation:
Elements with a data-vimeo-id or data-vimeo-url attribute will have embeds created automatically when the player API library is loaded. You can use the data-vimeo-defer attribute to prevent that from happening and create the embed at a later time.
How can I create the embed at a later time using data-vimeo-defer
?
And how would that be different from simply writing the following code, without using data-vimeo-defer
?
<div id="59777392"></div>
var options = { loop: true };
var player = new Vimeo.Player('59777392', options);
Hello there!
Thank you for this new API, it looks much better than Froogaloop.
However, we have some issues with ended
/ finished
event. It's not called for our video. But, if we use some other public video from Vimeo it works OK. Maybe there is some issue with privacy or embed settings? It was working some time ago and was broken recently. We are experiencing this problem for both API versions of Vimeo.
For now I have to use:
timeupdate: function (event) {
if (event.percent >= 0.95) {
// Video finished...
}
}
Also, the last called timeupdate
event has percentage around 0.99
, it's never called with 1.0
, maybe it's somehow related to ended
problem.
Thank you!
I'am using loadVideo but he dont work:
player.loadVideo(27855315).then(function(id) {
console.log("work");
});
He don't switch iframe src.
Every other event seems to be working (although I haven't tested them all), for some reason I cannot get "timeupdate" to work.
player.on('timeupdate', function(data) {
//should see some activity here
});
player.on('timeupdate', function(data) {
//ignoring everything inside
});
See codepen below:
http://codepen.io/simpson77/pen/YXowmy
The es6-collections library has been deprecated as it is not actively maintained. Is it being planned to be replaced by the core-js library or something similar?
Using responsive: 1
as an option should not change any functionality in the library.
None of the getters or setters work and you can't listen for events.
I was looking for a cool module for using Vimeo with AngularJS but I didn't find nothing cool.
So, I have been working on this module for AngularJS: iron-vimeo-embed Size: 1.47Kb minified without gzip.
I really want an official support for AngularJS, I can work with you if you want. But I want a really cool official module for AngularJS.
Events should continue to work if the iframe src changes. At lease provide a way to rebind the player to the iframe.
Events cease to function
Using Chrome Version 51.0.2704.84 (64-bit)
http://codepen.io/anon/pen/mEOGZd
Click on the "background" video. It will change the src on the video (same video but removes the background parameter from the url). After the src change, the player is bound to the iframe, yet the events don't work. If you completely remove the iframe element from the page, and re-add it, it will work.
Hi!
I have an application that serves Vimeo videos as advertising through DoubleClick For Publishers. So I have the Doubleclick's iframe and inside of it the Vimeo's iframe.
I know that this is a rare case, but I need some help...
It seems that the Vimeo.Player constructor doesn't accept an element that is inside of other iframe.
The player.js returns this error message:
You must pass either a valid element or a valid id.
Here is a fiddle that reproduces the error.
To make this error reproducible, I had to create another fiddle with just the Vimeo's iframe and use it on the <iframe>
tag of the first fiddle. I know that this is confusing, but feel free to ask anything.
Thanks!
The library should work after optimizing using the Require.js r.js optimizer.
Works fine during development when loaded directly via Require.js, but after optimizing code into a single file using r.js, the following error is thrown:
Uncaught Error: Mismatched anonymous define() module: function () { 'use strict'; ...
Process this library with r.js.
After some digging, it seems the issue is caused by the nested anonymous define()
that Rollup creates when including the native-promise-only
module. Manually deleting this code and re-running the optimizer fixes the error (but obviously this isn't a real solution).
The example code in the docs for loadVideo shows catching a 'PrivacyError' when loading a password protected resource.
A catch handler never gets called
If you try in the demo app to load a password protected resource it loads and displays the login screen as expected but the log shows no error output, and a breakpoint on line 409 of api-demo.js also never gets hit.
Tried it in my own local code first and had same issue. Although the rather than display the login it displays 'unhandled privacy error'.
This also raises another question, there seems no way to create a player without first setting a video url and therefore loading it, as the player on instantiation checks the iframe for a valid source and blows up if it doesn't find one. So at the moment I have to initially set a url to a small dummy video to get the player instantiated and then to allow me later to then call loadVideo to load the actual video I want.
In my case, player.getPaused()
i expected to return true
or false
, or player.getVolume()
to return the volume value.
Returns a promise that i can't seem to get the values from.
console.log(player.getPaused() )
console.log(player.getVolume() )
I understand that "setters" are actionable, but "getters" should only get values i think. Is there a way to just get the value?
Thanks!
It actually works as documented. So this is just a question I guess. I would like to be able to find the furthest time played before seeking. The reason is so that I can insure users may not seek forward, only backward.
When seeked happens, timeupdate also occurs (per the documentation). But this is causing me trouble figuring out the time right before the seek happens so I can be sure not to seek past this point.
I have come up with a solution, but it seems like there must be a better way.
var curtime = 0;
player.on('timeupdate', function(data) {
if(data.seconds < curtime + 1 && data.seconds > curtime) {
// Above is where I hack it. I only update the current time if the timeupdate is less than a second ago (therefore proabaly not seeked to). This stops the function from just updating curtime to the seeked time. But I feel it's not the best way.
curtime = data.seconds;
}
});
player.on('seeked', function(data) {
if(data.seconds > curtime) {
player.setCurrentTime(curtime);
}
});
I added Vimeo player in website using Vimeo Player API,
it works very well in web browser, but it does not work in Chrome WebView.
I need some help!
This may be related to #45
This is a bit convoluted so please bear with me...
When a page loads both the Facebook and Vimeo player APIs a Vimeo video contained in a DIV with style "display: none" will not fire the "loaded" event.
If the container DIV for the Vimeo player does not have the "display: none" style the "loaded" event will fire.
If the page only loads the Vimeo player API the "loaded" event will fire.
In all cases the equivalent "loaded" event fires for Facebook.
Sorry, I can't use codepen because the Facebook API won't load in it. Here are two gists that show the problem.
Hi there! It's gonna be possible to change the video quality? This would be greatly appreciated.
When you set the current time using player.setCurrentTime
to the end or close to the end, it should set the video status to ended and fire timeupdate and ended events.
The player seems to stall without firing any meaningful events, and further setCurrentTime calls don't do anything, until the user interacts with the player again.
Go to https://player.vimeo.com/api/demo. Set the current time to 61.86 (or whatever the video's actual duration is). The video will stall without firing any meaningful events.
I'm trying to import this library into a React component which gets server rendered first then registers client side after. So essentially i need the same React component to work in the browser and in Node. This is causing issues in Node because i get Error: Sorry, the Vimeo Player API is not available in this browser.
.
The Javascript API should allow Node as a browser for some behavior. Even if the API does not support many functions in Node, the API should still allow you to at least import it without errors.
When trying to import this library server side in Node I get Error: Sorry, the Vimeo Player API is not available in this browser.
Import in any file server side.
I love that Vimeo has made the JavaScript Player API open source; thank you! Are there any embed options to start/end a video at certain second values (ex: start at 60 and end at 180)? I would love to be able to specify when a video starts and when it ends.
we load a video into the player and, without starting it explicitely, seek into it by clicking on the player timeline (as documented correctly, this automatically starts playback). As soon as the video reaches the end, we expect an 'ended' event to be fired AND the play button to change back to the 'play' icon.
'ended' event is not fired and the play button keeps in incorrect 'playing' state, i.e. displaying the 'pause' icon, although no video is playing anymore.
see above
Hey all,
I implemented several vimeo players on a website with the help of this library, but I am having some issues. I setup a demo codepen to show you the issues.
I expect two iframes to be inserted into those divs by the automatic embed initialization.
The first only has a data-vimeo-url attribute and nothing else. I expect the automatic initialization to find this element and initialize it with the given vimeo video url.
The second one also has a id attribute (not data-vimeo-id), because I wanted to use this as a hook to initialize the player myself.
The initialization on the first div throws the following error:
An id or url must be passed, either in an options object or as a data-vimeo-id or data-vimeo-url attribute.
The initialization on second first div throws the following error:
TypeError: “playertwo” is not a valid video id.
Just run the following codepen: http://codepen.io/anon/pen/zBPzJP
I tested this on latest Chrome and Firefox on Windows 10.
Cheers!
It should continue to think that it's embedded in my domain.
Thinks it's embedded in player.vimeo.com
I have privacy set up to only allow videos to be embedded in certain domains.
When I load the player initially using the following code I don't see an issue.
this.player = new Vimeo.Player('videoContainer', {
id: videoId,
width: 800,
height: 450,
autoplay: true
});
However, when I load a new video into the existing player I am told that I have to change the privacy settings so it can be embedded on player.vimeo.com
this.player.loadVideo(videoId).then((function(_this) {
return function() {
return _this.player.play();
};
})(this));
First,
is background=1
deprecated?
I have a PRO account and even when I disable ALL embed preferences, you can still see a pause button when you hover over a video, which makes it annoying if you want to have a silent, short, and looping video in the background of your header to your homepage.
However, I can still use background=1
in the iframe source and have it go away. But that option has been removed from the official documentation and it's not an option in player.js
I have this crappy work around but I'd rather not do this
var player new Vimeo.Player('elementId', options);
player.ready().then(function(){
var src = $('iframe').attr('src');
$('iframe').attr('src', src + "&background=1");
});
Please don't deprecate/remove this feature!!
And please add it as part of an option in player.js!
thank you
Hi there,
there's a way to hide control bar using player.js?
Any help would be appreciated!
Na86
Hi,
I see the method to getTextTracks()
, but there is no setTextTrack()
. How do you set a track after you make a selection? I'm just building out a custom form with player controls, and tracks will be radio controls.
Thanks.
.then()
should fire, or .catch()
if there's an error
video loads, but promise never resolves.
codepen link: http://codepen.io/anon/pen/jrabwY
<iframe id='player1' src="https://player.vimeo.com/video/76979871?api=1&player_id=player1"></iframe>
var player1 = new Vimeo.Player('player1'); // or $('iframe')[0]
player1.loadVideo(12345).then(function(id){
// this never fires
console.log('iframe player loaded: ', id);
}).catch(function(error){
// and neither does this
console.error(error);
});
I expect player.on('ended') to be fired when the video ends, as seen in the readme of the repository
nothing happens. however if you use player.on('finish') it works.
you got it i guess :)
A setCurrentTime() in promise of loadVideo() should buffer and play a paused video directly at the correct time.
Using setCurrentTime() in the promise of a loadVideo() plays the video at 0.00 for a brief moment before jumping to the correct time. The player is paused before a loadVideo(). No combination of autopause=1 or autoplay=0 can stop this from occurring. Consecutive setCurrenTime() commands for the loaded video play at the correct time directly and smoothly.
Add setCurrenTime() to the promise of a loadvideo(). You can also reproduce this on the demo page. Enter an ID in the loadvideo field. Enter any time other than 0 in the setCurrenTime field. Press loadvideo button and immediately press the setCurrentTime() button.
Tried lots of solutions. If anyone has a workaround for this problem, I'd be very thankful.
When video ends the 'ended' event should fire according to the documentation
The event doesn't fire when video ends, complete example code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://player.vimeo.com/api/player.js"></script>
</head>
<body>
<div id="made-in-ny"></div>
<script>
var options = {
id: 59777392,
width: 640,
loop: true
};
var player = new Vimeo.Player('made-in-ny', options);
player.setVolume(0);
player.on('play', function() {
console.log('played the video!');
});
player.on('ended', function() {
// callback not called on end
console.log('video ended!');
});
</script>
</body>
</html>
I would like to be notified if the player starts buffering / stops buffering, to be able to display a custom loading indicator. So we need an event to notify that buffering has started (because of a user action or limited bandwidth) and ended. A matching property getter would be nice, too.
It is not possible to get "buffering" state information at the moment. A "seeked" event is available, but it appears to be fired after buffering has ended. Using the player API example page, I'm not aware of any event or property that tells us the player is in buffering state, as opposed to playing or paused state.
See current events documentation / use sample player.
triggering one video with player.play() should pause the other by default
other video did not pause. this only seems to work when interacting with the actual vimeo UI, not using player.play()
Expected Behavior
Private and domain locked video should not play in api demo page.
Actual Behavior
Any private and domain embed locked video plays when id pasted in https://player.vimeo.com/api/demo
Steps to reproduce
Paste any private and domain locked id into the ID field of api demo page
This should be a top priority for a fix
player.play() should cause the video to play.
the video does not play on iOS. it works fine on desktop
$container.on("click", function() {
player.play();
$container.addClass("played"); // hides the overlay
})
Being able to send multiple events to the on() function to reduce copy pasted code.
Unable to do it as the function apparently only supports one event as argument.
Asuming jQuery & player.js:
var player = new Vimeo.Player($('#video'));
// Works
player.on('play', function() {
// doSomething
});
player.on('pause', function() {
// doSomething
});
// What I'd like to have
// like jQuery
player.on('play pause', function() {
// doSomething
});
// as an array
player.on(['play', 'pause'], function() {
// doSomething
});
My naive approach to adding this functionality (with an array) would be to modify the method as follows:
/**
* Add an event listener for the specified event(s). Will call the
* callback with a single parameter, `data`, that contains the data for
* that/those event(s).
*
* @author Brad Dougherty <[email protected]>
* @param {array} eventsName An array containing the name of the event(s).
* @param {function(*)} callback The function to call when the event(s) fire(s).
* @return {void}
*/
on(eventsName, callback) {
if (!eventsName) {
throw new TypeError('You must pass an event name.');
}
if (!callback) {
throw new TypeError('You must pass a callback function.');
}
if (typeof callback !== 'function') {
throw new TypeError('The callback must be a function.');
}
for (var i; i < eventsName.length; i++) {
const callbacks = getCallbacks(this, `event:${eventsName[i]}`);
if (callbacks.length === 0) {
this.callMethod('addEventListener', eventsName[i]).catch(() => {
// Ignore the error. There will be an error event fired that
// will trigger the error callback if they are listening.
});
}
storeCallback(this, `event:${eventsName[i]}`, callback);
}
}
Disclaimer: I didn't test this nor check how the other functions called by this one work.
We need the fast forward function to be inactive while pause and rewind to be active.
iOS 10 allows HTML 5 autoplay of silent videos
The Vimeo player should behave respectively.
Neither autoplay nor script-triggered play calls will play the video.
To be able to bundle assets containing the player.js package with browserify.
Browserify is complaining that it cannot find the module @vimeo/player.
Hi, I'm wondering if there's a method to invoke the video to play full screen? I don't see this in the documentation.
Thanks.
I expect the player to respond and work as normal even when the video is invisible. In our case, we want to seamlessly start a video for our user at any set point in time. We do not want to show the video iframe already when the video is still being loaded. Therefore we move the video off screen to a left position of -10000px and as soon as the video is sufficiently loaded, we move it into view.
The API does not respond at all when the iframe is off screen.
This seems to be an issue specifically in Google Chrome. Tested on version 52.0.2743.116 on OS X. It works fine in Safari and Firefox
On a mobile device, a Vimeo video with background mode on does not play, which is great. The trouble is, I cannot see any way to determine if the video will be played or not, using the existing methods/events.
I currently display fallback content, then on the play event hide it. It'd be nicer to determine whether the video is going to play or not, then display the fallback content if required.
Does the API have a method I can use to extract the ID from any Vimeo URL? I ask because I want to use the loadVideo
method to update an existing player, but it only accepts an ID. However I only have a video URL to work with rather than a pure ID. Alternately, if the loadVideo
method could be updated to accept a URL or an ID, that would work too. However a separate method would be most useful since it can be used in other places.
Passing in width
and height
options as 100%
should set the iframe width
and height
attributes to 100%
The iframe width
and height
attributes are set to just 100
, which is interpreted by browsers as 100px
new Vimeo.Player(90509568, {
width: '100%',
height: '100%'
})
Produces something like the following:
<iframe src="https://player.vimeo.com/video/90509568" width="100" height="100"></iframe>
During development it's much easier to work with non-minified assets, since minified code is a complete PITA to debug.
Also, installing this library via Bower results in the following warning:
bower invalid-meta The "main" field cannot contain minified files
I should be able to use /dist/player.js
for easier debugging during development.
/dist/player.js
doesn't exist.
$ bower install vimeo-player-js
Instantiate a Vimeo.Player
and call .play()
inside a touchstart
handler (user gesture) should play the video on touch devices:
var options = {
id: 59777392
};
var showVideo = function() {
var player = new Vimeo.Player('player', options);
player.on('play', function() {
console.log('played the video!');
});
player.play();
};
document.querySelector('#play').addEventListener('touchstart', showVideo);
Video does not play (hides the poster/title and show loading indicator though) and console output these warnings/errors:
player.js:8 Failed to execute 'play' on 'HTMLMediaElement': API can only be initiated by a user gesture.
player.js:14 'HTMLVideoElement.webkitSupportsFullscreen' is deprecated. Please use 'Document.fullscreenEnabled' instead.
player.js:8 Uncaught (in promise) DOMException: play() can only be initiated by a user gesture.
player.js:13 'HTMLVideoElement.webkitEnterFullscreen()' is deprecated. Please use 'Element.requestFullscreen()' instead.
which suggest that you try to play a video without any user interaction.
Tested on a Nexus 5 Android 6.0.1 on Chrome 51:
This [stackoverflow answer](http://stackoverflow.com/a/32571967/1527470] related to a similar issue with audio) suggest that "even after a user gesture (such as click) it waits for 1000ms and if no sound was played it throws the exception above."
Perhaps a Promise is taking too long to resolve?
Constructor runs as expected
Uncaught TypeError: Expecting a function in instanceof check, but got undefined
window.jQuery = undefined
new Vimeo.Player(getPlayerElement())
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.