vimeo / player.js Goto Github PK

Expected Behavior

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.

Actual Behavior

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.

Steps to Reproduce

see above

Steps to Reproduce

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.

Vimeo and Facebook players

Vimeo Player Only

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!

Expected Behavior

Actual Behavior

Steps to Reproduce

I'am using loadVideo but he dont work:

player.loadVideo(27855315).then(function(id) {
console.log("work");
});

He don't switch iframe src.

Expected Behavior

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
});

Actual Behavior

player.on('timeupdate', function(data) {
//ignoring everything inside
});

Steps to Reproduce

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?

Expected Behavior

Using responsive: 1 as an option should not change any functionality in the library.

Actual Behavior

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.

Expected Behavior

Events should continue to work if the iframe src changes. At lease provide a way to rebind the player to the iframe.

Actual Behavior

Events cease to function

Steps to Reproduce

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!

Expected Behavior

The library should work after optimizing using the Require.js r.js optimizer.

Actual Behavior

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'; ...

Steps to Reproduce

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

Expected Behavior

The example code in the docs for loadVideo shows catching a 'PrivacyError' when loading a password protected resource.

Actual Behavior

A catch handler never gets called

Steps to Reproduce

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.

Expected Behavior

In my case, player.getPaused() i expected to return true or false, or player.getVolume() to return the volume value.

Actual Behavior

Returns a promise that i can't seem to get the values from.

Steps to Reproduce

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!

Expected Behavior

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.

Actual Behavior

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.

Steps to Reproduce

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.

Vimeo and Facebook players

Vimeo Player Only:

Hi there! It's gonna be possible to change the video quality? This would be greatly appreciated.

Expected Behavior

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.

Actual Behavior

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.

Steps to Reproduce

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.

Expected Behavior I need to process the video progress duration, percentage,.. for further activities. But not able to reuse it. When trying test by using an alert it is showing the value as undefined/Objet... How can I achieve the same?

Actual Behavior

Steps to Reproduce

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

Expected Behavior

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.

Actual Behavior

When trying to import this library server side in Node I get Error: Sorry, the Vimeo Player API is not available in this browser.

Steps to Reproduce

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.

Expected Behavior

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.

Actual Behavior

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

Steps to Reproduce

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.

Expected Behavior

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.

Actual Behavior

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.

Steps to Reproduce

Just run the following codepen: http://codepen.io/anon/pen/zBPzJP

I tested this on latest Chrome and Firefox on Windows 10.

Cheers!

Expected Behavior

It should continue to think that it's embedded in my domain.

Actual Behavior

Thinks it's embedded in player.vimeo.com

Steps to Reproduce

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.

Expected Behavior

.then() should fire, or .catch() if there's an error

Actual Behavior

video loads, but promise never resolves.

Steps to Reproduce

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);
});

Expected Behavior

I expect player.on('ended') to be fired when the video ends, as seen in the readme of the repository

Actual Behavior

nothing happens. however if you use player.on('finish') it works.

Steps to Reproduce

you got it i guess :)

Expected Behavior

A setCurrentTime() in promise of loadVideo() should buffer and play a paused video directly at the correct time.

Actual Behavior

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.

Steps To Reproduce

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.

Expected Behavior

When video ends the 'ended' event should fire according to the documentation

Actual Behavior

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>

Expected Behavior

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.

Actual Behavior

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.

Steps to Reproduce

See current events documentation / use sample player.

Expected Behavior

triggering one video with player.play() should pause the other by default

Actual Behavior

other video did not pause. this only seems to work when interacting with the actual vimeo UI, not using player.play()

Steps to Reproduce

1. go here http://codepen.io/jmp909/full/dXWwoO/
2. wait for an overlay to turn green (vimeo player ready)
3. click the overlay to hide it and trigger the player.play()
4. click on another overlay to play another video
5. note first video does not pause.

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

Expected Behavior

player.play() should cause the video to play.

Actual Behavior

the video does not play on iOS. it works fine on desktop

Steps to Reproduce

1. go here http://codepen.io/jmp909/full/dXWwoO/
2. wait for an overlay to turn green (vimeo player ready)
3. click the overlay to hide it and trigger the player.play()
4. video does not play on iOS, user has to click play on the actual vimeo play button

$container.on("click", function() {
  player.play();              
  $container.addClass("played"); // hides the overlay
})

Expected Behavior

Being able to send multiple events to the on() function to reduce copy pasted code.

Actual Behavior

Unable to do it as the function apparently only supports one event as argument.

Steps to Reproduce

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.

Here is link on which i'm working

Expected Behavior

iOS 10 allows HTML 5 autoplay of silent videos

The Vimeo player should behave respectively.

Actual Behavior

Neither autoplay nor script-triggered play calls will play the video.

Expected Behavior

To be able to bundle assets containing the player.js package with browserify.

Actual Behavior

Browserify is complaining that it cannot find the module @vimeo/player.

Steps to Reproduce

1. require('@Vimeo/player')
2. Bundle assets via Browserify
3. See "Error: Cannot find 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.

Expected Behavior

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.

Actual Behavior

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

Steps to Reproduce

http://codepen.io/plindelauf/pen/ZOdvkb

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.

Expected Behavior

Passing in width and height options as 100% should set the iframe width and height attributes to 100%

Actual Behavior

The iframe width and height attributes are set to just 100, which is interpreted by browsers as 100px

Steps to Reproduce

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

Expected Behavior

I should be able to use /dist/player.js for easier debugging during development.

Actual Behavior

/dist/player.js doesn't exist.

Steps to Reproduce

$ bower install vimeo-player-js

Expected Behavior

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

Actual Behavior

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.

Steps to Reproduce

Tested on a Nexus 5 Android 6.0.1 on Chrome 51:

• Open https://jsfiddle.net/dmnsgn/yuqndu4f/1/ on a touch device
• Touch 'Play the video' button
• See poster/title fade to the black frame of the video not playing

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?

Expected Behavior

Constructor runs as expected

Actual Behavior

Uncaught TypeError: Expecting a function in instanceof check, but got undefined

Steps to Reproduce

1. remove jQuery from your window: window.jQuery = undefined
2. create a new player with a non-jquery element new Vimeo.Player(getPlayerElement())
3. watch the console blow up