How do I place a video on my page where users can play it?

Need help
1

I’m creating an online course app where users are thought by video, how do I go about uploading a video to my page for users to play?

Screen Shot 2016-09-27 at 13.07.46.png1396×933 157 KB

2

I would highly recommend using an existing video hosting service, my preference would be Youtube. They have all the encoding and player issues worked out really well, plus added features of being able to cast the video, etc. One of my bigger pet peeves is when a website uses their own video player and it doesn’t buffer right, etc. Just let me watch the video.

If you’re concerned about people seeing videos that are behind a paywall, you can use the unlisted/private options.

3

If I make the video private on my youtube, on my site when the video pops up I am unable to view without logging into my account, do you know anyway that I can make the Youtube video private and still be able to view it on my site because its linked with its unique code that no-one has access to anyway?

4

Private requires an individual invite. Setting it as unlisted will prevent it from being shown in Youtube search results, but will allow anyone with the link to view it if they wish.

I’m still new at Bubble, so they may have a video viewer that works really well. Unfortunately, I can’t help you further if they do yet.

5

Thanks so much for your help!!

6

There aren’t many options here. The simple truth is that video hosting is expensive. In fact, the Flixo project of the Build Your Startup course goes over how to build a subscription video platform (like Netflix) and states a bit about the video limitations at this point in time.

1 Like
7

I used the HTML element then added:

<video width="320" height="240" controls>
  <source src="<source URL>" type="video/mp4">
Your browser does not support HTML5 video.
</video>

into it. Then used dynamic text for the <source URL>.

In our app users upload their own video so we had a system for adding the file url into the source URL. But in this case you can build your own admin system for uploading your videos and using dynamic data to get the correct source URL for the video player. I recommend to use only MP4 videos, since other types are not supported by all browsers.

If each lesson is a static page, you can just upload the video file directly into Bubbles database and copy the file’s URL then paste it into the correct video player without having to use dynamic text. With this method you can also use any other video hosting service as long as you can get a URL where the video file is located.

You can read more about what you can do with the HTML video tag here http://www.w3schools.com/html/html5_video.asp

Unfortunately at the moment you cannot get data from the HTML element itself, so a lot of the cool stuff, like getting video duration or current play time isn’t ‘easily’ possible in Bubble yet.

3 Likes
8

I’ve done this with one of my apps as well. Works pretty well for straight-forward uploading and playing back.

1 Like
10

How do you upload the video directly into Bubble’s database?

1 Like
12

Hi there,

you would use the File Uploader Element and save the video under a field of type “file”.

Hope this helps.

Julius

1 Like
13

Hello can you please explain how you used it .