New plugin: Build a YouTube-like site with no code

We’ve released a brand new api.video plugin on the Bubble.io marketplace.

What is the plugin about?
This plugin allows you to use the main features of api.video in your web application (video upload / video player / API calls) without having to write a single line of code.

What is Bubble.io?
It is a no code tool that allows you to build SaaS platforms, marketplaces and CRMs without code.

How to use it?
Here is a tutorial with the main features, taking as an example the creation of a video sharing site (similar to YouTube, but more rudimentary) > Read more about the tutorial

1 Like

I am using this plugin. But the video is not uploading. I can see the progress bar is going at 100% but in the data base nothing is getting added. Can you help?

Hi @shapathdas

Can you give us more details about your app? Are you trying to build the same app as the one created in the tutorial? Do you have any error in the console when you upload the file?

Olivier, ecosystem team

I am trying to develop the exact same app. There is no error on the console. When I am using the Run Slow option in bubble.io to identify the issue I found the upload workflow is not executing.

Hi @ecosystem and @hello please help me.

The fact that the progress bar reaches 100% suggests that the video is being sent, but that it is the next task that is not being executed (saving an entry in the bubble database). Can you check if a video is added to your api.video dashboard (dashboard.api.video) after the upload?

Olivier

@ecosystem Dear Oliver, no the video is not sent to my api.video dashboard. I am using the sandbox and I haven’t subscribed to any plan yet.

@ecosystem @hello Please help me. I have checked all the documentation available on your documentation. Regarding the bubble plugin. I am kind of clueless in this matter, please tell me the next steps.

Hi @shapathdas

Here are some points you can check:

  • do you have values in the “uploadtoken” column of your Users database table, especially for the line matching the user who perform the uploads (the value should start with the “to” prefix
  • do you properly catch the “end” event of the video uploader element in the workflow of your upload page in order to create the video entry in your database once the upload is ended?

I can see one video in your sandbox account, did you upload it manually or has it been uploaded from your bubble app?

Dear @ecosystem

  1. I have uploaded the video manually.
  2. Yes the upload token is getting created.
  3. The end event is not catching. When I am tracing the events, I can see the start event is happening as soon as I am clicking on the “UPLOAD” Button after that I am seeing the progress bar slowly increasing up to 100% but the end event is not happening.
    Screenshot 2022-05-05 at 4.31.06 PM

Dear @ecosystem and @hello

Here is my workflow for the bubble app. It seems “when api.videouploader A end” is not happening. More importantly, the video is not uploading into my account. But the progress bar is showing the video is uploaded.

@shapathdas ,
I think I’ve found the reason why your uploads are failing. You upload token seems to be expired. In order to create upload tokens that never expires, you have to put the value “0” in the ttl field of the token creation step, as shown on the following screenshot.
On our side we will update the tutorial soon in order to make that more obvious, and we will had some checks on the Bubble plugin side in order to have clear errors in that case.

1 Like

Dear @ecosystem and @hello

Thank you very much, it worked.

Thanks for asking and persevering - been struggling with the same issue for the last hour!

1 Like

Hi again, I’ve struck an odd issue in Chrome and Firefox - everything works as expected in Safari. Setup is:

  • An api.video player element (A), with video ID, set not to autoplay, currently showing video controls
  • A native bubble.io button labelled “Play video”
  • A workflow on that play button that triggers the action “play api.videoplayer A”

My bubble play button will not play the video unless the video has already been played using the native video controls.

Any ideas?

PS. A bit of trial and error suggests it’s got something to do with the mute state of the video. ie. If I set the initial state of the video to “muted” in the bubble editor, when I preview the page my “play” button works as expected. When the video is set to “unmuted” my bubble play button doesn’t work unless native video controls have already been used to start the video. Is there a workaround?

Hi @david, it sounds like it’s related to the autoplay policy that was enforced by Google some time ago: Autoplay policy in Chrome - Chrome Developers

Thanks - that does sound likely.

Do you have any good ideas?

The user explicitly clicks a bubble.io PLAY button on my site but presumably because the video is hosted elsewhere that’s not meeting chrome requirements?

Would serving the video off my own domain (I think I remember that this was a new bubble feature?) help do you think?

Or am I able to delegate permission the video frame somehow?

hey @david can you share a link to your site? we will have a closer look.