Player.js: loop: false has no effect when background: true

[Leglaw]

Expected Behavior

Setting loop: false have an effect regardless of background: true

Actual Behavior

It loops.

Steps to Reproduce

https://jsfiddle.net/p7daL424/

[Leglaw]

This seems relevant:
https://help.vimeo.com/hc/en-us/articles/115011183028-Embedding-background-videos

[rebecca-sich]

Hi @Leglaw, the actual behavior is what is expected. As you saw in the help link, background inherently causes the video to loop and therefore will disregard loop:false. Right now we have no plans to change that behavior.

However, we are curious what would you like the behavior to be. If loop:false and background:true, after the video plays back would it just be a black screen in the background or the last frame?

[callmephilip]

Just wanted to point out a side effect of this behavior: ended event does not fire for background videos

[fisherinnovation]

Thanks @callmephilip - This is also logged in the documentation https://github.com/vimeo/player.js#ended

[Leglaw]

We want to achieve a subtle zoom-in motion movement with a background video, leaving it zoomed-in on the last frame.

I got around the constructor ignoring the loop: false option by setLoop(false) directly after that.

Ultimately, the only way I've found to achieve the effect we're wanting is to respond to timeupdate and pause the video as close to the end of the video as possible, which involves trial and error and testing on many browsers / computers.

[csymlstd]

This behavior would be fine if the rest of the player would operate as it should. The progress event never gives a percentage that will equal 1.0, therefore the loop parameter needs to be supported to allow triggers on the ended event if you're not going to provide the correct percentage.

[rebecca-sich]

@Leglaw This has since been fixed. However, with loop: false it does not remain on the last frame. Instead it depends on what the end behavior of each clip is.
1) For this clip in your fiddle (https://player.vimeo.com/video/47224491) it goes back to the beginning so with loop:false it remains on the thumbnail after playing through once. https://jsfiddle.net/rebeccas/r31uxh6y/

2) For a different clip with a different end behavior, it goes to the videos end screen: https://jsfiddle.net/rebeccas/hm58cLxo/2/

I am closing this issue as it has been fixed but if you haver other questions feel free to follow up.

[blakewilson]

Hi @rebecca-sich , sorry to reply to a closed issue. However, I noticed in the JSFiddle that you linked (https://jsfiddle.net/rebeccas/r31uxh6y/), the video still loops regardless of the loop:false flag with the background:true flag present. Has this behavior changed since Dec 18, 2018?

Thanks!

[JohnnyWalkerDesign]

Our users have been complaining today about a sudden change to our website... I have tracked it down to this issue apparently reverting.

For other users needing the end of a background video to trigger an event, here's a possible solution: It's working OK for us (not perfect, of course):

        player.on('timeupdate', function(data) {
            if(data.percent > 0.95) {
                player.pause();
                window.location.href = "/next-step";
            }
        });

[JohnnyWalkerDesign]

It seems there's a controls parameter which isn't mentioned in the SDK documentation that can be entered now. controls=0 will hide the controls, making it look like a background video, and then the user can change the autoplay and loop options manually.

Be great if there weren't sudden unprompted changes of course!