It may seem like a daunting task to go against streaming giants like Netflix and HBO Go, but it doesn’t hurt to find out how video-on-demand web apps are developed.
Nowadays, with no-code platforms like Bubble, digital products that help you stream your favorite movies and shows no longer feel like impossible tasks. Quite oppositely, business ventures like this should even be entertained. If you’re interested in building an app that resembles Netflix or any VOD empire, give us a call and we’ll help you out!
For now, let’s proceed to the second part of our tutorial. For this particular blog post, we’re taking off from the previous article that tackled how to establish your database, how to upload content, and how to display dynamic media.
Let’s start!
How to send data to responsive pages
When a user picks a media content to preview, we’ll have to show more information about the movie or series, much like how Netflix does it.
In the repeating group, we can develop events reliant on a user’s action in every row. This feature will come in handy when developing navigational features throughout your VOD web app.
Now, since we’re cloning Netflix for this blog post, your product’s homepage will need to display a feed of every media’s thumbnail. That being the case, we’ll also have to add supplemental data like the title and a short description of each media item. This supplemental data will be established on your app’s “content preview” page.
To lead a user here, we’ll have to create a navigational workflow that a user can trigger after they click on a thumbnail image.
You’ll then have to include supplemental information to this page, enabling Bubble to determine which specific media content to showcase. Simply put, the “current cells content” is where you’ll pull data from to successfully display a little preview.
Establishing dynamic content for the preview page
When you send data to the preview page, you can quickly source the relevant data and display the relevant information for every media item.
Like everything else in your workflows, you’ll have to make sure that the data property you’re sending matches the destination page type you’re configuring. For this context, we’ll have to establish a “content property” from the “preview page.”
By determining the content type of a page, the platform can quickly classify and send appropriate data to and from existing elements.
Once that’s covered you can begin supplementing dynamic content into the fields that preview data about certain media content.
Searching for movies and shows on the platform
From the homepage, you can also lead users to specific media content by allowing them to search for a title. This can be achieved when we integrate the search navigation feature.
Found in many web apps and popular social media platforms, search bars are terrific for connecting users to whatever it is they’re looking for.
When you’ve integrated the search bar to your VOD web app, establish its parameters to search by the title data field and the content data type. This ensures that all entries are indexed, and will even recommend suggestions while users type their searches—much like how Google does it.
To lead a user to the appropriate content preview page, configure your settings by building a new event that a user can trigger when an element’s value is altered.
As expected, this element will be the search bar in this specific context.
You can move forward by building a navigation event, establishing the preview page as your destination page. What this does is send the data source from the current value of the search box.
Adding content to a saved list
We know this concern all too well—the problem with today’s streaming platforms is that there are often too many movies and shows to watch and not enough time in a day. That said, an “add to watch list” capability lets users save the content they wish to watch at a sooner date.
To make this feature happen on your VOD web app, we’ll have to develop a workflow that a user can trigger when they click the “add to my list” option on the preview page.
Here, we’ll choose “make changes to a thing” and select “current users watch list” from the “current pages content.”
When a user is finished adding titles to their list, you can include on your homepage another repeating group. In this scenario, however, you’ll need to display content from a watch list as your data source.
Playing movies and shows on your platform
What good is a streaming media business if you can’t watch movies or shows? The last feature we’ll build is a video player that lets you stream the content you uploaded.
There are two ways you can make this happen on Bubble:
Firstly, the faster and easier option is to optimize the existing video element available on the platform. On your preview page, you can easily embed a video player. The said video player can seamlessly integrate with streaming apps like Vimeo and Youtube, keeping you from the hassle of manually uploading mp4s to your database. As the data source of your video ID, you can opt for adding a Vimeo or Youtube link.
Secondly, you can turn to third-party plugins available on the platform such as the HTML 5 Video Player plugin.
And just like that—without having to code at all—you already have a VOD business!
Do you have similar web apps you’d like to build? Check our courses to learn more about building your app.
Schedule a call with us today!
(source and screenshots from: https://bubble.io/blog/build-netflix-without-code/)
