End Vimeo videos on last frame or image - Vimeo SDK

I am showing Vimeo videos on my Bubble app, but I need them to end on the last frames. Right now, when a video ends, it goes back to the 1st frame. Vimeo doesn’t offer the option to end a video on the last frame. Vimeo does offer the option to add a custom image for the end screen. When a video ends, it display this custom image. I am using this option as a hack to end a video on the last frame when the last frame is added as the custom image. My videos are dynamically generated and uploaded to Vimeo so the adding the custom image needs to be done with API. I can’t find an API for this.

Vimeo has a player SDK that has an end state of a video event. When the video ends, I would like to hide the video and display an image (the last frame extract). I need help to use the SDK in Bubble to do this.

Options to end a video on last frame

  • Native support on Vimeo (not available)
  • API to add a custom image for end screen on Vimeo (not found)
  • Scripting to add a custom image for end screen on Vimeo with Puppeteer? (not sure if possible)
  • Trigger end of video event and display an image on Bubble (is it possible?)

Vimeo API
https://developer.vimeo.com/api/reference

Vimeo SDK
https://developer.vimeo.com/player/sdk/basics
https://developer.vimeo.com/player/sdk/reference#get-the-ended-state-of-a-video

I’m surprised this is not possible with their API, but that definitely seems to be the case…

  • Trigger end of video event and display an image on Bubble (is it possible?)

This might be the simplest/best option… just save the relevant image on your Video datatype in the Bubble database, and when the video ends show the image.

1 Like

The end of video event is a good option, but it requires the SDK. I don’t know how to use it with Bubble. :sweat_smile:

Ah, ok (I assumed you were already using it)…

It’s fairly simple to set up, if you have some basic knowledge of using JavaScript with Bubble, and have the time to read through the documentation…

But if not, there is a Vimeo plugin that uses the SDK and exposes the key events (including video ended)… Vimeo Video Player Plugin | Bubble

I haven’t actually used it, but it might be worth checking out if you don’t want to set up the SDK yourself…

Thanks for the reply! You might have saved my day. :grinning:
I don’t know how to use SDK. I didn’t realize that there is a Vimeo pluggin and it seems to support end of video event. I will give it a try.

1 Like

Great…

But just in case you don’t want to pay for the plugin, and would rather do it yourself, I’ll outline the simple process below (you’ll need the Toolbox plugin for this):

(here’s a demo page I set up showing using the SDK with an event listener set up to trigger a workflow when the video ends, so you can see how simple it is: Vimeo SDK (bubbleapps.io)

1 - Add an html element to the page and add the following script (if you’re on a paid plan you can put it in the page html header instead):

<script src="https://player.vimeo.com/api/player.js"></script>

2 - Add a group element to contain the video player and give it an element ID attribute: video

3 - Add a JavaScript To Bubble element to your page, give it the suffix videoComplete and check the ‘Trigger Event’ box

4 - Run the following (example) JavaScript when the entire page has loaded (this will initialize the player and set the on.ended event listener):

  var options = {
    id: '336638047',
    responsive: true,
    playsinline: false,
    autoplay: true,
    autopause: false,
  };

  var videoPlayer = new Vimeo.Player('video', options);

// Mark as complete when video ends

var onComplete = function(data) {
   bubble_fn_videoComplete();
};

videoPlayer.on('ended', onComplete);

5 - Then just run a workflow when the JavaScript To Bubble Event triggers, and show your image, hide the video, or do whatever else it is you want to do (such as mark in the database that the video is complete etc.)

3 Likes