Video upload

Video update

Normal

large_logo_avatar.webp

medium_logo_avatar.webp

small_logo_avatar.webp

thumbnail_logo_avatar.webp

logo_avatar.webp

api.video

large_api-video-blog-tutorials.png

medium_api-video-blog-tutorials.png

small_api-video-blog-tutorials.png

thumbnail_api-video-blog-tutorials.png

api-video-blog-tutorials.png

Tutorials

NodeJS

no code

Video content is a critical digital media component, offering a dynamic way to share information and engage with audiences. [api.video](https://api.video) provides a robust video on demand platform, where you and your users can have full control over video accessibility. You can enable viewers to download the source videos directly from the api.video player, or from the player of your choice. Improve user experience and drive engagement in your solution by enabling viewers to access videos offline, or give content creators the ability to create backups of their media. It also works the other way around - you have the ability to disable video download functionality altogether and restrict access to the video source file, if that suits your use case better.

This article will explain the ways you can **enable or disable video downloading through the api.video player using our API and the Dashboard**, and will also give you a simple example for creating a custom download button for the player of your choice.

## Download access control with a single setting

api.video simplifies the process of offering downloadable videos by providing a single property that can be set to either `true` or `false` when a video is uploaded. The `mp4Support` property decides whether your viewers can access and download the source file a of a video. When enabled, this feature introduces a download button directly on the api.video player, allowing viewers to download videos with a single click. Setting the property to `false` on the other hand disables the download option, giving creators more control over the distribution of their content.

>The `mp4Support` property is enabled by default for all video uploads.

### Control downloads via the API

Let’s dive into how you can control video downloads programmatically when integrating with one of api.video’s API clients. 

>This example uses api.video’s **[Node.Js API client](https://docs.api.video/sdks/api-clients/apivideo-nodejs-client).** Check out our Libraries & SDKs for a complete list of [available API clients](https://docs.api.video/sdks/api-clients).

Utilizing api.video’s `/videos` endpoint, you can enable or disable downloads for individual videos during upload, or you can update an already uploaded video to change download permissions.

 
Let’s see how this process looks like when uploading a video: 

 

&nbsp;

1. **Create a video object and define the `mp4Support` property**

 

Now let’s see how the same thing looks like for a video that is already hosted on api.video:

>Check out the [API reference](https://docs.api.video/reference/api/Videos) for more details about the `/videos` endpoint, and take a look at the [Video Download guide](https://docs.api.video/vod/video-download)’s examples for other API clients.

### Enable downloads through the Dashboard

When you are hosting your own content at api.video, the Dashboard gives you granular control over every video that you upload. Check out the [Videos page](https://dashboard.api.video/videos) to see a list of all your uploaded videos!

&nbsp;

Let’s see how you can modify download access without writing a single line of code:

 

&nbsp;

1. Open the **Details** view for any specific video where you want to enable or disable download access:

Showing an uploaded video in the Dashboard

medium_Untitled.png

small_Untitled.png

thumbnail_Untitled.png

video_download_1.png

2. On the Video details page, click on the **Update video object** button:

Showing the Video Settings page in the Dashboard

large_Untitled (1).png

medium_Untitled (1).png

small_Untitled (1).png

thumbnail_Untitled (1).png

video_download_2.png

3. Modify the `MP4 support` setting with a simple toggle and click on **Update Video** to save your changes:

large_video_download_3.png

medium_video_download_3.png

small_video_download_3.png

thumbnail_video_download_3.png

video_download_3.png

Once you save your changes, the download button will appear for this video in the api.video player.

## Create a custom download button

Most video player solutions have native support for downloading the video’s source file. However, you can also add a download button to a custom player that does not have this functionality.

&nbsp;

Leverage api.video’s API by sending a request that retrieves the video’s `id`,  and then render a custom download button serves the `mp4` asset for video.

&nbsp;

Check out the [Video download guide](https://docs.api.video/vod/video-download#creating-a-custom-download-button) for a step-by-step walkthrough on how to create a custom download button using Node.Js, api.video’s Node.Js API client, npm, and React.

## Conclusion

The ability to enable or disable video downloads is a fundamental aspect of content management, and [api.video](https://api.video) is here to offer a simple and intuitive solution for both developers and content creators. 

&nbsp;

Explore the capabilities of api.video! Check out our [documentation](https://docs.api.video/), browse through the available [Libraries & SDKs](https://docs.api.video/sdks), and [sign up to get started for free](https://dashboard.api.video/register).

&nbsp;

Start with api.video today to deliver a comprehensive, feature-rich video on demand service. The team is readily available to assist you with any inquiries or to help you discover the full potential of api.video.

Enhancing Video Accessibility: Control Video Downloads with api.video

small_Blog_ VideoDownload.jpg

thumbnail_Blog_ VideoDownload.jpg

Blog_VideoDownload.jpg

vimeo

Arushi_.webp

Arushi Gupta

api-video-blog-video-trends.png

Video trends

_“Once a new technology rolls over you, if you're not part of the steamroller, you're part of the road.”_ - Stewart Brand, Writer

&nbsp;

Picture yourself in your office or home, daydreaming about your next thrilling vacation. Two options lie before you: flipping through a travel booklet, or immersing yourself in captivating videos showcasing breathtaking landscapes, mountains, oceans, delicious food, vibrant cultures, and more! If you had to choose, you will surely choose the second option, because let’s all agree, videos are far more realistic and give you the right information quickly. !

&nbsp;

But there are various formats to videos, and video-on-demand is one format in which videos are consumed today — thanks to video-on-demand (VOD) platforms like Netflix, Hulu, Hotstar, and more. 

&nbsp;

Now what are VOD platforms in the first place and how do they work? Let’s find out. 

## What is VOD?

Let’s first understand what is on-demand. On-demand is something that is desired for or wanted. Similarly, [video-on-demand ](https://api.video/what-is/vod-video-on-demand/)or VOD is any content format that gives the audience the power to watch it whenever, wherever, and however they want. It can be found anywhere on the internet for any purpose — be it entertainment, online learning, or e-commerce. Since VOD is streamed through the internet, there is no intervention of cable or satellite connections unlike traditional broadcasting methods. 

&nbsp;

And that is what makes VOD so popular and also, so convenient to use. 

## Benefits of VOD

Now that we know the meaning of VOD, let's look at some of its important benefits.

### VOD offers enhanced engagement

With VOD, you can create multiple videos for your products and services, providing proper descriptions of their features and functionalities. Attendees can watch, understand, and learn about your offerings through these on-demand streaming videos. Moreover, it is a common habit for people to watch various videos, read content, and then make product comparisons before making a decision. This provides you with an opportunity to capture the attention of a global audience for your products and services. 

&nbsp;

_Did you know?_

According to a 2022 study by [Wyzowld](https://www.wyzowl.com/video-marketing-statistics/), it was found that a massive 94% of marketers agree that video helped them understand a product or service better. It was also noted that 88% of people had been convinced to buy a product or service after watching the brand's video. Not to mention, the study also found that 96% of people watched an explainer video to know more about a product or service.



giphy.gif

### VOD is convenient for your business

Video on demand allows your audience or customers to watch content according to their will. There are no restrictions on place and time, and they can watch the video as they wish. The best part is that unlike most other general broadcasting services, VOD platforms’ availability is not restricted to certain geographical locations, so viewers from around the world can stream content. 

&nbsp;

_Did you know?_

[77% of Americans](https://www.statista.com/statistics/949965/pay-tv-streaming-satisfaction-rate/) report being happy with the convenience and flexibility of streaming video on demand, while [71% discarded cable TV](https://www.statista.com/statistics/319924/reasons-not-have-cable-usa/) as they can easily find the content they want online. 


### VOD tastes like freedom

VOD platforms offer the freedom to create content with complete control, free from advertisers' guidelines and restrictions. Producing videos-on-demand allows you to share your authentic self with the world. With just an idea, a camera, and an internet connection, you can craft the perfect video content for your product or service, ready to be showcased on your app or website.


giphy (1).gif

### VOD offers better opportunities at lesser cost

Video-on-demand proves more budget-friendly than hosting a virtual event or live streaming content. As opposed to livestreaming where you can be online for just a defined time — like a day or a week — video-on-demand has no restriction on the availability of your content and that allows people access to your content for a larger duration of time.


## What makes a great VOD platform

There are various aspects of a good VOD streaming platform. Let’s see what they are.

1. ### Customization with a white-label video player

The foremost focus of your product lies on branding. It is always great to have logos, images, and colors to maintain your brand's prominence by white-labeling your videos — and a good VOD platform should let you do that with ease. 

&nbsp;

At api.video, you get complete control to showcase your brand and [stand out with our customizable video streaming API](https://api.video/blog/product-updates/white-labeling-api-video/).

### 2. Content delivery network (CDN)

A content delivery network (CDN) is like the backbone of a VOD platform. A CDN plays a crucial role in delivering videos with minimal buffer time to your users across the globe, making sure they can enjoy smooth and speedy streaming.

### 3. Digital rights management

Digital Rights Management (DRM) is a tech tool that safeguards your content from piracy and unauthorized sharing. A good VOD platform usually has a DRM solution that lets you create videos and restrict their viewership to private or public. 

### 4. Multi-user access

A multi-user access feature provides custom access controls and user permissions within your business and for each target audience group. With the [help of built-in safeguards, a good VOD platform](https://api.video/blog/product-updates/workspace/) lets you share your workspaces with other members and collaborate on a project. 

## How is VOD different from live streaming?

The best way to describe the difference between VOD and live streaming is to understand real acting vs. reel acting. In theater, there are no second chances; what happens on stage is the final act. On the other hand, movies and series permit multiple takes, extensive editing, and color correction before producing the final video. Similarly, VOD empowers you to shoot, edit, and upload videos at your pace, granting you the freedom to pause, play, rewind and fast forward. 


giphy (2).gif

On the other hand, live streaming lacks such options since it takes place in real-time, untouched by editing. If you see the broader aspect, live streaming is a subset `of VOD as live videos can be watched on demand by the viewers at a later date. 

If you are wondering which one’s better, we would say both of them can be combined for a wholesome business package. While VOD offers convenience and accessibility, live streaming is more engaging for the user. 

## Is VOD the right option for you?

In a word, YES. There can be a lot to do in this era of online marketing, but video-on-demand can change your brand in a lot of ways. It is attractive because it grants you complete control over your videos without adhering to advertisers' guidelines. With the ability to shoot, edit, and upload at your own pace, VOD caters to diverse needs and audiences. Viewers can indulge in on-demand content, pause, play, and revisit their favorite moments at their convenience. 

&nbsp;

In a nutshell, VOD is an excellent way to connect with your audience and make a meaningful impact that can go a long way in your business’ growth but you need to evaluate your content goals, target audience, and desired level of control to be able to decide if it is the right option for your business. 

&nbsp;

_If you are looking for an API that lets you integrate videos seamlessly to your product, checkout [api.video](https://api.video/). With usage based pricing that does not burn a hole in your pocket, lightning fast encoding and a developer friendly API, you get everything you need at api.video to integrate VOD in your app or website._

&nbsp;

_[Sign-up ](https://dashboard.api.video/register)for a free sandbox account or [take a look at our features ](https://api.video/features/)now!_

What is VOD and how does it work?

large_Frame 427319229.jpg

medium_Frame 427319229.jpg

small_Frame 427319229.jpg

thumbnail_Frame 427319229.jpg

Frame 427319229.jpg

Announcements

alexw.png

linkedin Alex W

Alexandre Willot

api-video-blog-product-updates.png

Product updates

We are excited to introduce Domain Restrictions, a feature that will allow you to restrict your videos and live stream playback to specific domains or subdomains, providing an additional layer of security for your videos and streams.

## 1. What does ‘Domain Restrictions’ do?

&nbsp;

With Domain Restrictions, you can now specify which domains or subdomains are allowed to stream your videos or live streams. This means that even if someone gets a hold of your API credentials, or video and live stream links, they won't be able to use them to watch or stream your content from an unauthorized domain.
&nbsp;

## 2. How it works

&nbsp;

1. Log in to your [api.video account](https://dashboard.api.video/login) and navigate to [Domains](https://dashboard.api.video/project-settings/domains).
2. Click on "Set your allowed domains"

    

set your allowed domains api.video.png

3. In the conversation popup, input the domains or subdomains you want to allow.
4. Our customer care team will evaluate your request and provide you access as soon as possible 
5. You are all set! Your videos will only play from the list of domains you have listed.  

&nbsp;

## 3. Pricing

&nbsp;

As an api.video customer, you can use this feature at $20/month in your Production Account. 

&nbsp;

## 4. Documentation

&nbsp;

If you need more information, you can explore our docs [here](https://docs.api.video/delivery-analytics/domain-referrer)

&nbsp;

## 5. What are the other ways to secure your videos?

&nbsp;

Domain Restrictions is just one of the many privacy and security features that api.video offers to help you protect your videos and streams. We take security seriously and are constantly working to improve our platform. 

For instance, our infrastructure provides safe, replicated video storage.

Also, in addition to domain restrictions, [api.video](https://api.video) offers multiple solutions to secure your online videos:

1. [Private videos](https://docs.api.video/delivery-analytics/video-privacy-access-management) will allow you to secure videos individually, you can select which videos are private and which are public. This is a very powerful feature that will help you control and manage access to video in a granular way. Get started with Private Videos [here](https://docs.api.video/delivery-analytics/video-privacy-access-management).

2. The [custom domain](https://dashboard.api.video/project-settings/domains) feature lets you white-label the video experience you offer to your users, and also bypass firewalls that are configured to display content only from a finite list of approved domains. 

3. [api.video](https://api.video) offers a [video watermark functionality](https://docs.api.video/vod/add-a-permanent-watermark). It allows you to embed any watermark you want into your video to protect your content. For example, it is useful to apply watermarks if you are streaming copyrighted videos. 

4. Last but not least, if you use api.video’s player, you can also add your own [player themes](https://docs.api.video/delivery-analytics/player-customization). Among the options, you can [add your own brand logo](https://docs.api.video/reference/api/Player-Themes#upload-a-logo) on top of your player. While the video watermark gets burnt onto the video, this player feature only creates a front-end overlay on top of your video.

If you have any questions or feedback, please don't hesitate to reach out to our support team, at hello@api.video. Now time to set up your own playback restrictions based on your domains 😀

And if you don't have an api.video account yet but want to test the product, remember that api.video offers a [free signup option](https://dashboard.api.video/register), where you can test all of the product features.

Happy video day!

Restrict playback to specific domain with Domain Restriction

small_restrict_playback_cover.jpg

thumbnail_restrict_playback_cover.jpg

restrict_playback_cover.jpg

webhooks

Doug Sillars

JavaScript

Video bumpers are small video intro and exit scenes added to a video to help the viewer understand what they are about to watch.  The intro 'bumper' often has a title or description of the video that is to follow, and the outro 'bumper' provides a call to action on what the viewer can do next - now that they have watched the video.

At api.video, we add bumpers to many of our videos to provide context and a subject for each video, and the end bumper provides a 'call to action' after the video has been watched.

Adding bumpers to your video makes your video appear more polished, as an editing step was taken to add these to the raw video you recorded with your camera (or screen sharing tool).  It is often a manual task in your video editing software.

In this post, we'll automate the task of adding bumpers to a video recording.  We'll use the [Shotstack API](https://shotstack.io/) to add the bumper image and text titles to the front and end of a recorded video.  The completed video will then be uploaded to api.video, and be ready to play in seconds - removing several manual steps from the creation of your training videos!

You can also check out the API reference documentation for the endpoints used for this project: 
* [Webhooks](https://docs.api.video/reference/api/Webhooks#create-webhook)
* [Video status](https://docs.api.video/reference/api/Videos#retrieve-video-status-and-details)

## The "old way" of adding bumpers:

1. Create slides in Google Slides for the intro & outro
2. Take screenshots of the slides
3. Import the screenshots into iMovie
4. Add them to the video timeline
5. Encode the video
6. Upload the video to api.video


The downsides to this: 
Steps 1-4 are all manual, and are repeated for each video that I create.
In steps 5&6 there is a lot of waiting.  

## The "new way": bumper.a.video

Add images, text and video to a web form. Click "upload." The video will upload and have the bumpers added automatically - with no manual work, and (what seems like) a lot less waiting.



Let's see how it is built!


## Ingredients for the demo

* [api.video account](https://dashboard.api.video/register)
* Background image: a 16:9 image suitable for the background

* Watermark image.  In this demo, we'll use the api.video logo. It is sized to 100x100 pixels to fit properly on the video. The image is also transparent to ensure that there is no white "background" on top of the video.


* 4 Text fields

  * Intro title
  * Intro 2nd title
  * Outro title
  * Outro 2nd title


## The tools used in this demo

### Shotstack

The Shotstack API is a video editing API. You can splice together videos, add watermarks, and add text into your video using their API.  We'll use this API to create our bumpers:

1. Upload a background image (we use the same image for both bumpers)
2. Add a title and a 2nd title for both bumpers (text fields)
3. Add a watermark in the upper right corner for the entire video.

### api.video

The initial video will be uploaded to api.video. Once the mp4 has been produced, it is sent to Shotstack for 'bumper work.' Once the video with bumpers has been created via the Shotstack API, we will re-add the completed video to api.video, and provide a playback url.


## Creating the video

Once you hit 'send' on the form at bumper.a.video, a lot of action takes place:

1. The 2 images are uploaded to bumper.a.video/images.  Shotstack requires that the images be publically available on the internet for the api to process them.
2. The video is uploaded to api.video.  For security reasons there are a few steps in this process:

   * The node server makes 2 calls to api.video: creating a delegated token and a videoId (with the name & description provided by the user). 
   * A delegated token works as a public API token for upload only.  
   * Sending this and the videoID back to the browser, we can use the api.video [JavaScript uploader](https://docs.api.video/sdks/vod/apivideo-typescript-uploader) to securely upload the video to api.video.
3. Once the video is uploaded - a message appears to the user, and a button appears to update the status of the processing.

Now that the video has been uploaded to api.video, the rest of the work is done between the Node server, api.video and Shotstack. 

1. Shotstack requires a publically available video URL for processing the video.  We use the ```video.encoding.quality.completed``` [webhook](https://docs.api.video/reference/api/Webhooks#create-webhook) to monitor the creation of the videos at api.video. When the webhook alert tells us that the mp4 version of the video has been created, we know that the mp4 file is ready.  Now we can request the api for the URL of the mp4 (to send to Shotstack).
2. In order to build the bumpers correctly, we also need the duration of the video uploaded. The [video status](https://docs.api.video/reference/api/Videos#retrieve-video-status-and-details) endpoint tells us the duration of the video in the metadata section of the response.

### Creating the call to Shotstack

The Shotstack API works like an onion with many layers that must be defined to create a full video: 

Every video has a ```timeline``` that defines the overall video.

Each ```timeline``` has one or more ```tracks```.  Tracks sit atop one another (in our case, we will have a watermark track sitting atop the video track).

Each ```track``` has one or more ```clips```.  The clips are bits of video/text or images that have specific durations inside the track.

Each ```clip``` has an ```asset``` that defines the clip - this could be a string of text, or an image or a video file.



There are two tracks that play the length of the video - the watermark track - which has a single clip for the single image asset.

the code for this (using the NodeJS SDK) looks like this:

```
let watermarkAsset = new Shotstack.ImageAsset;
							watermarkAsset.setSrc('https://bumper.a.video/images/'+wmpath)
						//watermark to run full video 
						let watermarkClip = new Shotstack.Clip;
							watermarkClip.setAsset(watermarkAsset);
							watermarkClip.setPosition("topLeft");
							watermarkClip.setOffset({"x": 0.05,"y": -0.05});
							watermarkClip.setOpacity(0.5);
							watermarkClip.setFit("none");
							watermarkClip.setStart(0);
							watermarkClip.setLength(4+duration+4);
```

The clip is used to set the location - in this case the top left - with a bit of (x,y) adjustment, the opacity (50%), and how long the clip should play.

Since the intro and outro are 4 seconds, and the video has length ```duration``` - we set this clip to appear for the entire video.

The main track of the video has many clips (and assets).  Both the intro and outro have background and 2 text assets each, and the middle section has just the video clip/asset.

Shotstack does not like having clips with identical times. That means I cannot add the titles at the same moment as the background image. I could have perhaps placed the text items into different tracks to overlay the background - and then had them all start at the same time.  Instead I have the background appear, and then add each bit of text every 100ms:

```
						let titleIntroTextAsset =new Shotstack.TitleAsset;
							titleIntroTextAsset.setText(introTitle);
							titleIntroTextAsset.setStyle('chunk');
							titleIntroTextAsset.setColor('#ffffff');
							titleIntroTextAsset.setSize('x-large');
							titleIntroTextAsset.setPosition('center');
						let titleIntroClip = new Shotstack.Clip;
							titleIntroClip.setAsset(titleIntroTextAsset);
							titleIntroClip.setStart(0.1);
							titleIntroClip.setLength(3.9);

						let titleIntroTextAsset2 =new Shotstack.TitleAsset;
							titleIntroTextAsset2.setText(introTitle2);
							titleIntroTextAsset2.setStyle('chunk');
							titleIntroTextAsset2.setColor('#ffffff');
							titleIntroTextAsset2.setSize('large');
							titleIntroTextAsset2.setPosition('bottom');
						let titleIntroClip2 = new Shotstack.Clip;
							titleIntroClip2.setAsset(titleIntroTextAsset2);
							titleIntroClip2.setStart(0.2);
							titleIntroClip2.setLength(3.8);
```

The main text asset is present from 100ms into the video to 3.9s, and the secondary text asset is present from 200ms to 3.8s.  It looks kind of cool, as if they are boomeranging in and out, so I kept it this way.

The video clip in the middle has the volume set to 50%. It starts at 4s, and has a length of ```duration``` seconds.

```
						let videoAsset = new Shotstack.VideoAsset;
							videoAsset.setSrc(mp4Url);
							videoAsset.setVolume(0.5);
						let videoClip =  new Shotstack.Clip;
							videoClip.setAsset(videoAsset);
							videoClip.setStart(4);
							videoClip.setLength(duration);
```


All of this data is sent to the Shotstack API, and it begins processing the video - adding the watermark and the bumpers.

Once the video is completed (the Node server polls every 2s to get an update), a new video at api.video is created, using the source URL from Shotstack:


```
	function updateApiVideo(url){
							//ok so the video is created at Stostack
							const videoCreationPayload = {
								title: title, // The title of your new video.
								description: descr, // A brief description of your video.
								source: url, // If you add a video already on the web, this is where you enter the url for the video.
								
							}; 
							finalUpload =  client.videos.create(videoCreationPayload);
							finalUpload.then (function(finalVideo) {
								console.log(finalVideo);
								var finalvideoId = finalVideo.videoId;
								var finalPlayerURL = finalVideo.assets.player;
								console.log('finalvideoid',finalvideoId);
								console.log('finalPlayerURL',finalPlayerURL);
								//res.send(finalPlayerURL);
								videoProgressJson.finalVideoId = finalvideoId;
								videoProgressJson.finalPlayerURL = finalPlayerURL;
								videoStatus(videocreationList, videoId);



							});
						}
```

Finally - we use the same video encoding webhook we used earlier to wait until the 720p version of the video is ready for playback (looking for the new videoID, and the HLS version at 720p resolution).

The user - back on the webpage, can click the "update status" button and track this process.  The update status reports:

* Initial mp4 created
* Shotstack id
* Shotstack status
* New api.video videoID
* Final video at 720p

When the last item reports true - we add a link and embed the new video right onto the bumper.a.video page.

## Conclusion

Automating the mundane tasks we run regularly makes life easier. In this demo, I identified a process that was very manual - creating video bumpers for demo videos.  I used [api.video](https://api.video) and [Shotstack.io](https://shotstack.io) to automate the process, and thereby making the creation of video demos faster and easier!

If you have any questions or suggestions, please share them on our [community forum](https://community.api.video). If you still need to create your api.video account, you can do that in just a few moments by following [this link](https://dashboard.api.video/register). Happy building! 

Add bumpers to your video with bumper.a.video

bumperavideo-1.png

Restrict playback to specific domains with Domain Restrictions 

small_olivier.png

thumbnail_olivier.png

olivier.png

Olivier Lando

large_api-video-blog-no-code.png

medium_api-video-blog-no-code.png

small_api-video-blog-no-code.png

thumbnail_api-video-blog-no-code.png

api-video-blog-no-code.png

No-code

We've just released a brand new [api.video plugin](https://bubble.io/plugin/apivideo-1632390165248x133502315345739780) on the Bubble.io marketplace. 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.

For those who do not know Bubble.io yet, it is a no-code tool that allows you to build SaaS platforms, marketplaces and CRMs without code.

In this tutorial, we will show you the main features of the api.video plugin, taking as an example the creation of a video sharing site (similar to YouTube, but much... much more rudimentary). This will allow us to discover some of the features offered by our Bubble.io plugin, namely:

* the video uploader element
* the video player element
* the API calls

The result can be seen here: [Bubble demo application](https://api-video-tube.bubbleapps.io/version-test/).

The purpose of this article isn't to describe the api.video plugin in detail, but you can find the full documentation here: [Bubble.io plugin documentation](https://docs.api.video/sdks/nocode/bubbleio-plugin).

## The demo application

Our application is composed of the following pages:

* a home page (public) - the home page contains a thumbnail of each video that has been uploaded on the website
* a video page (public) - it contains a player to watch a specific video (when a user clicks on a video title on the home page, he will arrive here)
* a login / sign up page (public)
* an upload page (logged in users only) - logged in users are able to upload a new video from this page
* an account page (logged in users only) - logged in users are able to manage their videos here

## Database schema

Our Bubble database is composed of only 2 data types: `User` & `Video`. Each video is associated with a `User` entry (the person who uploaded the video).

Here are the schemas of the 2 data types:

### User



large_userschema.png

medium_userschema.png

small_userschema.png

thumbnail_userschema.png

userschema.png

large_videoschema.png

medium_videoschema.png

small_videoschema.png

thumbnail_videoschema.png

videoschema.png

**Here is what it looks like in the Bubble interface:**

large_database.png

medium_database.png

small_database.png

thumbnail_database.png

database.png

## Installation of the api.video plugin

To begin with, we need to add the api.video plugin in the Bubble.io application. You can find the details in our documentation: [api.video Bubble.io plugin](https://docs.api.video/sdks/nocode/bubbleio-plugin). 

## Pages

### Login / sign up page

The login / sign up page consists of two forms: one to register and a second one to log in. By default the login form is hidden. It shows up when the "login" button is clicked. 

#### Sign up form

The sign up form is a standard form with a "Sign up" button and 3 input fields: Email, Password & Password confirmation. When the "Sign up" button is clicked, the user is registered using the standard "sign up" Bubble workflow action. 

At this time, we generate a [delegated upload token](https://api.video/blog/tutorials/delegated-uploads/) from [api.video](https://api.video). This token will be used later, every time the user wants to upload a new video. 

In order to generate the token, we use the `+ Change another field` button in the Bubble action pop-up. As a source for the value, we use `Data from an external API` and select `authenticate - generate upload token`. 

medium_workflow-sign-up-upload-token.png

small_workflow-sign-up-upload-token.png

thumbnail_workflow-sign-up-upload-token.png

workflow-sign-up-upload-token.png

#### Login form

The login form consists of a "Login" button and 2 input fields: Email & Password. When the "Login" button is clicked, the user will be logged in using the *had oc* Bubble action:


small_workflow-login.png

thumbnail_workflow-login.png

workflow-login.png

### Upload page

The upload page will contain
*  two text inputs: "Title" and "Description" 
*  a "Select a video file" button that opens a pop-up to select the video file to upload 
*  a progress bar 
*  a submit button

#### The api.video uploader element

The "Select a video file" button is not a standard button but an api.video uploader element. For more details about this element you can read the documentation here: [Bubble.io uploader element
](https://docs.api.video/sdks/nocode/bubbleio-uploader). The purpose of the uploader element is to offer users of your web application the ability to easily upload videos to api.video.

The element needs one setting: the delegated upload token to use. It will use the one that has been associated with the user when they signed up. To do so, in the "upload token" parameter of the element, we've entered `Current user's upload token`. We've also applied some style to the element to make it fit with the design of our site. 

#### Progress bar

To display the upload progress bar a SimpleProgressBar element is used. Its "Percentage" value is associated with the "percent" value of the video uploader element. 

#### Workflow actions

There are five workflows defined for this page:

large_workflows-upload-page.png

medium_workflows-upload-page.png

small_workflows-upload-page.png

thumbnail_workflows-upload-page.png

workflows-upload-page.png

*  When the user arrives on the page, if they are not logged in, they are redirected to the login page 
*  When the "Title" input becomes not empty and if the video uploader element's `file_selected` value is true (meaning that the user has already selected a video file), then the "Upload" button is shown.
*  Reciprocally, when the `file_selected` becomes true and if the "Title" input field isn't empty, then the "Upload" button is shown.
*  When the "Upload" button is clicked, the "upload" action of the video uploader element is triggered. Also, the form inputs are hidden and the progress bar is shown. 
*  When the "end" event of the video uploader element is triggered, a new Video element is created in the Database. The following attributes are set:
*    videoId: the value of the videoId attribute of the uploader element (this is the id of the new video that has been returned by api.video)
*    user: the current user
*    title: the value of the "Title" input field
*    description: the value of the "Description" input field

### Home page

The home page is pretty basic. It will display a preview of all the videos that have been uploaded by any user of the application. It will look like this:


large_homepage.png

medium_homepage.png

small_homepage.png

thumbnail_homepage.png

homepage.png

#### The repeating group

A [Repeating group](https://manual.bubble.io/core-resources/elements/containers#repeating-group) is used to iterate over all the Video entries stored in the database. 

The datasource query of the repeating group is simple: `Search for videos`. A "Sort by" constraint has been added on the `Created date`field with "Descending" = `false` in order to have the latest videos displayed at the top of the page. 


large_homepage-repeating-group.png

medium_homepage-repeating-group.png

small_homepage-repeating-group.png

thumbnail_homepage-repeating-group.png

homepage-repeating-group.png

#### Repeating group elements: the api.video player element

In each entry of the repeating group, an api.video videoplayer element is used to display a preview of the video. To make the player look like a preview, the following settings are applied:


large_homepage-player-settings.png

medium_homepage-player-settings.png

small_homepage-player-settings.png

thumbnail_homepage-player-settings.png

homepage-player-settings.png

*  `autoplay` is false: we don't want all the players to automatically start when the home page appears
*  `hideControls` and `hideTitle` are true: the players are very small here, we only want to see the video 

Two workflows are also used to handle the video previews. They are respectively triggered when the video player element sends mouseenter and mouseleave events. When the mouse enters the player area, the video playback is launched thanks to the play action of the player element. On the contrary, when the mouse leaves the player area, the pause action is used to stop the playback.

Under the player element, the following details of the video are displayed:

* the title
* the views
* the author's email

The title is a link that redirects the user to the video page of that video.

 

### Video page

Users land on this page after a click on a video preview from the home page. The page layout consists of a large video player, plus some details about the video:

large_video-page.png

medium_video-page.png

small_video-page.png

thumbnail_video-page.png

video-page.png

The same video player element as on the home page is used. The only difference is that when the player element triggers a first play event, a workflow action increments the `views` value of the video in the database. 


### Account page

The Account page has almost the same layout as the home page. It consists of a repeating groups iterating on videos. The main difference here is that the videos are filtered in order to only display the ones that have been uploaded by the current user. The other difference is that a "Delete" button is present next to each video. When clicked, the `delete` endpoint of the api.video API is called, and the video entry is deleted from the database:





large_delete-video.png

medium_delete-video.png

small_delete-video.png

thumbnail_delete-video.png

delete-video.png

## Conclusion 

In this step by step tutorial we have covered the process of building a video sharing application. In particular, we have looked at the following features of the api.video Bubble plugin: 

* the video uploader element
* the video player element
* the API calls

As always, we encourage you to join our [Community Forum](https://community.api.video/) and sign up to our newsletter (you will find the link below this post). 

Bubble.io + api.video: build YouTube-like site with no code

large_bubble_plugin.png

medium_bubble_plugin.png

small_bubble_plugin.png

thumbnail_bubble_plugin.png

bubble_plugin.png

Bubble.io + api.video: build a YouTube-like site with no code

medium_screen-shot-2021-01-26-at-11-48-47-am.jpg

small_screen-shot-2021-01-26-at-11-48-47-am.jpg

thumbnail_screen-shot-2021-01-26-at-11-48-47-am.jpg

screen-shot-2021-01-26-at-11-48-47-am.jpg

Erikka Innes

large_api-video-blog-case-studies.png

medium_api-video-blog-case-studies.png

small_api-video-blog-case-studies.png

thumbnail_api-video-blog-case-studies.png

api-video-blog-case-studies.png

Case Studies

Husband and wife team Didier Duffas and Valentina Zatevalneva dreamed of building their own digital dance academy - Neva Ballet. Their goal was to make it possible for people around the world to experience the magic of dance for fitness and health. Focused on classical dance techniques and the strength and beauty of Russian ballet, the classes would be open to anyone with the desire to learn. 

small_neva-ballet-use-case.png

thumbnail_neva-ballet-use-case.png

neva-ballet-use-case.png

## The right video tool for the Job
There were just a few hurdles standing in the way of their dream. Neither one of them had built a website before and they had no previous developer experience. Additionally, for video they needed a way to create a high quality recording for playback. They wanted something simple to implement, that would be cost effective and easy to manage. They started with Wix and Zoom. Wix's easy-to-use interface made it possible for them to create their own ecommerce site and Zoom allowed them to live stream all of their classes to a small group.

There was just one problem - the live streams. While they were great for live teaching, they wanted to offer customers a **high quality playback** of each class as well as create a backup if anything happened with their Zoom recording. 

This led them to api.video. 

api.video offers high quality HLS live streams that look great in playback, customizable players, easy implementation and reasonable prices. With these three tools combined, their digital dance academy began to take shape.

## Video recording set-up

> "Our job is to provide to our customers online classes in different disciplines based on ballet and all the physical preparation of ballerinas. Valentina used to be a ballerina in the national state ballet in Russia," Didier said. 

To bring the couple's vision to life, Didier set up an ecommerce website with Wix and then turned to setting up their classes. For the video recording implementation, he set up Zoom meetings with recording enabled. Next, he created a [live stream](https://api.video/blog/no-code/start-and-record-a-live-stream-of-your-zoom-meeting/) with api.video, then added it to the Zoom meeting. Any time Valentina opened Zoom to start live streaming a class, she would speak with the class, then when it was time to begin, she cut everyone's mics but her own, started her live stream with api.video, and then with Zoom. 

Didier described the typical class set up for us: "The teacher has the camera filming giving the lesson and at the same time she can see the gallery of Zoom for the images of the students. All our members are not doing live at the same time and we advise them to make live classes sometimes just to participate so we can give feedback. But we mainly use the replay and that's the reason why also we use api.video -- <ins>because we need to provide them with high quality video for the replay.</ins>" 

small_screen-shot-2021-03-25-at-1-28-56-am.png

thumbnail_screen-shot-2021-03-25-at-1-28-56-am.png

screen-shot-2021-03-25-at-1-28-56-am.png

They decided to offer the Zoom playback alongside the high-quality api.video playback. Students had access to either playback as many times as they wanted for one week after the class. 

## No code video implementation
With their implementation together, the digital dance academy [Neva Ballet](https://www.nevaballet.com/) was born. They have now been in business for one year, and they offer classes in nine different disciplines, with subscription and a la carte purchasing models available. They have multiple channels for their live streams, and they've not only made it possible for students to take classes from anywhere, but to do so affordably. A monthly subscription to classes starts at 35 euros while others charge double with lower video quality. Individual classes start at 15 euros. Another perk the couple found is that they can teach the classes from anywhere. 

They also found their no-code implementation tremendously valuable because it meant they could manage the site on their own. 

> "We never had any developer. I didn't know how to make a website one year ago. I do everything by myself...It's really cool...For us it's very important because we are autonomous and we can do things...ourselves," Didier told us. 

By not needing a developer except for some help with a menu arrangement in Wix, Didier said they are able to keep costs low, quickly respond to problems and implement improvements. 

> “It would be very complicated for us if we had to ask a web agency or web developer to work for us. Since one year I have made so many changes and we are really in A/B testing mode. I put something, I see a change, I correct it," Didier said. 

The couple hopes to grow their digital academy over time, with more classes and teachers, and they look forward to doing so with the help of api.video. 

> "api.video will help us to evolve." --Didier Duffas


To find out how you can build your own online business with video content, [contact us](https://api.video/contact/) or [sign up](https://dashboard.api.video/register) for an account and try one of our many tutorials and demos.

Case Study: building a digital dance academy without coding

Case Study: How api.video helped a couple build a digital dance academy without coding

doug.jpg

twitter-brands.svg

Doug Twitter

Zapier is a no-code platform that makes it easy to connect services together - without writing a single line of code.

We recently upgraded our [Zapier integration](https://zapier.com/apps/apivideo) to make use of our [API webhooks](https://docs.api.video/reference/api/Webhooks#create-webhook), so that Zapier can instantly report when an event occurs at api.video.

## Our webhooks

We currently have 4 alerts from our webhooks:

* video.encoding.quality.completed: This alert fires when a video quality is ready to playback.
* live-stream.broadcast.started: Alerts you to when a live stream has begun.
* live-stream.broadcast.ended: The opposite alert - the live stream has ended.
* video.source.recorded: Similar to the first, but specifically for when a livestream recording quality is ready.


## Now available in Zapier

When the webhook alert from api.video occurs, Zapier is alerted immediately.  That's why Zapier calls these triggers "Instant triggers"- there is no polling delay to know when the Zap must begin:

large_screenshot-2021-10-21-at-20-46-46.png

medium_screenshot-2021-10-21-at-20-46-46.png

small_screenshot-2021-10-21-at-20-46-46.png

thumbnail_screenshot-2021-10-21-at-20-46-46.png

screenshot-2021-10-21-at-20-46-46.png

Our Zapier integration now features instant triggers

Updated: our Zapier integration now features instant triggers

Video on demand

Live streaming

Analytics

Video infrastructure

Video player

See all features

Online learning

Short-form videos

Marketplace & E-commerce

Video messaging and recording

Quickstart guides

Documentation

Ecosystem catalog

Clients & SDKs

Community

Blog

Demos

Help center

no code