codec

video create

small_cedric.jpeg

thumbnail_cedric.jpeg

cedric.jpeg

Cédric Montet

Product updates

At api.video, our goal is for video to be easy and affordable for anyone to build, be it individuals or organizations. We understand that achieving this goal means reducing costs at some stage of the video streaming process. That’s why, we now offer adaptive bitrate encoding for your videos at zero cost. 

&nbsp;

Yes, you heard me right. 

&nbsp;

**Encoding videos will be absolutely free for all video qualities (1080p or 4K) at [api.video](https://api.video/) - no hidden calculations, footer notes or tricks.**

(Check out this [video](https://www.youtube.com/watch?v=ouosgLbW7Ts) for more details) 


## A step towards making video streaming affordable

Video encoding is crucial as it makes it possible for videos to be shared and played smoothly on the internet. It is why we are easily able to consume various types of video media, whether it’s a YouTube video, our favorite shows on Netflix, or even catching up with friends across the globe on Zoom. Video encoding basically makes the world go around in regards to anything related to video and video content.

&nbsp;

We at api.video recognize that. From [increasing the transcoding and playback speed ](https://api.video/blog/product-updates/2021-in-review/)to building [specialized hardware like ASICs](https://api.video/blog/video-trends/the-comeback-of-specialized-hardware/) cards to increase our transcoding capacities, we've been working to make video streaming easier for you every day. And after dedicating ample time to engaging with our customers and learning about their concerns, free encoding seemed to be the next step in this direction. 

&nbsp;

So, we worked tirelessly behind the scenes to give you what no one else will - free encoding for all video qualities, be it 360p or 4K. 

## How does free video encoding benefit you as a customer

The benefit is straightforward: you save a LOT of money!

&nbsp;

- With free video encoding, you will have one less thing to worry about. As you know, you pay for three things for streaming videos — encoding, hosting, and delivery – out of which encoding is the most expensive, especially if you have a lot of videos. Free video encoding will allow you to focus your attention and resources to what is most important.

&nbsp;

- As the video needs of your app users grow, you might need to scale up your encoding capacity. Free video encoding services will give you the power to scale without any additional costs, meaning your users can handle more videos without increasing your expenses.

&nbsp;

- You can [migrate from your previous provider to api.video](https://api.video/compare/azure-media-services/) without paying an ‘entry tax’ to us. With free video encoding, you no longer need to spend money on encoding videos with a new provider when you have already paid for encoding with an older one.

&nbsp;

Now with all the saved cost, you can allocate your resources and money to a place where it is actually important – building your product and delighting your users. 

## How to get started

To use the free video encoding benefit, getting started is easy. 

&nbsp;

- If you’re a new user, [sign-up](https://dashboard.api.video/register) for a free sandbox account and start uploading your videos
- If you are looking to migrate from another vendor, [import](https://import.api.video/) your videos from your current vendor
- If you have any questions, [talk to us](https://meetings.hubspot.com/diego398/cc-talk-to-us?__hstc=54467703.754940701eda85e3c99a902d8ab0b988.1687266643206.1694417789132.1694427271479.149&__hssc=54467703.3.1694427271479&__hsfp=3654297906) by booking a slot in our calendar

&nbsp;

To know more about our[ features](https://api.video/features/), [pricing](https://api.video/pricing/) or ask any other questions, [talk to our team ](https://meetings.hubspot.com/diego398/cc-talk-to-us?__hstc=54467703.754940701eda85e3c99a902d8ab0b988.1687266643206.1694162373815.1694167498585.144&__hssc=54467703.1.1694167498585&__hsfp=3654297906)and we will help you out. 

&nbsp;

Or, you can straightaway [sign-up](https://dashboard.api.video/register) for a free sandbox account and check our product out for yourself. 


Huge pricing update: Introducing video encoding at no cost

large_Blog_Zero Cost (2).png

medium_Blog_Zero Cost (2).png

small_Blog_Zero Cost (2).png

thumbnail_Blog_Zero Cost (2).png

Blog_Zero Cost (2).png

Normal

logo_avatar.jpg

api.video

Video trends

Modern technology has been helpful for an increasingly fast and simple method of consuming various types of video media, whether it’s a YouTube video, our favorite shows on Netflix, or even catching up with friends across the globe on Zoom. Despite the relative ease of doing anything related to video, a few complex processes take place behind the scenes, away from public view. One such process is video encoding.

Video encoding basically makes the world go around in regards to anything related to video and video content. Thanks to the technologies behind the video encoding process, it has become much easier for people and companies to share video content on the internet. But what exactly is video encoding, and what happens during the process? We’ll take a closer look at this and much more in this handy guide to video encoding.

## What is video encoding?

poster-1_2.png

In a nutshell, video encoding occurs when you take raw video footage, either from a digital camera or an analog film camera, and digitally compress it to make it a more manageable file size. Video encoding happens daily in both professional and personal capacities, and many people don’t realize it.

But, without encoding, services like Netflix and YouTube would not exist – or, at least, not in the same way that it does today. Without it, we couldn’t send videos of our beloved pets to our friends and family as easily as we can today.

## Why is video encoding used?

There are a variety of reasons why video encoding is used, but all factors point to the single function of video encoding – **compression**.

This is done to ensure optimal performance and compatibility with a selected suite of software and hardware, be it for DVD/Blu-ray playback, mobile viewing, online video streaming, or general video editing. A file's video and audio information undergo transformation and compression during the encoding process, all in accordance with the requirements of the selected encoding standard.

On a professional level, the ability to compress raw video into more manageable sizes makes it easier to transmit video content such as training, promotion, presentation, and so on over the internet. 

On a personal level, video encoding makes it much easier to send videos taken from your phone directly to friends and family. Most modern-day personal devices have built-in video encoding capabilities to allow for this to happen without a second thought.

To put things in perspective, uncompressed or unencoded video can have a data rate that’s as low as 3,000 Mbps and as high as 12,000 Mbps, depending on the length and quality of the video recorded. 

**Without encoding, it would take up to days for anyone to not just transmit video, but to be able to consume it, too.**

## Differences between video encoding and video transcoding

You need to be familiar with two more [essential terms related to video encoding](https://api.video/what-is/) – transcoding and codecs.

Transcoding relates to the conversion from one digital encoding format to another. It takes the already encoded video file, decompresses it, and then alters it before re-encoding or compressing it into a different codec. Codecs are what allow encoding to occur in the first place. They are software or hardware that gives us the ability to compress video to make them more easily stored and delivered tightly.

While you may hear “encoding” and “transcoding” used interchangeably, the two terms actually mean different things. Putting it succinctly, encoding is the initial process of compressing a video from a source – such as a camera – into a codec, while transcoding takes an already encoded video file to convert it into a different codec.

## Examples of video codecs

In order to understand video encoding, you must first be familiar with two interrelated terms: [video codecs and video formats](https://api.video/blog/product-updates/every-video-format-codec-and-container-explained/). These also tend to be used interchangeably, but much like the terms encoding and transcoding, they refer to two different things.

Video formats are the type of files in which the compressed video/audio is stored. Also known as a “container”, you can tell what a video format is by looking at the file’s extension — the three to four characters that sit after a period in a file name. Here are some of the most common video formats used today:

* MP4
* FLV
* MOV
* MKV
* LXF
* MXF
* AVI
* WebM
* QT

On the other hand, **the codec is short for “Coder / Decoder” (compression / decompression)** and relates to the video compression algorithms that allow encoding to happen. Over the years, codecs have gone through multiple iterations as it coincides with the increasing sophistication and rise in the quality of filmmaking. 

If you’re a content creator, you might be aware of some of the video codecs that exist today:

- **H.264 – also known as AVC, this is the most widely-used video codec available on every platform and mobile device.**
- H.265 – also known as HEVC, stands for High-Efficiency Video Coding, and it’s slowly overtaking H.264 as the standard. This codec can compress video much more efficiently than its predecessor.
- **VP9 – is an open-source, royalty-free codec developed by Google and is considered the direct competitor of H.265. The video compression codec VP9 was created to reduce file sizes, making streaming videos simpler.**
- **AV1 – is another royalty-free, open-source codec released in 2019 by the non-profit Alliance for Open Media. It was developed to become the successor to Google’s VP9 and contend with HEVC more directly.**

## How do different technologies handle video encoding

As you may have suspected, there are a majority of ways that different technologies handle the video encoding process. Let’s take a look at the most common technologies that use video and how video encoding works on each of them:

### Video editing software

When it comes to video content creation, a majority of people will use one of two video editing software — Adobe Premiere Pro or Apple’s Final Cut Pro. Both of these video editing software handle video encoding in very similar ways: when exporting the finished video.

Depending on which device the video content is recorded on, it will already be encoded and formatted according to the settings of the device. For those using iPhones recording 1080p video at 25 frames per second (FPS), for example, the iPhone will automatically encode the video using H.264 and contain it in a .mov file format. The video editing software will “open up” the container to get to the encoded, compressed video file within so the editing process can begin.

After editing the footage is complete, it will need to be exported, which typically concerns video encoding. The edited raw media taken from a recording device such as a camera will be encoded via the codec of the person’s choosing before being put into a .mp4 container once they’ve hit “export”. As we’ve mentioned before, the most common codec used in video content creation is H.264 for HD videos, with 4K videos using H.265. 

### Websites

Different websites utilize different techniques to handle video encoding – with a majority of the major sites like YouTube, Netflix, and so on using their own technologies to handle the process. A majority of social media websites allow you to upload video files directly onto the site to share, although most of them require the files to be saved in specific containers. 

These websites will take your video file and transcode it before using their own systems and serves to re-encode it to match multiple display resolutions. This process will happen regardless of your video file's original codec and settings. Different websites have different processes, but companies that don’t have the capacity to build their own video encoding systems can use a third-party application programming interface (or API) to handle this process. These APIs act as [dedicated video encoder](https://api.video/encoding/) that allows companies to add on-demand videos to their websites more efficiently.

Using [api.video](http://api.video) as an example, all of the videos submitted to the platform will be transformed into H.264 codec in an MP4 container. This may be done using transmuxing and/or transcoding.

We expect the video bitrate to be lower than 16 Mbps for up to 1080p resolution and 50 Mbps for up to 4K resolution. We accept any bitrates, however, we will scale them down to the limits mentioned because anything above is usually challenging for most viewers’ connection to watch.

### API

The ability to generate, store, and distribute video is made possible via a video API. [api.video](http://api.video)’s solution can be tailored to suit any specific need. 

The backend process of video on demand (VOD) is exceptionally complex, even if you’re a software programmer specializing in video. It is necessary to encode, package, and typically transcode the data before sending it to any of several possible destinations. All of these things, and more, may be done with minimal fuss using api.video.

Our API basically keeps the complexities of streaming media hidden from view, so you can rapidly develop apps with as much control as you need. This saves time and effort so developers can concentrate on making the product.

## Conclusion

As you can see through this video encoding guide, a lot of work goes into making the video you watch and the video you share possible. Without video encoding compressing raw video footage, it could take days to upload and transmit video content over the internet and perhaps even longer to be able to download and enjoy them. 

The best part about encoding at api.video is that is offered at ZERO cost. You will only be charged for delivery and hosting of your videos, and the encoding will be free. Now integrate your videos in minutes with api.video or [contact us](https://api.video/contact) for more information.

A Guide to Video Encoding & Video Codecs

large_poster-3.png

medium_poster-3.png

small_poster-3.png

thumbnail_poster-3.png

poster-3.png

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

Erikka Innes

Encoding and transcoding are often used interchangeably but they have slightly different definitions. **Encoding is the initial process of converting raw video files into a specific digital format or codec.** It involves compressing and packaging the video data, often to reduce file size while maintaining acceptable quality. Encoding prepares the video for storage, transmission, or playback.

&nbsp;

**Transcoding, on the other hand, involves converting a video from one digital format or codec to another.** This is typically done to optimize the video for different devices or platforms, adapt to varying network conditions, or ensure compatibility with specific playback requirements. Transcoding occurs after encoding and often involves changing resolution, bitrates, or formats without altering the content itself.

## What goes on behind encoding a video?

It's easy to say that encoding is when you go from an _uncompressed source_ to a _compressed source_, but you may ask, what exactly do compressed and uncompressed sources mean?

&nbsp;

Uncompressed sources are video files that contain data that comes directly from a camera sensor vs. encoded video. In the digital space, it's SDI (Serial Digital Interface) or HDMI (High Definition Multimedia Interface). Both of them are popular standards. You'll find HDMI in places like your GoPro camera, or a mini camcorder. These days, you might also find HDMI in professional settings, but SDI is more common due to its reliability. Another example of an uncompressed source would be something analog, for instance, VHS tapes.

&nbsp;

A compressed sources, on the other hand, are video files that have undergone compression during the encoding process. Compression involves reducing the file size by removing unnecessary information or encoding the data in a more efficient format. This process results in a smaller file size, making it more manageable for storage, transmission, and playback.


giphy (4).gif

## What are the types of transcoding methods?

There are three types of transcoding, depending on what you are trying to do to get a video to suit a particular browser, player, or platform:

* **Lossless-to-lossless** - This type of transcoding maintains the quality of your video across formats but allows you to take advantage of better hardware or compression algorithms. 
* **Lossless-to-lossy** - This type of transcoding will decrease your video in quality, but it will benefit you in ways such as – you will get a smaller and/or faster playing file, or a file that is compatible with the requirements of a particular platform, player, or browser.
* **Lossy-to-lossless** - Sometimes people think this means they are regaining quality. This isn't the case in this type of transcoding. If you transcode from a lossy format to a lossless format, all that it means is that you will not lose additional quality in the conversion process. You will not regain data you already lost through compression.

## Codecs for encoding and transcoding

For both encoding and transcoding, you will need to make use of codecs. A codec's job is to compress and decompress video files. It's right there in the name -  **co**mpress **dec**ompress or encode decode. So basically, codec is an algorithm that takes the video and shrinks it or changes it into a format that makes it compatible with the requirements of wherever you want the video to play. There are many codecs because there are many ways to compress a video or livestream for playback.



shrink video.gif

## What is transmuxing?

Now that you know the difference between encoding and transcoding, let's throw one more term in there - transmuxing. Transmuxing is when you change the container for a video instead of the format. It's a way of repackaging a video to make it compatible somewhere without changing what's in the file. 

&nbsp;

This process is faster than encoding or transcoding and takes less computing power because you only change the container, not the file. It's great when you need to quickly make something available, but the downside is that it doesn't handle things like making multiple video resolutions available. If you choose a container type that's incompatible with your video file, you may also cause compatibility issues, resulting in not being able to play the video.

## In closing

* **Encoding** - Encoding happens when you compress a raw data file from a video camera sensor or an analog source like a VHS tape. 
* **Transcoding** - Transcoding happens when you take an already compressed video file and change it to another format.
* **Transmuxing** - Transmuxing happens when you change the container of a video file but leave the video file untouched. 

We hope that explains the difference between encoding and transcoding clearly. 

_If you are looking for an affordable video API solution that does not burn a hole in your pocket for transcoding and encoding videos, check out our offerings on our [homepage](https://api.video/) or [sign-up for a free account here](https://dashboard.api.video/register)!_

Encoding and transcoding: what's the difference? 

Encoding and Transcoding - What's the Difference?

large_encoding-and-transcoding-whats-the-difference.jpg

medium_encoding-and-transcoding-whats-the-difference.jpg

small_encoding-and-transcoding-whats-the-difference.jpg

thumbnail_encoding-and-transcoding-whats-the-difference.jpg

encoding-and-transcoding-whats-the-difference.jpg

doug.jpg

Doug Twitter

Doug Sillars

Once I upload my video, how quickly will it be ready to be viewed?

Our reply to this question has always been “it's really fast.”  And it is really fast. But, the dev team gave me access to the backend database, and pointed me to a few tables that might be helpful (thanks to Thomas Persohn for your patient help!)

Thus armed, I waded into a sea of data to better understand how fast our videos are encoded at api.video

## Encoding

When a video is uploaded to api.video, it is re-encoded to a HLS stream, with several different video dimensions and bitrates.  This allows api.video to deliver properly sized video to all users - no matter the device or network connection. (Read our post on [Responsive video delivery](https://api.video/blog/video-trends/responsive-video-delivery/) to learn more.)

> Summary:  All videos are encoded at 240p, 360p, 480p, 720p, 1080p and 2160p. However, the videos are only encoded up to the initial size of the video (so if the original video is 720p, there will not be 1080p or 2160p versions available). 

**FYI:** For our customers, encoding is absolutely free – we offer adaptive bitrate encoding at zero cost. 

How long does this step take? If a customer uploads a video to our service - they want to know how efficient api.video creates the content for viewing.

### Data in the study

We are constantly making adjustments to our infrastructure to speed the encoding step of our video (and that is one reason this post is dated 2H 2020 - we expect to be faster in early 2021). The last major adjustment was made in mid October, so the data presented in this study from every video uploaded to the api.video service between 15 October and 2 December 2020.

### Parameters that affect encoding

There are 2 major parameters that affect the speed of encoding a new video stream: the output dimensions and the length (duration) of the video.  

#### Dimensions

The output video dimensions have a huge impact on video creation - a 3840 × 2160 (or 4K or 2160p) video has millions more pixels than a 320x240 (240p) video, so it takes a lot longer to create.  In general, the videos exit the encoding process from smallest to largest.

#### Duration

If a video is 30 frames per second, and is 60 seconds long, there are 1800 frames to be created.  If a 30 frame per second video is an hour long 3600s), there are 108,000 frames to be created, so the longer the video - the more time for creation.

## Analysis

To better understand the encoding time, I divided the data by the size of the output video size, and looked at 2 lengths of video  - those under 5 minutes, and videos that are 45-75 minutes long (we are often asked how long a 1 hour video takes to encode).

I calculated encoding time for each bucket of video using percentiles.  

> Quick review - percentiles break the data into 100 evenly sized segments, so the 25th percentile is when 25% of the videos have been encoded. The median is the 50th percentile, and is when 50% of videos have been encoded.  We report here to the 95th percentile for video encoding.

### Short videos - under 5 minutes long

Many of the videos uploaded to api.video are short - under 5 minutes long.  These videos are generally ready to play in a few seconds:



Videos are generally ready to play in a few seconds

screenshot-2020-12-04-at-09-41-12.jpg

The above chart has a lot of data, the 25, 50, 75, 90 and 95th percentile encoding times for all 6 variants of the video that api.video creates.

The median video is ready to play (at 240p) in 5.6 seconds, but a 720p version will be ready in 15s after encoding begins, and the 4K version will be ready in 37 seconds.

95% of all videos (under 5 minutes) will be playable in 32.6s, and will have 1080p versions ready in just over 2 minutes (140s).

### Long videos - 45 - 75 minutes long

Our most frequently asked question on encoding is "how long for a 1 hour video to be encoded and ready?"  Here are the numbers:


how long for a 1 hour video to be encoded and ready?

screenshot-2020-12-04-at-09-42-18.jpg

Observant viewers will see there are no 4K videos in this report. At this time, there are very few 4K streams that reach the 1 hour timeframe, and the data was quite noisy.  Hopefully, more of our 'long uploads' will add 4K support, so we can add this metric in our next update.

The median hour long video (red line) will be ready to play (at 240p) in just over 9 minutes (555s), and a 720p version will be ready about 18 minutes after encoding begins (1099s).

95% of hour long videos will have a 240p version ready in 33 minutes, and 720p in 54 (3230s).  the 1080p version will be available for 95% of videos in 108 minutes,

## Conclusion

Short videos will be ready to play - even at high resolution - in under a minute: the median 4K encoding for a short video is 37s. 

Hour long videos take longer to encode, and the median 720p video will be ready in 18 minutes.  95% of 720p videos will be ready to play in 54 minutes.

This is really fast! You can have responsive streaming video ready for your customers in just a few minutes with a simple upload!

That said, our team is working hard in the background to improve our infrastructure to make our encoding speeds even faster! 

We're really excited to have hard numbers to share with you on our encoding speeds, and we cannot wait to re-benchmark this data in 2021 to see how much faster your videos will be encoded as we improve our service.

Do you have questions about api.video or video encoding? Reach out on our [community page](https://community.api.video).


How fast does api.video encode video? 2H 2020 data

medium_gif.jpg

small_gif.jpg

thumbnail_gif.jpg

gif.jpg

Huge pricing update! Introducing video encoding at zero cost

Player SDK

Video list

Video upload

Player

Mobile

thumbnail_mathieu_round-1.png

mathieu_round-1.png

github-brands.svg

Github Mathieu Thiry

linkedin_logo_initials.png

LinkedIn Mathieu Thiry

Mathieu Thiry

Tutorials

React

Typescript

Next.js

This tutorial will show how quick and straightforward it is to build a TikTok clone as a progressive web app (PWA) with [api.video](https://api.video/use-cases/short-form/) and Next.js. A PWA is a website that looks and behaves like a mobile app. It can have all the capabilities of a native mobile app, like design and functionality, and you can even install it on your phone!

TikTok’s core functionality is to create and share short-form content. So today, we will focus on these crucial features:
- **Get** videos with [@api.video-node.js-client](https://github.com/apivideo/api.video-nodejs-client) package
- **Display** videos with [@api.video/react-player](https://github.com/apivideo/api.video-react-player) package
- **Upload** videos with [@api.video-typescript-uploader](https://github.com/apivideo/api.video-typescript-uploader) package
    
Thanks to these 3 easy-to-use api.video tools, you will have everything you need to build a **smooth scrolling** TikTok feed. Let's start 🎬
    

*NB: You can see the demo [here](https://api-video-tiktok-demo.vercel.app) and the complete code [here](https://github.com/apivideo/tiktok_clone). We invite you to clone the project, insert your free-to-use API key from our Sandbox environment and start testing it with your videos!*

Screenshot TikTok demo on desktop screen size

large_cover_image_tiktok_clone.png

medium_cover_image_tiktok_clone.png

small_cover_image_tiktok_clone.png

thumbnail_cover_image_tiktok_clone.png

cover_image_tiktok_clone.png

## Quick Setup

As in this tutorial, we will focus on the core features. We provide two links on how to start the project easily: 

We created a dedicated [tutorial](https://github.com/apivideo/Next.js_Starters-) on building a **new Next.js application** using Create Next App and Typescript. Please follow these [instructions](https://github.com/apivideo/Next.js_Starters-) to get an up-to-date Next.js app.

1. Transform the Next.js app into a PWA with [next-pwa](https://www.npmjs.com/package/next-pwa). Complete all steps with this article [here](https://blog.avneesh.tech/how-to-create-a-pwa-with-nextjs).
2. Once inside our project, install api.video’s [Node.js client](https://github.com/apivideo/api.video-nodejs-client), [typescript video uploader](https://www.npmjs.com/package/@api.video/video-uploader), [react’s player SDK](https://www.npmjs.com/package/@api.video/react-player), and [swr](https://www.npmjs.com/package/swr) for data fetching.

## Get videos

## Back-end: **Create API routes with api.video/nodejs-client**

You can declare the API under the `pages/api` directory. When you declare a file or folder inside `pages/api`, it will generate an URL endpoint that matches `/api/<folder>/<file>`. We set our API key in an environment variable in the `.env.local` file for security.

Now create a `pages/api/videos/index.ts` file. Inside this file, add the following code:

We can get videos in just a few lines of code by applying the method `list`. Check more methods you can use with our *nodejs* client [here](https://github.com/apivideo/api.video-nodejs-client/blob/main/doc/api/VideosApi.md#list).

### Front-end: Client-side data fetching

**Initialize swr**

[useSWR](https://swr.vercel.app/docs/getting-started) is a React Hook library made by Vercel. It fetches data from an API or other external source, then saves that data in a cache and renders the data. We configure swr in `_app.tsx`.

The useSWR hook takes two parameters and returns data. It accepts the following:

- A `Key`: API URL we are calling.
- A `fetcher`: a function that returns the fetched data.

We call `useSWR` hook. Once we get the result, we store data in the state `videos`. Then, we  `map` videos around  `VideoComponent`, whose role is to display videos.

### How to create smooth scrolling

thumbnail_screenshot_mobile.png

screenshot_mobile.png

The app has a `height: 100vh`. It has 2 sections. The first one, the div `app__video`, is scrollable with a `height: calc(100%-50px)`, and the second one, the upload section, has a fixed `height: 50px`.

**CSS scroll snap**

As written above, the class `app__videos` has the property `scroll-snap-type: y mandatory;` and  `overflow-y: scroll;` making the scroll vertical. This property allows for the creation of well-controlled scroll experiences by declaring a scroll snapping position, in our case, at the `start` of the video. To obtain this perfect result, we just need to add the property `scroll-snap-align: start` to the child component, here the `ApiVideoPlayer` *(see code in the section below.)*

## Display videos

We are going to use [api.video react player component](https://github.com/apivideo/api.video-react-player), which allows us to display our videos in just a few lines of code. The only requirement is to pass the `videoId`. Create a `ref` to manipulate methods like `pause` or `play` easily. We set the `object-fit` CSS property in `cover` to ensure that even a landscape video will take the full size.

## Upload a video

[api.video](http://api.video) provides a [typescript library](https://www.npmjs.com/package/@api.video/video-uploader) to upload videos to api.video using delegated upload token. The easiest way to create an upload token is to open your api.video’s dashboard, go to the upload tokens section from the sidebar, then click on the “*Create upload token*” button. Find the full guide [here](https://docs.api.video/vod/delegated-upload-tokens).

**Upload using delegated upload token**

We create a hidden input with a type `file` that we activate programmatically. Create a new object `VideoUploader`, and add two options, the `upload token` set as an environment variable for security purposes and the current `file` to upload.

That’s it. You are done 🎉. Now you can safely and efficiently upload videos.

## Conclusion

We recreated TikTok thanks to [api.video’s features](https://api.video/use-cases/short-form/) in just a few steps. We did not cover every topic, but the entire code is available [here](https://github.com/apivideo/tiktok_clone).

And we're done! To start building right now, check out our **[docs](https://docs.api.video/)** and **[sign up for a free account](https://dashboard.api.video/register)**.

***BONUS***

In this part, I will explain how **to send** 💟’s

Each video object has a `metadata` property containing an array of key-value objects. So we can add a ‘*likes*’ metadata with a numeric value and increase this value when the user has pressed on the 🤍 icon!

To record the new data, we need to update the video by making an API call 

Note: Find a full description of the upload method [here](https://github.com/apivideo/api.video-nodejs-client/blob/main/doc/api/VideosApi.md#update). 

Build your own TikTok with PWA and api.video

large_cover-tiktok-s-clone.png

medium_cover-tiktok-s-clone.png

small_cover-tiktok-s-clone.png

thumbnail_cover-tiktok-s-clone.png

cover-tiktok-s-clone.png

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

Python

Sometimes you just want to upload a smaller piece of a video you have, but you don't want to take the time to edit it with FFMPEG or FinalCut Pro. If you just need a shorter clip and you know the start and end timecode, you can use api.video's clip feature. Today we'll walk through how to upload a clip from a video you have on your computer and how to take a clip from an online, publicly available mp4 link or a video you have stored with api.video.

## # Pre-requisites 

For this tutorial, you will need: 

* api.video account - [Sign up here](https://dashboard.api.video/register)
* api.video Python client - [Python client](https://github.com/apivideo/api.video-python-client)
* A video you can upload a clip from

## Installation 

Install api.video's Python client with `pip install api.video` 

## Code sample for uploading a clip from a video on your computer
Our code sample today is this:

### Video clip code walkthrough

What we'll be doing is a normal video upload. If you're new to uploads, with api.video it's a two step process. First you create a video container with all your metadata, and in this case, you'll also include the information needed to clip your video. Then you retrieve the video ID and use that to upload your video into the container. In this case, you will upload just the video clip into the container. When you're done, you'll have a new, shortened clip to display. 

1. First initialize the client and VideoApi and connect.

`client = apivideo.AuthenticatedApiClient("your API key here")

client.connect()

videos_api = VideosApi(client)`

2. Prepare the video payload with metadata that you'll use as the container. 

`video_create_payload = {
    "title": "My sample clip from a new source",
    "description": "test",
    "clip": {
        "start_timecode": "1",
        "end_timecode": "2",
    },
}`

3. Send a request with your payload to create the new video container, and retrieve the video ID. 

` response = videos_api.create(video_create_payload)
print("Video Container", response)

video_id = response["video_id"] `

4. Now it's time to upload your video. Open your video file in binary to get it ready to send, then send a request to upload it.

` file = open("test_vid45.mp4", "rb") 
video_response = videos_api.upload(video_id, file)

print("Uploaded Video", video_response)`

You can check your dashboard to see that you've successfully uploaded a short video clip! 

## Upload a clip from a link or video source

To take a clip from an online .mp4 link or a video source you have with api.video is easier than the process we just walked through. All you need to do is create a video and the clip will be created for you. If you use a link, make sure it's a .mp4 link. You can't, for example, grab a YouTube link and get a clip from that. 

If you're uploading a clip from an online .mp4 source, you specify the complete link, as a string for the **source** parameter. And if you're uploading a clip from a video you have stored with api.video, you can specify the **video ID** for the video you want to grab a clip from. 

In the example, I've put an .mp4 link in for the source. You don't need to do the second step that we did in the earlier walkthrough. Everything is handled with one call to the api.video API. 

## Conclusion 

Video clipping is great in situations where you wanted to grab one or more clips from a longer video, or you just wanted to edit a bit of content off the front and end of your video clip. Now, it's possible to do with the api.video API. Find all the information in [our Docs](https://docs.api.video/reference/api/Videos#create-a-video-object) (in the "Body params" section) or ask questions in [our Community](https://community.api.video/). Happy building!

large_clipping.png

medium_clipping.png

small_clipping.png

thumbnail_clipping.png

clipping.png

How to create a video clip with api.video

The first step to displaying your video online is getting it uploaded. Today we'll go over how to upload a video using Laravel 8 with api.video's PHP Client. Before we dive in, let's go over what we'll be doing when we upload a video. 

Uploading a video is a two step process. First, we create a container for the video and retrieve the video ID. Then, we upload a video into the container by referencing the ID. You can only upload a video to a container once, but you can modify details about the video at any time after that. Our uploader will let you add a title, description and list whether you want to have the video be public or private and whether you want to offer an MP4 link of the video for download. 

## What you'll need 
To get started, make sure you have these things:

* Account with api.video - you can sign up [here](https://dashboard.api.video/register)
* Laravel 8 - you can use other versions, but some things work differently
* NPM and node.js - you install these when you set up Laravel 
* Composer - you'll need this installed 
* [api.video PHP client](https://github.com/apivideo/php-api-client)
* Project repository - [https://github.com/apivideo/php-api-client/tree/main/examples/laravel/video_upload](https://github.com/apivideo/php-api-client/tree/main/examples/laravel/video_upload)

You can also review the API reference documentation for the endpoints used in this project: 
* [Create a video](https://docs.api.video/reference/api/Videos#create-a-video-object)
* [Upload a video](https://docs.api.video/reference/api/Videos#upload-a-video)

## Create your project
The first thing you'll need is a Laravel 8 project to work with. Here's what I did:

1. In a terminal make a new project by typing: **laravel new fileuploader** or similar project name.
2. Open your project folder, you'll need to install a few things.  
3. You'll need to add the api.video PHP client, so at the terminal type: **composer require api-video/php-api-client** 
4. You'll also need the symfony http client, at the terminal type: 
**composer require symfony/http-client**
5. And the last thing to add is nyholm/psr7:
**composer require nyholm/psr7**

You can type **composer update** to make sure everything is pulled in to your project and configured.
 
## Create a controller
We will need a controller for our video uploader, so let's go ahead and do that now. In the terminal in your project folder type: 

**php artisan make:controller UploadController** 

This will automatically create what we need to start building the controller. 

## Set up the home page with an upload form
For this walkthrough, we're using the home page to create an upload form. So in your views folder, go into **home.blade.php** and create the form. I selected to allow the user to add basic details about their project. I'm also using bootstrap, so the basic form looks like this: 

Image of upload form showing available fields

large_viduploadphp.png

medium_viduploadphp.png

small_viduploadphp.png

thumbnail_viduploadphp.png

viduploadphp.png

And here is the code that creates this form: 

We pull in the bootstrap details up top under the Scripts and Styles sections. Then for our form, we have all the form data sent in a POST request to the '/upload' route. (We'll need to create that route in a moment.) 

The form is straightforward - we list the type of data as text for the name of the file and the description of the file. For choosing whether the file will be public or offer an MP4 for download, we use a radio button, so the type is radio. For the video, we choose type file and then we set up our submit button. Bootstrap styles everything for us, so we're all set here. Now we need to handle the route. 

## Set up the /upload route
Open your **web.php** file and add a new route: 

**Route::post('/upload', 'UploadController@upload');** 

This route indicates that when submit is clicked in the form, it should go to /upload and carry out the upload instructions listed for the UploadController. 

We don't have that set up yet, so let's do that next. Also, the other routes are added into the project, you can see everything if you download the repository.

## Set up your UploadController
Our controller takes the details provided by the form, then uploads the content to api.video. Behind the scenes, we're going to need our api.video API key, so let's make sure we handle it securely. 

1. Go to your .env file. In the top section, you'll see items to do with your app. At the bottom of the list of items beginning **APP_** you'll see **APP_APIVIDEO=yourapikey**. Replace **yourapikey** with your key (retrieve it from your api.video dashboard). Don't add quotes. 
2. Open **RouteServiceProvider.php**.
3. In the file, take the commenting **\\** off of the line **protected $namespace = 'App\\Http\\Controllers';**. This returns the use of the automatic namespace, which is handy.
4. Open **UploadController.php**. 
5. Add this code: 


In our code, we set up the api.video client and collect the information from the request object that comes in from the form. We check if the data for the radio buttons is set and if it is, we add it to our payload for upload. Then we send the data and redirect the user to a page that says 'Success!' 

## Conclusion
These are the basics for uploading a video to api.video. You can try using different styles or set ups if you want to allow users to add more metadata on upload. If you have any questions or suggestions, please share them on our [community forum](https://community.api.video/). Thanks for reading! 



Upload a video with Laravel

webhooks

twitter-brands.svg

JavaScript

NodeJS

When our API has completed a video upload, the response contains all of the URLs you will need for playback:


```
"assets": {
          "iframe": "<iframe src=\"https://embed.api.video/vod/vi4blUQJFrYWbaG44NChkH27\" width=\"100%\" height=\"100%\" frameborder=\"0\" scrolling=\"no\" allowfullscreen=\"\"></iframe>",
          "player": "https://embed.api.video/vod/vi4blUQJFrYWbaG44NChkH27",
          "hls": "https://cdn.api.video/vod/vi4blUQJFrYWbaG44NChkH27/hls/manifest.m3u8",
          "thumbnail": "https://cdn.api.video/vod/vi4blUQJFrYWbaG44NChkH27/thumbnail.jpg",
          "mp4": "https://cdn.api.video/vod/vi4blUQJFrYWbaG44NChkH27/mp4/1080/source.mp4"
      },

```

Of course - the video has only **just** finished uploading. It needs to be transcoded into a video stream for playback. If you try to open the player URL, you'll get an error saying the video is not ready yet.

It's just like a false start in a race - you're ready to go - and you want to show the video to your users, but you show the link too soon - and it doesn't work. Disappointing all around. :(

You can see this for yourself at [upload.a.video](https://upload.a.video).  Upload a large file, and then click the "watch here" link. If you're fast enough, you'll get the error. (Our encoding keeps getting faster though!!)

"task failed successfully" windows "error"

small_windowserrorremixt.jpeg

thumbnail_windowserrorremixt.jpeg

windowserrorremixt.jpeg

## No more errors

No one wants to see an error. And we want to show off your new video to everyone ASAP. In order to ensure that the video is ready to playback (and avoid the false start), we can use api.video's [webhooks](https://docs.api.video/reference/api/Webhooks#create-webhook).  More specifically, we're interested in the ```video.encoding.quality.completed``` notification.

The response for this notification looks something like:

```
{ "type": "video.encoding.quality.completed", 
"emittedAt": "2021-01-29T16:46:25.217+01:00",
"videoId": "viXXXXXXXX", 
"encoding": "hls",
"quality": "720p"}
```

For each video uploaded, you'll get a webhook alert for each version of the video created. This adds a new wrinkle (or a new feature) to how we can display the video:




medium_quote-admiral-farragaut-upon-entering-mobile-bay-damn-the-torpedos-full-speed-ahead-david-farragut-143-46-25.jpeg

small_quote-admiral-farragaut-upon-entering-mobile-bay-damn-the-torpedos-full-speed-ahead-david-farragut-143-46-25.jpeg

thumbnail_quote-admiral-farragaut-upon-entering-mobile-bay-damn-the-torpedos-full-speed-ahead-david-farragut-143-46-25.jpeg

quote-admiral-farragaut-upon-entering-mobile-bay-damn-the-torpedos-full-speed-ahead-david-farragut-143-46-25.jpeg


* **As fast as possible (and damn the torpedoes!)**: Each video size is released as soon as it is encoded. Since the 240p video is the smallest video (in terms of pixels and KB), it is typically the first video encoded.  With this option, as soon as the 240p version of the video is encoded - play the video.  The downside is of course that the quality at 240p is less than ideal on most screens.


thumbnail_keep-calm-and-wait-for-it-400-400-black-white.jpeg

keep-calm-and-wait-for-it-400-400-black-white.jpeg


* **Wait for the nicest version**:  Only release the video when the 1080p version is released.  That way, you know that your viewers will have the best quality experience (but being a much larger video - it may take more time).



large_firstroundggk3mslrlqqobv3sv1vagoldilocks-hires.jpeg

medium_firstroundggk3mslrlqqobv3sv1vagoldilocks-hires.jpeg

small_firstroundggk3mslrlqqobv3sv1vagoldilocks-hires.jpeg

thumbnail_firstroundggk3mslrlqqobv3sv1vagoldilocks-hires.jpeg

firstroundggk3mslrlqqobv3sv1vagoldilocks-hires.jpeg

* **Goldilocks**:  Find the balance in the middle: not too fast/not too slow.  Not the lowest quality/not the highest quality. Perhaps the 480p version of the video is a good balance point: it'll look OK, won't take too long, and the 720p 1080p/4k versions are not far behind.

## Implementing your webhook

You can test this integration at [upload.a.video/webhook](https://upload.a.video/webhook).  

First we register a webhook at api.video to report to: upload.a.video/receive_webhooks

Then we add this code to process the webhook result when it arrives:

```
app.post("/receive_webhook", function (request, response) {
	console.log("new video event from api.video");

	//we're only getting video.encoding.quality.completed right now.. but let's be careful in case the webhook changes

	if (type =="video.encoding.quality.completed"){
	  let videoId = body.videoId;
	  let encoding = body.encoding;
	  let quality = body.quality;
	  liveStreamId = body.liveStreamId;
	  webhookResponse = {"event":type, 
	  					"emittedAt": emittedAt, 
						"videoId":videoId,
						"encoding":encoding,
						"quality": quality
						}
	  
	} 
	webhooks.push(webhookResponse);
	response.sendStatus(200);  
  });

```

This endpoint takes the webhook and adds it to an array.

## Video upload page

We've made 2 changes to the video upload page:

### Add an encoding selector

We add a selector in the form to allow to you pick the level of encoding you desire to release the video.  By default, we've selected 720p - on the higher end of things.

### Change how the video url is displayed

When the video is uploaded, the earlier versions of the upload demos just added the link to the video (the false start!).  We'll change the JavaScript on the page to do two things:

1.  Update the page that the video is being encoded, and the URL will be available shortly.
2.  Call the webhook endpoint to find out when the video encoding is completed.

```
console.log(video);
					videoId = video.videoId;
					playerUrl = video.assets.player;
					//we have the video URL, but it miight not be encoded yet. We need to get the webhook confirmation

					//STEP 1 tell them upload complete
					//hack to make the math look good.  yeah. i know.
					document.getElementById("chunk-information").innerHTML = "Last chunk"  + " is " + "100" + "% uploaded. Total uploaded: " + "100" +"%";
					document.getElementById("video-information").innerHTML = "all uploaded! We're now waiting for the server to tell us that the encoding is ready to play." ;
					//step 2 - start a new request for the webhook:
					var oReq = new XMLHttpRequest();


					oReq.open("POST", '/webhook', true);
					var qualityJson = {"quality":videoQuality,
										"videoId": videoId};
					console.log(qualityJson);
					var qualityJsonstring = JSON.stringify(qualityJson);
					oReq.onload = function (oEvent) {
						//encoding at selected quality is completed - tell the customer!!!
						console.log("Video encoded! Watch here: ",playerUrl ) ;
						document.getElementById("video-information").innerHTML = "Your Video has been encoded and is <a href=\'" + playerUrl +"\' target=\'_blank\'>ready to watch!</a>" ;
					}
					//send the quality value and the videoId we want to check on...
					oReq.send(qualityJsonstring);


```

So now the webpage is waiting for the Node JS server to say "hey the video encoding you are looking for is ready."

### Node JS code to check encoding versions

Recall that the webhook is writing every videoId and encoded version into an array. So we can just cycle through that array every 2 seconds to see if there is a video with the videoId and the encoding quality present. Once the webhook adds the video/quality - this will read that it is ready, and then reply back to the website that it is safe to show the URL to the user:


```
app.post('/webhook',(req,res) =>{
	var reqBody = JSON.parse(req.body);

	//video uploaded -but check to see if the 
	var videoId = reqBody.videoId;
	var videoQuality  = reqBody.quality;
	console.log("received  " + videoId + " " +videoQuality);
	//we need to see if this videoId and qulity have been encoded.
	//loop through all the webhook responses
	
	function checkWebhook(videoId, videoQuality, webhooks){
		foundMatch = false;
		console.log("there are " + webhooks.length + " webhook entries to scan");
		
		
		for(var i=0;i<webhooks.length;i++){
				if(webhooks[i].videoId === videoId && webhooks[i].quality === videoQuality){
					//we have a match!!
					foundMatch = true;
					res.sendStatus(200); 				

				}
			//}
		}
		if(!foundMatch){
			//no match yet, so wait 2 seconds and try again
			//not encoded yet, wait 2 sec and re-reun checkMp4
			console.log("no webhook yet.");
			setTimeout(checkWebhook,2000,videoId, videoQuality, webhooks);
		}
	}
	checkWebhook(videoId, videoQuality, webhooks);

})

```

## Conclusion

That's all there is to it. Instead of just showing the URL immediately after upload, we wait until the webhook tells us that the video is ready for playback. We can then provide the URL to our users (including the person who uploaded the video), and the link works - with "please wait while the video encodes" message.

Try it out at [upload.a.video/webhook](https://upload.a.video/webhook), and then use the code on [Github](https://github.com/apivideo/uploadavideoApps) to create your own webhook alerting function for videos.

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

False start: showing the playback url before the it’s ready

small_false-start1959569i.jpeg

thumbnail_false-start1959569i.jpeg

false-start1959569i.jpeg

False start: showing the video playback url before the video is ready

User generated content (UGC) can be an incredible addition to your application or website. Your users generate videos, and upload them to share with other users, creating a cascading effect that increases the number of videos on your platform.

In the past, we've looked at [video moderation](https://api.video/blog/tutorials/automated-video-moderation/) to protect you from inappropriate UGC. In this post, we'll look at mitigation strategies to limit the NUMBER of videos one user might upload. (Go [here](https://docs.api.video/reference/api/Videos#create-a-video-object) to check out the API reference documentation for uploading videos.)

## Overwhelming video content

Your user might just be enthusiastic about our platform, or perhaps they have nefarious reasons - but they are just uploading too many videos! Perhaps you just want the videos to stop - so you could ban or cancel the user's account.  But perhaps the videos are still welcome, they just need to slow down a bit.

In this post, we'll add a rate limiting step to upload.a.video/JS.html. This page uses our [JS uploader](https://api.video/blog/tutorials/new-video-uploader-javascript-library/) to simplify video uploads.

## Defining the rate limit

On our Node backend, we add the "express-rate-limit" library, and initialize it to allow for 5 uploads an hour:

```
//rate limiting code
//rate limiting to protect the demos
const rateLimit = require("express-rate-limit");
app.use(
	rateLimit({
	  windowMs:  60 * 60 * 1000, // 1 hour duration in milliseconds
	  max: 5,
	  message: "You exceeded 5 requests in 1 hour.",
	  headers: true,
	})
  );

```

We set the window for the rate limit to be one hour, and the maximum number of calls to be 5.

Now, the upload code does not use the NodeJS backend, so I created a dummy endpoint on the nodeJS server called "/ratelimit"

```
//this applies the ratelimit to all uploads.  Limit to 5 per hour
app.get('/ratelimit',(req,res)=>{
	console.log("rate limiting test");
	res.sendStatus(200);
});
```

Now we can make dummy calls to upload.a.video/ratelimit to trigger the rate limit in our JavaScript code.

## Uploading in the browser

When the form changes, the EventListener fires.  Previously, the video would begin uploading.  Now, we make a call to the "/ratelimit" endpoint to see if we can commence the upload:

```
 input.addEventListener('change', () => {
		console.log("upload commencing");

		//adding in rate limiting to prevent abuse
		var qReq = new XMLHttpRequest();
		qReq.open("GET", "/ratelimit");
		qReq.onload = function (oEvent) {

			console.log(qReq.status);
				//once we create the video id do stuff
				if(qReq.status == 429){
					//rate limited
					document.getElementById("chunk-information").innerHTML = "Your uploads have been rate limited. We allow 5 uploads/hour with this demo app. Please try again in a bit."
				}
				else{
					//upload the first chunk to get the videoId
					//its ok to upload the video, we are not rate limited
					uploadFile(input.files[0]);
		
				}
		}
		qReq.send();

```

If the user has uploaded 5 videos in the last hour, the endpoint will return HTTP 429, and we update the website to tell the user that they have been rate limited.

small_429.jpeg

thumbnail_429.jpeg

429.jpeg

If the user is below the rate limit threshold, the rate limit endpoint will return HTTP 200.  Since we have passed the rate limit 'test' we call the uploadFile function that uploads the video.

small_200.jpeg

thumbnail_200.jpeg

200.jpeg

We genuinely hope that your UGC application will be successful, and one of the ways to ensure success is to allow UGC, but to lightly restrict how UGC can be added. Rate limiting is one of these light restrictions that you can implement to keep the content flowing, but to keep the pace of the content uploads a *bit* more manageable.

If you have any questions or suggestions, please share them on our [community forum](https://community.api.video/). If you don't have an api.video account yet, you can create one in just a few seconds [here](https://dashboard.api.video/register). Thanks for reading! 



Adding rate limits to your video uploader

large_stop-jpeg.jpeg

medium_stop-jpeg.jpeg

small_stop-jpeg.jpeg

thumbnail_stop-jpeg.jpeg

stop-jpeg.jpeg

## Migrating your videos to api.video from another video provider like Vimeo

If you are launching a new service with video - starting up with api.video is easy - you can just start adding your videos with our API, and everything works great. The best part? You don't need to pay any encoding fees. You migrate for free without paying any entry tax - or rather, encoding fees. 

But, many of our customers have video content stored elsewhere.  They’d rather not support 2 video services, and begin looking at migration options for their videos from <old service> to api.video.  In this post, we will walk through the steps to copy any video source url to api.video.  In this case, we will use the Vimeo API to show how to access the source URL from Vimeo.

> if you are planning a large video migration from Vimeo (or any other provider), please give us a heads up so that we can ensure we have enough video encoding resources for our other customers.  


##  Getting the source url from Vimeo

To upload your videos to api.video, you’ll need to get the source urls. In this example, we’ll use Vimeo as the example provider, but many other video providers provide similar access.  

Using the Vimeo API, you’ll need to authenticate with a method that allows for [private data](https://developer.vimeo.com/api/authentication#understanding-auth-workflows), and then access the video endpoint for the video you’d like to transfer.  The [response of the query](https://developer.vimeo.com/api/reference/responses/video) will include a series of video links. 

There is a version for each encoding of the video.  In most cases, you’ll want the ```source``` url, as your original file is of the highest quality of the versions available.  Now that you have the source URL of your video at Vimeo, you are ready to transfer the file to api.video.

But, before you go ahead and do that, you might want to also access any other data you might want to bring across to api.video.  This could include the ```public_name```, ```description```, any ```metadata``` you might have saved, the ```pictures.uri``` of the poster image, and any ```tags``` you might have associated with the video.

## Create your video at api.video.

Now that you have a URL for the video, and all the metadata you might want to add to your ‘new’ video, we’re ready to [create a video](https://docs.api.video/reference/api/Videos#create-a-video-object) at api.video.  This endpoint requires a [token](https://docs.api.video/reference/api/Advanced-authentication#get-bearer-token), but if you are using one of our [SDKs](https://docs.api.video/), all you need is your API key.

When uploading a video, you’d first create the video, and then upload the file in a second step. But, we have a URL, so you can add the video source to the create API, and the video will be transferred asynchronously with just one API call.

When you create a video, you supply the ```source``` url to begin the upload, but you can also populate the ```title```, ``` description```, ```metadata``` and ```tag``` attributes straight from the data you extracted from your previous video provider.  

Once you call the create endpoint, the API call will return the videoId of your new api.video video.  You can now make a second call to the [upload a thumbnail](https://docs.api.video/reference/api/Videos#upload-a-thumbnail) endpoint with the videoId and url of the thumbnail.  This will ensure that the poster for your video is exactly the same as it was with your previous video provider.

That’s all there is to it!  You’ve now moved your first video from Vimeo to api.video, and you can automate the entire process for the migration.

## Conclusion

If you have a URL for your video’s source, you can automate the migration of your videos from your current video provider to api.video.  With just a few simple API calls, you can have all of your videos transferred to api.video with just a few calls for each video.


Migrating your videos to api.video

medium_migratory-birds-birds-migratory-bird-flock-of-birds.jpeg

small_migratory-birds-birds-migratory-bird-flock-of-birds.jpeg

thumbnail_migratory-birds-birds-migratory-bird-flock-of-birds.jpeg

migratory-birds-birds-migratory-bird-flock-of-birds.jpeg

Delegated Upload

Uploading a video to api.video just got easier!

We have created a [JavaScript uploader](https://docs.api.video/sdks/vod/apivideo-typescript-uploader) script to abstract this code into a single function - allowing you to focus on your code and making the video upload process easier for you and your development team!


## JS Uploader Widget

You can read about uploading a video in the [tutorial](https://api.video/blog/tutorials/uploading-large-files-with-javascript/) describing the code. The JS Uploader widget abstracts the file slice, creating all of the headers, and uploading the files - it also adds retries for segments that have issues!

The new code for uploading is under 30 lines, and most of that is for updating the page during the upload.

First, we add the script to the head (with a defer tag to not slow page load)

```
   <script src="https://unpkg.com/@api.video/video-uploader" defer></script>

```
Next we have a event listener for changes in the file upload form:

```
     input.addEventListener('change', () => {
       console.log("upload commencing");
       uploadFile(input.files[0]);
       function uploadFile(files) {
           const uploader = new VideoUploader({
               file: input.files[0],
               //changed to sandbox, because we cannot have nice things
               uploadToken: "to5PoOjCz98FdLGnsrFflnYo",
               chunkSize: 1024*1024*10, // 10MB
               retries: 10
           });
           uploader.onProgress((event) => {
               var percentComplete = Math.round(event.currentChunkUploadedBytes / event.chunksBytes * 100);
               var totalPercentComplete = Math.round(event.uploadedBytes / event.totalBytes * 100);
               document.getElementById("chunk-information").innerHTML = "Chunk # " + event.currentChunk + " is " + percentComplete + "% uploaded. Total uploaded: " + totalPercentComplete +"%";
           })
           uploader.upload()
               .then((video) => {
                   console.log(video);
                   playerUrl = video.assets.player;
                   console.log("all uploaded! Watch here: ",playerUrl ) ;
                   document.getElementById("video-information").innerHTML = "all uploaded! Watch the video <a href=\'" + playerUrl +"\' target=\'_blank\'>here</a>" ;
               });
       }
     });

```

### Walking through the code

The uploadFile function takes the files and creates an uploader function:

```
 const uploader = new VideoUploader({
               file: input.files[0],
               //changed to sandbox, because we cannot have nice things
               uploadToken: "to5PoOjCz98FdLGnsrFflnYo",
               chunkSize: 1024*1024*10, // 10MB
               retries: 10
           });

```

The chunkSize defaults to 50MB, but I have lowered this to 10MB for the sake of the demo, so you can see multiple chunks uploaded.

The retry count defaults to 5.  

#### During Upload

```
 uploader.onProgress((event) => {
               var percentComplete = Math.round(event.currentChunkUploadedBytes / event.chunksBytes * 100);
               var totalPercentComplete = Math.round(event.uploadedBytes / event.totalBytes * 100);
               document.getElementById("chunk-information").innerHTML = "Chunk # " + event.currentChunk + " is " + percentComplete + "% uploaded. Total uploaded: " + totalPercentComplete +"%";
           })


```

The onProgress updates the video upload every 50ms.  We calculate the % uploaded, and update the browser - so the user is aware that the video upload is underway.

#### Upload complete

When the video upload is complete, the API will reply with the videoId, and links to the video. We take this information to display the url to the user:

```
           uploader.upload()
               .then((video) => {
                   console.log(video);
                   playerUrl = video.assets.player;
                   console.log("all uploaded! Watch here: ",playerUrl ) ;
                   document.getElementById("video-information").innerHTML = "all uploaded! Watch the video <a href=\'" + playerUrl +"\' target=\'_blank\'>here</a>" ;
               });

```


## Conclusion

The new JS video uploader widget weighs in at just 11.5 KB, and as it is not required until after the page loads, will not impact your page speed (as long as you use the defer tag).

It will make building video upload widgets in JavaScript easier, as we've abstracted all the complexity into the library - allowing you to focus on your application, and not on the intricacies of partial uploads of video files.

Read all of the [technical details](https://docs.api.video/sdks/vod/apivideo-typescript-uploader) in our documentation, and [get started](https://dashboard.api.video/register) with your video app uploads today!


New video uploader JavaScript library

large_new-video-uploader-javascript-library.png

medium_new-video-uploader-javascript-library.png

small_new-video-uploader-javascript-library.png

thumbnail_new-video-uploader-javascript-library.png

new-video-uploader-javascript-library.png

Authenticate

You've prepared the perfect ad copy for your business, but now you're trying to figure out how you can personalize the ad for each business. One great way to do that would be to use a voice over tool that allows you to customize the content based on the location of your customers. Fortunately, this is available! By combining api.video with aflorithmic.ai's voice over this problem is easy to solve. 

## Imagine, if you will, that you own a pizza chain

To make this fun, let's imagine you are the owner of a popular pizza chain - Renzo's pizza chain. You have fifty different outlets and you've prepared the perfect ad: 

--Insert video here-- 

This ad is great for one of your locations, but you want people near all of your restaurants to know they can eat the best pizza for the least dough. For each location, you'd like to run this ad, but have it play information that tells the listener the city, address, day of the week and the time of the offer being described. 

No problem! We can do this in the tutorial today. Let's get started. 

## Prerequisites 

For this project, you're going to need: 

* An api.video account - [Sign up here!](https://api.video)
* An aflorithmic.ai account - [Sign up here!](https://console.api.audio/)

## Installation

We will use the [api.video Python client](https://github.com/apivideo/python-api-client) and [Aflorithic.ai's apiaudio library](https://docs.api.audio/recipes).

Installation for api.video: 
```pip install api.video```

Installation for Aflorithmic:
```pip install -U apiaudio```

### ffmpeg installation
If you want to run the project as-is, you'll also need to install ffmpeg. These instructions help you with installation on a mac. What you'll want to do is make sure you have brew installed. Then it's very easy, you just install with:

```brew install ffmpeg``` 

You need to install ffmpeg before you install the next two items.

### pydub and pyaudio installation
pydub and pyaudio can also be difficult to install, depending on your set up and what you've tried to install already. If you made the mistake of trying to install these before installing ffmpeg, then what you would do is first run:

```brew remove portaudio```

Then, reinstall this like so: 

```brew install portaudio``` 

After these steps, you should be able to successfully install the modules you'll need. Here's the commands: 

```brew pyaudio```

and 

```brew pydub```

## Project overview 
Here's what we're going to do with the example script today:

1. Prompt to collect the api.video API key and the Aflorithmic API key. 
2. Select our video from the Videos folder (for your own tweaks later you can drop other videos here to use, or use a different folder system to organize your content). 
3. Select the script we want from the Script folder and offer the user a preview of the script to make sure it's the right one. 
4. Select the localization .csv file we want to use with our script.
5. Create a sample audio file with the voice over, using the first line from the .csv file
6. Give the user the sample file so they can make sure it sounds like what they want.
7. Next we'll combine the first audio file with the video.  
9. We'll display that file for review by the user to make sure it looks right.
10. If the user approves the file, one by one we'll create an audio file, combine it with the video, tag each video with the information from the csv, and upload it for storage and hosting on api.video.
11. We'll return the user a list of video titles and a link to a playable copy of the final file. 

## Code sample 
Here is the code sample. It's a wizard that will walk you through all the steps. The complete project is available on github here: [https://github.com/apivideo/python-api-client/blob/master/examples/video_audio/README.md](https://github.com/apivideo/python-api-client/blob/master/examples/video_audio/README.md)

## Walkthrough the important stuff
A bunch of the demo is set up to walk you through the process of combining information. We don't need to go over each while loop, but let's go over some details regarding API behavior and the tools used to create the demo. 

### The script 
You can place your script into your code directly by using quotes. It could look like this (I'm saying could because there are a few different ways to set up your api.audio script): 

You can see that the script is split into three sections. This demo doesn't really make use of the features available per section so I'm not going to go into detail for this part. Personalization is achieved by using {{ }} around the name of a column from your csv spreadsheet. They can be used in whatever order you like. 

You can also choose to read your script from a .txt file. If you choose to do this, make sure to take the quotes off from the beginning and end or it will screw up the parser. A common error you will get will say there's a problem with creating a final file or working with a URL and it's usually because something broke before that point, so keep that in mind when debugging. 

In your code, when you set up your script, you'll use a command that looks something like this: 

```script = apiaudio.Script().create(scriptText=text, scriptName=script_details[0], moduleName=script_details[1], projectName=script_details[2])
```

In this snippet, you've already authenticated with your api key (```apiaudip.api_key = your_key```) so now you can work with the api's endpoints. 

The only required field is scriptText, which will contain the text of your script. However it's useful to provide the other names for reference. Be aware that you cannot delete projects or modules. After you set up your script this way, you'll be able to reference it in your code easily via scriptId. Like so:

```script.get("scriptId")```

### The audio file
For starters, when you create an audio file with api.audio, it names your file based on your project name and personalization parameters. In this demo, if you named your project "ad" then every audio file would begin with the word "ad." Next, it puts the headers for the csv file in alphabetical order, and adds the appropriate parameter next to each header. For example, our .csv file has the columns (in this order): 

* city
* address
* day_of_week
* offer_time

After each column title, the entry that appears in the audio file will appear. To separate each column, two underscores are used. Here's a sample:

ad__address_1353%20harlem%20street__city_springfield__day_of_week_tuesday__offer_time_6%20to%208%20pm

So something you'll possibly want to do is rename the files when they arrive. An easy way to handle this is with the built-in os module. 

When creating an audio file you'll do two steps, one is text-to-speech and one is mastering the audio. For text-to-speech you can pick a voice, how fast it will speak and then give it a dictionary containing the list of personalization terms you want to insert into your script. 

You can also choose a template, which will play some background music under your spoken audio. You can see in the demo I used "copacabana." To list voices or background music options, go to the [api.audio API reference docs](https://docs.api.audio/reference) and use the endpoint for listing voices or the endpoint for listing music. 
 
### The .csv
This demo reads information from a .csv file. If you want to read from something else, you can as long as your output for your program to work with becomes a list of dictionaries. .csv is pretty simple to use, so I went with that option.

### Playing a track from your application
You can play a track to check out the audio by using a variety of tools. For this one, I used pydub and pyaudio. These are fairly popular modules. In order to use them, however, audio must be converted to .wav. You will see in the code  that two imports are made from pydub: 

```
from pydub import AudioSegment
from pydub.playback import play
```

These allow us to play straight from the terminal or wherever we may be. The code to convert to .wav and play is very straightforward:

```
wav_track = AudioSegment.from_mp3(file)
wav_track.export(audio_title, format="wav")
```

There are other choices available for converting, but api.audio returns .mp3 files, so we use the from_mp3 choice. 

After we have the track, playing it is as simple as this:

```
play(wav_track)
```

### Merging audio and video 
Prior to uploading your video to api.video, you will want to add the sound and video together. This can be accomplished with ffmpeg, which you need to import to use pydub and pyaudio anyway. The code for merging audio and video is:

```
input_video = ffmpeg.input(video)
input_audio = ffmpeg.input(wav_track)
title = title + ".mp4"
ffmpeg.concat(input_video, input_audio, v=1, a=1).output(title).run()
```

This will produce an mp4. You can then upload it to api.video. 

### Upload to api.video
For details about uploading a video with api.video, you can check out the tutorial about it here: [Upload a Video with the api.video Python Client](https://api.video/blog/tutorials/upload-a-video-with-the-api-video-python-client/)

Something to note is to upload a file, it must be in the same folder as your application or it will not upload.

Once it's uploaded, you can retrieve the .mp4 from the response and play it right away in your browser using the built-in webbrowser module. 

To retrieve the mp4 from the response, you do this:

```
link_mp4 = video_response['assets']['player']
```

And then you can open the link like this:

```
 webbrowser.open(link_mp4)
 ```

This will let you make sure everything combined properly so that the audio matches with the video the way you want. 

### Create all the localized videos
After all the steps to make sure you're creating the right type of video, you can use the recipe from api.audio with a couple of tweaks to create all your new videos with personalized ads by location, then upload them for hosting to api.video.

This demo deletes every video you upload right after the upload happens so you don't end up sitting with fifty videos in a folder.

Thanks for reading! Happy coding. :) 

Localize Advertisement Videos with Personalized Voice Overs!

api.video + aflorithmic.ai: Localize Advertisement Videos with Personalized Voice Overs!

If you'd rather watch this tutorial as a video: 

This tutorial is a tweak on the content provided in [Use Flask with Dropzone.js to Upload Videos Under 128MB (No Client)](https://api.video/blog/tutorials/use-flask-with-dropzone-js-to-upload-videos-under-128mb-no-client/). In this version of the tutorial I'm using our new Python client. With api.video's Python client, you can upload videos of any size because chunked uploads are handled for you. 

Flask is a WSGI web application framework. It makes getting started with building a web application quick and easy. It's based on the Werkzeug WSGI toolkit and the Jinja2 template engine. It's very popular for creating backends for webpages, and that's what I'll be using it for today. 

Dropzone.js is an opensource JavaScript library that lets you create drag n' drop file uploads with image previews (when available). It doesn't have dependencies on other libraries, and it does a lot of work for you so you can focus on styling and configuration. I'll use a very simple format in this tutorial, but you will be able to style it however you want.

You can also review the API reference documentation for uploading videos:
* [Create a video](https://docs.api.video/reference/api/Videos#create-a-video-object)
* [Upload a video](https://docs.api.video/reference/api/Videos#upload-a-video)

## Prerequisites
For this project you'll need:

* [api.video account](https://dashboard.api.video/register)
* Python installed
* api.video Python client installed
* Virtual environment for your project (optional)
* Flask installed
* Project files - [https://github.com/apivideo/python-api-client/tree/master/examples/flask_and_dropzone](https://github.com/apivideo/python-api-client/tree/master/examples/flask_and_dropzone)
 

## Set up

To get started, you'll need to do these things:

1. Grab the code from GitHub - [flask_and_dropzone](https://github.com/apivideo/python-api-client/tree/master/examples/flask_and_dropzone)

2. Install the api.video client. That's going to be ```pip install apivideo``` 

3. In my version of the project, Dropzone.js is attached using CDNs. You can also reference these using the static folder and placing dropzone.js and dropzone.css there. Just change the references in index.html if you want to do this instead.

Let's roll! 

## What's in index.HTML? 

The HTML file for this project is exactly the same as for [Use Flask with Dropzone.js to Upload Videos Under 128MB (no client)](https://api.video/blog/tutorials/use-flask-with-dropzone-js-to-upload-videos-under-128mb-no-client/). 

EXCEPT FOR ONE THING. I added a very long timeout - it lasts about 45 minutes. If you don't plan to upload giant video files, you don't need to include this (```timeout: 2700000```). By default, Dropzone will wait 30 seconds, then timeout. Everything is in milliseconds, so normally this would be 30000. Even though Dropzone times out, your video file will still continue to upload. But the visual will show a file with a graphic that is X'd out. This might lead you to restart, losing the upload, or assume it's not working. So if you plan to use this sample for giant files, I recommend leaving the timeout. 

## What's in app.py? 

Here's what's set up for the backend:

This sample is based off of Miguel Grinberg's tutorial [Handling File Uploads With Flask](https://blog.miguelgrinberg.com/post/handling-file-uploads-with-flask/page/4). You will recognize some of the security items in the code. MAX_CONTENT_LENGTH is a way you can limit how big the files people upload are. Because this sample is supposed to be for files of any size, the content length is massive. UPLOAD_EXTENSIONS limits what types of files people can upload. 

**NOTE:** While this is set up to handle big files, please be aware that if you drop four or five giant files at once it will take awhile. If you want to be able to do that, you might have to experiment with the timeout setting.  

Next there's an error handler to tell you if a file upload is too big (not likely with the sample settings). 

The main route and definition upload_file() does a few things. First it gets all the files you put in the Dropzone. Then it retrieves the api key. The files are stored as FileStorage objects inside an immutable multidictionary. An easy way to process each file is with a loop, so you can loop through for each one (or just the one) and do a couple of checks. Check that the filename isn't empty (because you can't send it like that). Then check if the file extension is allowed. 

Next you'll set up the api.video client so you can use the videos endpoint. Then you send your file. The chunked upload is handled by the client without showing progress information. Give big files some time to upload. 

If you want a progress bar, there are a lot of easy ways to display progress without the client, but then you have to set up chunked uploads yourself. 

If you have any questions or suggestions, you can share them on our [community forum](https://community.api.video/). If you haven't created your api.video account yet, you can do that just in a few moments by following [this link](https://dashboard.api.video/register). Happy buildling! 

## Resources 

* [Flask Documentation](https://flask.palletsprojects.com/en/2.0.x/)
* [Dropzone Documentation](https://www.dropzonejs.com/)
* [Flask and Dropzone Sample App](https://github.com/apivideo/python-api-client/tree/master/examples/flask_and_dropzone)



Video on demand

Live streaming

Analytics

Video infrastructure

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