Player SDK

Player

Player update

Normal

thumbnail_thibault_rond.png

thibault_rond.png

Thibault Beyou

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

Dart

Building a mobile application with video functions? Let’s dive into why api.video is the right choice for this task.

&nbsp;

api.video encodes your videos, hosts them securely, and enables you to stream on any device or platform for you. You only need to build your mobile application, with your own branding.

&nbsp;

We value developer experience and the time spent on developing your mobile application, so we provide you with the tools we’d also choose to integrate video in a mobile application. We’ve developed several SDKs for you to use in order to take control of the video player in your mobile app.

&nbsp;

Check out these plaftorms:

- [Flutter](https://github.com/apivideo/api.video-flutter-player) player for Android, iOS, and Web
- [ReactNative](https://github.com/apivideo/api.video-reactnative-player) player Android and iOS
- [Android and Jetpack Compose](https://github.com/apivideo/api.video-android-player)
- [Swift](https://github.com/apivideo/api.video-swift-player) player for iOS

&nbsp;

With these player SDKs, you can integrate videos that you host on api.video into your mobile application in just a few minutes.

&nbsp;

The api.video mobile player SDKs support both VOD and live streaming, private videos, and player notifications. They also handle the dirty work for you:
- take the [video ID](https://docs.api.video/vod/video-object#video-id) as input
- generate analytics events for [api.video analytics](https://api.video/product/video-analytics/)
- play back HLS using the best quality that fits actual network conditions
- fall back to MP4 when there is an issue with HLS

&nbsp;

Every api.video player SDK comes with a sample application. Check out the [documentation](https://docs.api.video/sdks/player#mobile) and look for the `example` directory in each SDK’s repository.

&nbsp;

The [api.video players](https://api.video/product/player/) are open source. Feel free to fork and modify them as you want! We are happy to review your pull requests!

## Usage

To use api.video players, you need the [video ID](https://docs.api.video/vod/video-object#video-id) of video you want to serve. You can retrieve a video ID via the [API](https://docs.api.video/reference/api/Videos) or from the [dashboard](https://dashboard.api.video). 

&nbsp;

In a typical use case, you should follow this workflow:
1. Add the player package to your project
2. Create a `VideoOptions` instance with the video ID of the video you want to serve 
3. Create a player controller and pass it the `VideoOptions` instance
4. Create the player view and pass the player controller to the player view.

&nbsp;

Check out this example for **Flutter**:

&nbsp;

Run this in your command line:

Check out the [Flutter player SDK documentation](https://docs.api.video/sdks/player/apivideo-flutter-player) for a detailed explanation.

## Quickstarts

To get you started, we created quickstart articles that can help you integrate the api.video player SDK in just a couple of minutes:

- **Flutter**: [api.video player for Flutter: playback videos on your apps](https://api.video/blog/tutorials/api-video-player-for-flutter-playback-videos-on-your-apps/)

- **Android**: [How to add an api.video player to your Android application](https://api.video/blog/tutorials/how-to-add-an-api-video-player-to-your-android-application/)

- **Swift (iOS)**: [How to add an api.video Swift player to your iOS application](https://api.video/blog/tutorials/how-to-add-an-api-video-swift-player-to-your-ios-application/)

## Customization

Customizing the look & feel of the player is important to maintain your own branding in your application. The api.video player SDKs enable you to customize the UI of the player. You have the possibility to configure the color of the progress bar, the color of the play button, and many more items.

&nbsp;

If you think a customization option is missing, let us know in the `Issues` section of the player SDK’s GitHub repository.

## Using custom players

Even though we recommend using the api.video player SDKs when working with api.video’s solutions, you can use other players in your application.

&nbsp;

To support your decision even if you go with another player solution, we provide extensions for your mobile player to read and serve videos hosted with api.video through the [video ID](https://docs.api.video/vod/video-object#video-id)s.

- **Android**: [Switch your existing Android player to api.video](https://api.video/blog/tutorials/switch-your-existing-android-player-to-api-video/)

- **iOS**: [Switch your existing Swift player to api.video](https://api.video/blog/tutorials/switch-your-existing-swift-player-to-api-video/)

&nbsp;

To enable you to collect usage data even from the custom player of your choice, we created analytics libraries for Android and iOS that you can integrate into your application.

- **Android**: https://github.com/apivideo/api.video-android-player-analytics
- **iOS:** https://github.com/apivideo/api.video-swift-player-analytics

&nbsp;

We can recommend these players in case you decide not to use the api.video player SDKs:
- Flutter: `chewie` and `video_player`
- Android: `ExoPlayer`
- iOS: `AVPlayer`

&nbsp;

_Need help, or have questions? Join the [api.video community](https://community.api.video/) and start a discussion. Or simply create a sandbox account on [api.video](https://dashboard.api.video/register) and check out the features for yourself._

Enhance viewer experience in your mobile apps with api.video's player SDKs

large_Blog_MobilePlayer.png

medium_Blog_MobilePlayer.png

small_Blog_MobilePlayer.png

thumbnail_Blog_MobilePlayer.png

Blog_MobilePlayer.png

doug.jpg

Doug Twitter

Doug Sillars

api-video-blog-product-updates.png

Product updates

api.video makes the delivery of streaming video easy. Just use our API to upload a video, and we handle all of the transcoding, storage and video delivery for you.  All you need to do is add the url (or iframe) to your site or app, and we handle the rest - ensuring fast, easy video delivery to all of your users.

The url (or iframe) from api.video that you add to your site contains a customisable video player full of great features. Today, we are announcing the release of our new video player with more incredible features to wow your customers.

&nbsp;


**<iframe src="https://embed.api.video/vod/viTLpKB231ATWOWjkHgi9bf" width = "800" height ="600" allowfullscreen></iframe>**

&nbsp;


A video describing the new api.video player, inside the new [api.video player](https://api.video/product/player/)!

Our new player is completely rewritten from the ground up, built on top of the video.js architecture. So, what that does this mean for you? For existing api.video users - all your videos have been automatically upgraded to the new player, and all future videos will automatically use the player as well!
New Features
In addition to the new sleek look of the player, there are a lot of new features that we would like to share with you.

## Captions and chapters  

[Captions](https://docs.api.video/reference/api/Captions) and [Chapters](https://docs.api.video/reference/api/Chapters) were supported in the last player, and continue to be supported by the api.video player.

## Chromecast

If there is a Chromecast on the same network as the device playing the video, a “cast” button will appear, so you can send to the larger screen.

## Picture in picture
Pop the video out of your browser, and keep watching, even when you visit different pages - or even different screens!  The video follows along so you can keep tabs of what is going on!

## Responsiveness

One unique feature in Video.js is that the player automatically delivers the appropriate stream based on both the network bandwidth available AND based on the size of the video viewport.  If you are watching a video on a small screen, or small window in the page, api.video only sends the largest appropriate size video to the screen - ensuring the highest quality,  without sending extra data to your customers (that they cannot consume).

## Video playback speed
For longer videos, some viewers may wish to watch at a slightly faster rate. The speed button in the bottom right allows you to watch as much as 2x faster than the original recording.

## Video rewind and fast forward
Surrounding the video speed option are rewind and fast forward buttons.  The rewind backs up the video 10 seconds, and the fast forward moves the video ahead 20 seconds.  This is great when you miss a scene or critical bit of content, and want to quickly seek around in the video.

But, that is not the coolest part of the rewind and fast forward.  

## Live DVR
Yes! The rewind works on a live stream!  If you are watching a live stream on api.video and miss a word, or want to review a slide - you can rewind and pause the video.  Then press play, and increase the playback speed to zip back to the “live” coverage!

We are really excited to share these great new features with you, and can’t wait to see what cool videos and ways you might implement these features to better display your content.  Please let us know what you think about the new video player in our **developer forum**: [community.api.video](https://community.api.video)  

&nbsp;

_To start using api.video for your videos, [sign-up](https://dashboard.api.video/register) for a free sandbox account now._

Announcing our new video player

large_1595521905-player.png

medium_1595521905-player.png

small_1595521905-player.png

thumbnail_1595521905-player.png

intro-api-video-player.png

swift

api-video-romain-petit.png

Romain Petit

api-video-blog-tutorials.png

Tutorials

Swift

We have now released the Swift player! The Swift player helps you to playback your videos easily in your iOS and iPadOS applications.

In this tutorial we will see how to add the Swift player to your code.

The [Swift player package](https://github.com/apivideo/api.video-swift-player) allows you to use UIKit and SwiftUI to handle multi-platform projects.
The Swift player package is available on both Cocoapods and Swift Package Manager (SPM).

Before starting with this tutorial, make sure that you set your minimum target to iOS 13 and above.

To just give you a quick preview, we are going to create a Swift application with an api.video player that looks like this:

swift-player-video-api.png

## Upload video

Before starting to add the api.video Swift player to your application, you need to upload at least one video to your api.video account. If you haven't yet, see [how to upload a video](https://docs.api.video/vod/upload-a-video-regular-upload).

You'll need a video Id to use this component and play a video from api.video. To get yours, follow these steps:

1. [Log into your account](https://dashboard.api.video/login) or create one [here](https://dashboard.api.video/register).
2. Copy your API key (sandbox or production if you are subscribed to one of our [plans](https://api.video/pricing/)).
3. Go to the official [api.video documentation](https://docs.api.video/).
4. Log into your account in the top right corner. If it's already done, make sure that it's the account you want to use.
5. Go to *API Reference* -> *Videos* -> *[List all videos](https://docs.api.video/reference/api/Videos#list-all-video-objects)*
6. On the right, be sure the *Authentication* section contains the API key you want to use.
7. Generate your upload token by clicking the *Try It!* button in the right section
8. Copy the *videoId* value of one of elements of the response in the right section.

Alternatively, you can find your video Id in the video details of your [dashboard](https://dashboard.api.video/).

## Add the api.video Swift player

In this section, we will go through the three main steps of adding the [api.video](https://api.video/) Swift player to your iOS application.

1. Get the latest version
    
    You can find it in the [release page](https://github.com/apivideo/api.video-swift-player/releases)
    
2. Add the `ApiVideoPlayer` package to your app with:
    1. SPM
        
        Add the following to your package.swift

2. Cocoapods
    
    add the following to your Podfile

Replace X.X.X with the latest version.

3. UIKit
    
    a. Import the package

(!) Replace “YOUR_VIDEO_ID” by your own videoId to display video

(!) Replace “YOUR_PRIVATE_TOKEN” by the private token of the video to display it.

c. To get all player events (optional)

d. Implement the player view in your view controller and add constraints.

4. SwiftUI
    
    a. Import the `ApiVideoPlayer` package

b. In your view you have to instantiate the player and the player events in the init method

(!) Replace “YOUR_VIDEO_ID” by your own videoId to display video

If you want to play private videos:

c. In the body you have to add the player with the specification you want

You will be able to use all the methods available externally, by calling player.methodName, for example :

If you're looking for an easy way to integrate video into your application, check out our **[docs](https://docs.api.video/)** and **[sign up for a free account](https://dashboard.api.video/register).**

How to add an api.video Swift player to your iOS application

large_api-video-swift-player.png

medium_api-video-swift-player.png

small_api-video-swift-player.png

thumbnail_api-video-swift-player.png

api-video-swift-player.png

video api

img_8063-min-1.jpg

GitHub Yohann

LinkedIn Yohann

Yohann Martzolff

Flutter

Flutter has a strength that only a handful of frameworks have: the power to build a multi-platform application with a single codebase. 

What if you need to display some videos in your new or future worldwide famous app? At the time I write this article, it’s fair to say that there aren’t many video players available for Flutter out there. Here comes our solution at [api.video](https://api.video)!

api-video-player-screenshot.png

## A single video player for all platforms

If you’re new to Flutter or cross-platform development, welcome to this wonderful, fast, and simple world! No more separate logics or codebase to create an application that works across multiple platforms. Better yet, no need to have multiple developers working to create different applications for various operating systems. Create an application once, and use it everywhere!

The api.video player for [Flutter](https://pub.dev/packages/apivideo_player) is built natively for Android, iOS, and web and can be implemented on these three platforms easily. All you need is a computer and an [api.video](https://dashboard.api.video/register) account.

Continue reading this article for a full tutorial 👀

## Upload a video to display it

In order to display a video, you need to first upload it! To upload a video, [login](https://dashboard.api.video/login) to your api.video account or if you are not registered already, you can easily [create an account](https://dashboard.api.video/register) for free.

Once you reach the dashboard, check if you have previously uploaded any videos, and if not, no worries! You can easily upload a video by clicking the “Create Video Object” button on the overview and follow the steps on the dashboard. 

💡 You can also upload videos to your workspace with one of our [SDKs](https://docs.api.video/reference/api/Videos#upload-a-video)

upload-video-api-video.png

## Add the api.video player to your application on Flutter

If you’re new to Flutter, or if you don’t already have a Flutter app running, [please follow the official guide](https://docs.flutter.dev/get-started/install).

Once your application is running, add the api.video player package to you Flutter.

### Option 1

Run the following command at the root of your project:

### Option 2

Modify your project’s `pubspec.yaml` file:

## For iOS usage

This package only works on iOS 13 and above. Please update your `ios/Podfile` platform property as follows, or update the iOS version in xCode.

## Display your first video

You can display your first video by following the easy steps below 👇

### 1. Import the package

Add the following line at the top of the file where you want to use the api.video player:

### 2. Create a new video player controller

You need to first instantiate a `ApiVideoPlayerController` to be able to use the video player widget.

To instantiate the `ApiVideoPlayerController`, you will need an api.video video id. Find the video id in the api.video dashboard by clicking on one of your videos found under the section called [videos](https://dashboard.api.video/videos).

Create a new widget or modify an existing one like this:

Run your application on the device of your choice and a simple line of text should appear on your application.

## 3. Create a new video player

Now that you have a functional `ApiVideoPlayerController`, you can create a new `ApiVideoPlayer` and associate your controller to the player.

Modify your widget by replacing the `Text` widget with an `ApiVideoPlayer` one:

`ApiVideoPlayer` comes with a parameter `fit` or type `BoxFit` to set how it will behave in its parent widget.

### 4. Make it yours!

You can customize your brand new video player the way you want by changing its colors and adding some event listeners.

## Add some event listeners

There are two ways to add an event listener to your video player controller:

1. When you instantiate the player controller

2. After the player controller has been initialized.

The following sample code shows you how to add an `onPlay` event listener on `ApiVideoPlayerController` instantiation and an `onPause` event listener after the controller has been initialized in the `initState` method.

Modify your code like this to test these two event listeners:

## Customize the theme of your player

You can change your video player’s style by attributing a `PlayerStyle` class to the `style` parameter of your `ApiVideoPlayer` widget:

## Go further

You can access and control the video player features such as the play button, reverse, or forward features from outside of the player. 

Let’s see how we can retrieve the video’s information and control our video player from elsewhere.

### Retrieve the video’s information

The `ApiVideoPlayerController` gives you access to a lot of information about the current video: duration, current time, volume, and many more.

Let’s add a simple button to retrieve the current video duration.

Modify your widget as follows:

## Control the video from outside of the player

You can control the video player from outside of the player thanks to the controller methods.

For instance, we can add an icon button to mute and unmute the video on press.

Modify your widget as follows:

## Full documentation and example

Find the [full documentation](https://github.com/apivideo/api.video-flutter-player) and a [full sample app](https://github.com/apivideo/api.video-flutter-player/tree/main/example) in our GitHub repository. 

If you're looking for an easy way to integrate video into your application, check out our **[docs](https://docs.api.video/)** and **[sign up for a free account](https://dashboard.api.video/register)**.

api.video player for Flutter: playback videos on your apps

large_05dec22-copie-4.png

medium_05dec22-copie-4.png

small_05dec22-copie-4.png

thumbnail_05dec22-copie-4.png

api-video-player-for-flutter.png

thumbnail_Arushi_.webp

Arushi_.webp

Arushi Gupta

large_api-video-blog-company.png

medium_api-video-blog-company.png

small_api-video-blog-company.png

thumbnail_api-video-blog-company.png

api-video-blog-company.png

Company News

Since day one of its existence, api.video has invested not only in cutting-edge technology but also in the strategic management of our video encoding, hosting and delivery ecosystem since day one.

&nbsp;

One of those investments was to have our own video infrastructure.

&nbsp;

And building and maintaining our infrastructure is not a mere corporate choice; it's a commitment to the future of video streaming. We recognize that when it comes to the technicalities of video streaming, there's no one-size-fits-all solution. Each company or individual has its unique requirements, and an in-house infrastructure enables us to finely tailor our system to cater to these specific demands.

&nbsp;

_(If decoding text feels like a secret mission for your eyes, switch gears and dive into the video.)_



## A proprietary video infrastructure that powers seamless video experiences
While we are proud of the fact that we have a proprietary infrastructure, the reason we have built it is to help YOU. So let's dive in and see how our infrastructure empowers us to give you exactly what you need for your videos.

&nbsp;

## 1. Autonomy over video monitoring and performance

We build every stack of our video infrastructure and when it goes into production, it is monitored continuously to take immediate action if needed. We also closely measure the technical performance of your video delivery using [Golden Signals](https://sysdig.com/blog/golden-signals-kubernetes/) – error, saturation, traffic and latency – which ensure that your videos are delivered with consistent quality, even during high-traffic periods. This means that your videos will play smoothly, no matter where your audience is located. 

&nbsp;

This autonomy over our infrastructure gives us the power to take care of video delivery and performance end-to-end, so you can focus on creating great content, knowing that your videos will be delivered smoothly to your audience. 

## 2. Flexibility to expand and give you what you need for your videos
We have the elasticity to expand/offload to a cloud provider, based on your needs, ensuring high performance no matter how many minutes of videos. 

&nbsp;

Not only this, having our own infrastructure means more flexibility to be able to offer you functions as per your need. Let's say you need a special feature like AI integration or auto-captioning on all your videos. We can easily accommodate it by adding custom hardware or deploying a solution fit for your use-case.

## 3. A Content Delivery Network (CDN) that offers global delivery
We partner with the best CDN provider in the world to help deliver your videos anywhere with minimal latency. With a robust CDN that has a vast network of 140+ points of presence worldwide, we offer robust transmission, reliable connections, and cutting-edge tools to deliver live streaming video across the globe.

## 4. Video encoding at <u>zero cost</u> supported by ASICs

Our infrastructure uses Application-Specific Integrated Circuits (ASICs) based encoding, an innovative hardware-based encoding that is faster, greener, and cheaper than CPU-based encoding by an order of magnitude. Using ASICSs means lower power consumption costs, which is why we are able to offer [video encoding at zero cost ](https://api.video/blog/product-updates/video-encoding-pricing-update/)to you. 

## 5. Security of videos by default and reliability at all times

For reliability, your videos are always stored in two or more data centers so that server failures never result in loss of data. **You get a 99.999999999% (eleven nines!) storage durability with us.**

With token-based private videos, [custom domains](https://api.video/blog/product-updates/custom-domains-for-api-video/), AES Encryption, your videos are secure with us by all means.

## 6. Video storage and delivery in the US and the EU

One of the most important parts of our infrastructure is our ability to offer you the freedom to decide where you store your videos. This means that you can [select the storage location](https://api.video/blog/product-updates/introducing-multi-region-video-hosting/) that best suits your needs, whether for compliance with local laws or for faster performance for your users. 


small_multi_region_A.png

thumbnail_multi_region_A.png

multi_region_A.png

On top of the freedom to choose your storage location, we have recently updated our infrastructure with delivery servers in North America, and improved our CDN services in the region. This initiative guarantees faster, more efficient video delivery within North America and means that your American users will experience faster and higher quality video playback than ever before.

&nbsp;

With this update, you can have multi-region storage for your videos. So now, if you are working on a project in Europe and one project in the US, you can benefit from multi-region storage. Each Project you will create within your account will hold a different API key, and its own settings, including the video storage location. This means that you can link each project to a single region based on your customer's video storage preferences, taking your reach global. 

## Wrapping up

Unlike competitors relying solely on hyperscalers, api.video has forged a different path. While the  approach of others may seem convenient, scaling up often leads to increase in costs. In contrast, our [self-managed infrastructure ensures cost efficiency](https://api.video/product/video-infrastructure/), offering stability and scalability without the unpredictability of escalating bills as volumes rise.

&nbsp;

At api.video, our goal is to provide you with the highest quality video streaming experience, and our investment in owning and managing our infrastructure underlines our dedication to this goal. 

&nbsp;

_Create your [free sandbox account](https://dashboard.api.video/register) with us now and see what lies on the other side._




How api.video’s global infrastructure enables seamless video performance

small_GlabalInfra.png

thumbnail_GlabalInfra.png

Global-Infra.png

t02cw29ka-u04jtt0jcg3-549047173ac2-512.jpeg

Artem Matinian

It’s natural that one will think about integrating videos into their project. There are so many use cases for a video that we cannot even start to count. From user-generated content like Youtube, TikTok, Instagram, and the likes, through e-learning apps, personal trainers, e-shopping, and the list goes on and on, there’s no limit to what you can do with moving images that zoom across the fiber optics as digital signals from one place to another. 

&nbsp;
 

Is there are catch, though? How easy is it to implement videos into your project, app, or website? In this article, we will look at the options, challenges, and solutions for getting video infrastructure up and running.

## The Casual Cloud Vendor ☁️

Probably, the first thought of every developer (with a mainstream line of thinking) is AWS. It comes naturally, as most of the existing infrastructure is probably set up on AWS, Azure, or the like. Who can blame you? it’s convenient, easily scalable, and…. can get quite expensive. Not only that, it might be difficult to implement as well; think about:

&nbsp;
 

- Having DevOps that specialize not only in AWS but also in the video area
- If you don’t have such a team, then you’ll need to hire people for that.
- Time-consuming setup
- High price

So-you-wanted-to-use-AWS-to-save-costs.png

Here’s the implementation list of all the different services to deploy and setup to have video-on-demand with AWS:

AWS-requirements.png

That’s not all; you’ll also have to build the client that uploads the videos yourself and plus all of the front-end. You can already understand the costs and time involved with this project. 

&nbsp;

“Alright”, you say, now what? isn’t it better to just build the whole architecture myself? what’s the point of using AWS if it’s costly, complex, and resource intensive?

##The DIY solution 🛠️

Let’s go with this simple idea. You want to create an upload button where users upload their videos to your app or website. You already have quite a few users and you know that the feature will be adopted quite quickly, right?

&nbsp;
 
The minimum requirements are:

&nbsp;
 

- Rent a server for $120/month (i.e Cloudflare, DigitalOcean and the likes) with the following available resources (vCPU: 4, 16GB of memory, 250GB HDD)
- Install a web server like Apache, Nginx
- Create a hosting logic on your server
- Find a third-party video player
- Create your application and add an upload button to allow your users to send their videos created with their last smartphone model.
- Allow the user to play their videos freshly uploaded with the video player
- Deploy your application on the server

&nbsp;
 

It does sound easier than AWS, right? why is the AWS solution so complex? why all of these services?

&nbsp;
 
You launch the service, and it seems to run smoothly for a few hours, and then you start to get some emails from customers, like:
&nbsp;
 

MichaelScott777 says:
```
💡 My playback is really choppy, and it takes forever for the video to load! why are you so slow (that’s what she said 😀)
```
TheShrute909 exclaims:

```
💡  Why is the video is so slow?!?!?!??!!?!? it takes the video 5 hours to show! help!!1
```

&nbsp;
 
Your users are calling out that the playback experience is poor. There is a lot of buffering before the video starts to play.

&nbsp;
 

So you start Googling around, and you discover that you can’t just upload the video; you need to encode it with different qualities, plus if you want to stream the videos, you also need to implement some specific protocols, and you start going down the rabbit hole: HLS, DASH, H.264, HEVC, AV1 and etc. “WHAT THE HELL IS ALL OF THIS?” you ask.

&nbsp;
 

Then you stumble upon something that seems like salvation: [FFmpeg](https://ffmpeg.org/)! a video processing “Swiss knife” you hail in victory and pound yourself on the chest. You’ve made it. After several weeks of sleepless nights and 59.7 coffee cups later, it’s installed, it’s running, and magically does the job (you don’t really understand how completely, but it works).

solution.png

Everything seems to run smoothly, but you are afraid to touch anything as you focus on your main product, and if you start messing around with the video monster again, you might sink more time into it. But then your users start to ask for more features around video:

&nbsp;
 

CryptoKing001 is asking for this feature:

```
💡 Heellooo!, how can I know how many people watched my videos? <3 <3 <3
```


You grab your head in fear, and the anxiety builds up. You can’t sink in more resources into that video thing, and that 3rd party video player I’ve used doesn’t provide analytics (!!!!). So, you decide to outsource the whole thing, although you did have a limited budget setup for this project, so you go over budget.

&nbsp;
 

The app seems to be running fine for a few weeks, and many users upload their videos daily. You check your monitors and discover that you are running out of disk space! the product is minutes from being down because of all of this video thing; eventually, it goes down, and you generate some bs message to your users about vertical scalability that they have no idea what you are talking about. Eventually, you rent more servers and add more disk space; the product is up again, but, again, you are way over budget already with that analytics stuff; now you have to pay more for space (argh!). At least you’ve evaded a disaster, but you get a new complaint:

&nbsp;
 

obee1kanobeeeeeeeeeeeee writes:
```
💡 why the videos don’t play after I upload them???? I have to wait for 5 minutes before it plays. MY VIEWERS ARE COMPLAINING!!! FIX IT!!!
```

Your head is already missing half of the hair it used to have before you started the project, and now this?! 

&nbsp;
 

You start investigating and find out that you have 100% CPU utilization on the video server; remember that magical salvation that you installed on the server: FFmpeg? now it gobbles up most of the CPU to encode the videos. So, you write another bs message to your users about encoding and some stuff you don’t even know about (and your users don’t even care), and you start sinking more money into the project. You buy more CPU and start scaling again.

&nbsp;
 
Few months past. You don’t need to buy shampoo anymore (at least that’s a good thing, you can save some money), most of your attention has shifted into scaling these wretched video servers, you are now an expert in video encoding and delivery, but you are losing users as they have no interest in your product, as all of your investment and resources went into this video project black hole.  You’ve hired more engineers that are dedicated to doing the video project, and the budget for the video project already went out of control a long time ago.

I-know-kungfu.png

You look back and think, how did I end up here? what could I have done better? would it be better to go with AWS? or maybe there are other solutions I could have considered?

## The Perfect Solution

Like with any other service, reinventing the wheel would probably lead to huge financial implications, but as we’ve seen AWS is not perfect as well. However, there are APIs that can solve this problem by providing you with a scalable and easy-to-use service, like api.video.

&nbsp;
 

- With api.video creating an upload scenario and even more is a matter of minutes.
- api.video has a far lower cost than AWS (check the cost calculator [here](https://api.video/pricing/aws/)) or DIY
- api.video has a strong infrastructure that is scalable and reliable
- api.video gives you the ability to select the storage location of yoru videos in the US or in the EU. This will ensure that your video content adheres to all relevant legal standards for you or your customers. 

&nbsp;
 

Check out the [get started guide](https://docs.api.video/vod/get-started-in-5-minutes) to get started in 5 minutes or create a [sandbox account ](https://dashboard.api.video/login) for free to explore api.video on your own!

Should I build my video infrastructure from scratch?

small_Frame 427319210.jpg

thumbnail_Frame 427319210.jpg

Frame 427319210.jpg

Should I build my video infrastructure from scratch? Challenge accepted

Video upload

Video update

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

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

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

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

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! 

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

Blog

Huge pricing update! Introducing video encoding at zero cost