Video list

Normal

thumbnail_mathieu_round-1.png

mathieu_round-1.png

github-brands.svg

Github Mathieu Thiry

linkedin_logo_initials.png

LinkedIn Mathieu Thiry

Mathieu Thiry

Use cases

JavaScript

NodeJS

Next.js

This tutorial will show how quick and straightforward it is to build a youtube clone with [api.video](https://api.video) and Next.js. By encapsulating the front-end and backend inside our Next app, we can rapidly develop and deploy as we need a backend to run *[@api.video/nodejs-client](https://github.com/apivideo/api.video-nodejs-client).*

YouTube’s core functionality is the video library, so today, we will focus on this crucial feature: listing videos. You will have all the steps to build a public catalog of videos for your product. The demo is available [here](https://api-video-youtube-demo.netlify.app) and the code [here](https://github.com/apivideo/youtube-clone-next).
Let's start 🎬

large_cover-youtube-clone.png

medium_cover-youtube-clone.png

small_cover-youtube-clone.png

thumbnail_cover-youtube-clone.png

cover-youtube-clone.png

## 1. Application setup

Let's quickly start to build a new Next.js application using **Create Next App**

Run these commands in the terminal:

*Note: We'll use [styled-components](https://styled-components.com) and [react-feather](https://feathericons.com) for icons to style our example application, but you can ignore these steps if you have another preference. *

Once inside our project, install these three packages:

## 2. Configuration

**Configuration styled-components**

Since 12.1, Next.js added support to the Next.js Compiler for [styled-components](https://nextjs.org/docs/advanced-features/compiler#styled-components), update your `next.config.js` file:

**Create a custom _document.js file**

To render our styled-components at the server-side, we need to override `_document.js.` For this, create a `_document.js` file under the pages folder and add the following content into it. We will use also use the google font [Roboto](https://fonts.google.com/specimen/Roboto).

### 3. How to fetch data

**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>`. It's all server-side. We set our API key in an environment variable in the `.env.development` file for security.

Now create a `pages/api/content.js`file. Inside this file, add the following code:

We can get videos in just a few lines of code by applying the method `list`. 

*[@api.video/nodejs-client](https://github.com/apivideo/api.video-nodejs-client)* allows us to filter by `title`,  `tags`, `metadata`, `description`, `pageSize,` full documentation is [here](https://github.com/apivideo/api.video-nodejs-client/blob/main/doc/api/VideosApi.md#list). Let's focus on `title` for now.

**Call API routes in the front-end.**

Go to `pages/index.js` and call the endpoint we just created on mounting. Save the result in the state videos.

search-gif-youtube-clone.gif

*[@api.video/nodejs-client](https://github.com/apivideo/api.video-nodejs-client)*  allows us to filter videos by name. We’re going to implement a simple field where we can enter a searchable value.

tags-gif-youtube-clone-gif.gif

### How to filter videos with tags

api.video provides many features. One of them allows you to a tag to a single video. This demo excellently showcases how to use it.

**1 ) Add a tag to the dashboard.**

The easiest way to add a tag is to go to [api.video dashboard](https://dashboard.api.video/), go to videos sections, click on a video, “see details” of a video and add a tag. The video [here](https://www.loom.com/share/9219a1fa532d4e41884a016a45efef0e) explains how to do it.

The next step is to apply the `filterTags` function to the videos, which: 

- Retrieves all of the tags
- Sorts by “the most used”
- Returns a clean tag array that we will store in a state

**2 ) Store tags in a state**

We call this util function each time we get videos. We store the array of values in a state. We also create another state, “active state, “ the current state. By default, it is “All”.  

**3 ) Display Tags component**

 The tag's value is in the `Chip` component. By default, the Chip “*All”* is displayed, and next, each tag is stored in the tag array. If you click on the chip, you update the value of the tag state. The props `isActive` shows a different style based on whether true or false.

**4 ) Filter videos by the activeTag**

Then let's apply to the videos array the `filterElement` function, which only displays videos whose tags are equal to the activeTag. This function applies only if the activeTag is different from `All`.

## 5. How to use the player from api.video

[api.video](https://api.video) provides a performant and fully customizable [player](https://docs.api.video/reference/api/Player-Themes#list-all-player-themes). As soon as you upload a video, it automatically creates a link to the api.video's player. You can, of course, customize your player directly in the [dashboard](https://dashboard.api.video). Then, let's encapsulate the player in an `iframe`. The props video corresponds to a video object.

# Conclusion

We recreated YouTube thanks to api.video’s features in just a few steps. We did not cover all the topics such as dynamic routing usage of react context to store the API key, but the entire code is available [here](https://github.com/apivideo/youtube-clone-next).

And we're done! To start building right now, check 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 easily you can  **display the video on hover**

hover-gif-youtube-clone.gif

Create a file to regroup our CSS logic in `style.js`. The trick is to display the video on hover instead of the image. A way to achieve it is to add the property `display: none` to the image and `display: block` to the video.

As shown below, we pass each video object as props to the Video component.

We don't need to format the answer in the child component Video. We can destructure the video object and access the image and video.

Rebuilding YouTube with api.video and Next.js

large_real-cover-youtube-clone.png

medium_real-cover-youtube-clone.png

small_real-cover-youtube-clone.png

thumbnail_real-cover-youtube-clone.png

real-cover-youtube-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

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

Erikka Innes

no code

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

small_neva-ballet-use-case.png

thumbnail_neva-ballet-use-case.png

neva-ballet-use-case.png

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

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

This led them to api.video. 

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

## Video recording set-up

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

Case Study: building a digital dance academy without coding

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


Beeready.io is a training platform that gets candidates ready for job interviews. Candidates record themselves answering popular interview questions, then upload their videos for review. They can rewatch their own content and have Beeready.io coaches provide professional feedback about how to improve. 

The site they wanted to design would offer several types of profiles for its users including: 
* Coach
* User

Coaches use their version of the interface to create video interviews with their own questions. They send these for their candidates to respond to. When they receive videos from candidates, they can provide feedback via text or with another video. 

Users can play an interview provided by their coach, watch or read coach feedback and replay any videos they sent or received. 

After planning out their desired site functionality, Beeready.io needed an easy, cost-effective way to add video. They wanted a centralized, reliable solution that would allow them to keep videos viewable by only a client and coach.

medium_beereadyinterview.png

small_beereadyinterview.png

thumbnail_beereadyinterview.png

beereadyinterview.png

## Choosing api.video
Beeready.io chose api.video because it was something they could figure out how to use themselves even though they weren't developers. "We had no experience at all on web development and needed to find a way to easily implement video management on our product: upload, host and deliver ... api.video was a perfect choice to do that, their solution is easy to use, complete and their customer support is really helpful," Beeready's cofounder, Nicolas Huegas explained. He appreciated that api.video handles the difficult parts of transcoding, hosting and delivering video. Nicolas taught himself what he needed to know for his implementation and was able to figure out the rest with help from api.video's incredibly responsive support team. 

Some of the options that mattered most to Beeready.io were: 
* Ease of implementation
* Customizable player they could add their logo to 
* Videos that could be made private
* Easy video upload 

## The future of Beeready.io
CEO Jean Baptiste said that for now they plan to charge coaches for their product and keep services free for their users. They hope to add new features to their product, like the ability for users to download polished interview videos with their logo on it. In the meantime, they will continue using api.video to record, host and display their videos. 

Case Study: Beeready.io and api.video 

thumbnail_beereadyresize.png

beereadyresize.png

Case Study: How Beeready.io used api.video to create an interview training platform

small_bees.png

thumbnail_bees.png

bees.png

Erikka Innes and Anne-Sophie Poupard

Based in Paris, [Coverd](https://www.coverd.co/) is a company that offers smartphone insurance. And they’re revolutionizing their industry. 

Where other coverage providers only offer insurance from date of purchase, Coverd can offer plans for post-purchase smartphones. According to one of their co-founders, Nicolas Schwartz, the company got its start based on a single observation - that smartphones are a key part of everyday life for people everywhere, and a lot can happen to a smartphone. 
Anything from losing the phone, breaking it, drowning it, you name it, smartphones are susceptible to many disasters great and small. And the insurance for them, if you’ve ever tried using it, is all about the insurance company getting out of paying for damages to your phone. This is not the case with Coverd. They’re a low-cost, completely online option that covers all risks, and doesn’t make the user commit to anything. 

So where does api.video come in? Let’s find out. 

## The need to centralize video content
When Coverd was first starting out, they needed a way to document damages to user phones. 
Because the company is completely online, they required a simple, effective way to ensure customers weren’t committing insurance fraud. 

“*We started with photos at first*,” said Nicolas Schwartz, co-founder and CTO of Coverd. “*Then we moved to video, but it was very manual. We collected videos through email or chat. It was complicated to centralize all these videos, and sometimes the size was too big to be sent through email*.” 

## Finding the right solution
Coverd needed an easy-to-implement, high quality video solution that centralized their claim information. 
This would allow them to process more claims, and more easily check the damage on their customers’ phones. 

That’s when they discovered api.video. 

They knew that they wanted a video on demand solution where customers could upload videos of their damaged phones from anywhere. Once they had their design in place, they turned to api.video. “*The documentation was clear and the API was easy to use, so we were able to finalize our integration quickly*,” Schwartz said. 

Two key features that were important to Coverd were keeping the [videos private](https://api.video/blog/product-updates/video-access-management-how-to-create-deliver-and-manage-private-videos-and-what/), since only their back office would use them for claim evaluation, and [fast transcoding](https://api.video/blog/product-updates/api-video-encoding-times-2h-2021-edition/) and upload. 

api.video delivered on all fronts, and continues to be a part of their revolutionary smartphone insurance solution. 

If you are interested to know more about our end-to-end solution and how you can integrate videos into your own product, you can ask questions in our [community](https://community.api.video/) or [create a free account](https://dashboard.api.video/register) to get started.

How video helped Coverd to improve their customer support

large_coverd.png

medium_coverd.png

small_coverd.png

thumbnail_coverd.png

coverd.png

Case Study: How video helped Coverd to improve their customer support

Liven is an events management company with a mission to facilitate stress-free hybrid event experiences. Their product combines online presentations and meetings with conference broadcasts and in-person events. 

large_wedding-liven.png

medium_wedding-liven.png

small_wedding-liven.png

thumbnail_wedding-liven.png

wedding-liven.png

## An early stage start-up with an all IP live event system
“We are a pretty early stage start-up. We’re building an all IP live event system for venues and organizers. Our whole philosophy is that there’s no reason that slides, content, the sound, the lighting, the live stream and videos or anything can’t just be controlled over the internet. The technology is there,” Brett Fischl, co-founder of Liven said.

Another goal of building all the tools in-house was to cut down on time consuming errors that can occur when people need to navigate across multiple platforms. As part of their vision, Liven wanted to be able to offer high quality live streams of events and feature multiple camera angles. 

“An iPhone has a better camera than most professional grade cameras. Just buy five iPhones instead of having just one camera and then you have 5 video feeds of the whole venue,” said Brett. 

## They needed a way to broadcast content
While building their application, they realized they would need a way to broadcast content. They wanted something high quality, cost-effective, and easy to implement. After some online googling and research, the answer was clear - api.video. With its [straightforward API](https://docs.api.video/reference), [robust client and SDK offerings](https://github.com/apivideo), and [detailed documentation](https://api.video/blog/tutorials/), it seemed like the perfect fit. 

“We actually ended up building the whole integration in about a week,” Brett told us. “We had an event coming up and we needed that high quality video. … We made the decision that you guys are probably the easiest looking to integrate with. … It was super easy.”

## Liven chose api.video
So far Liven has featured api.video live streams at weddings. Particularly due to Covid, virtual attendees enjoyed the multiple camera angles of the event even though they couldn’t be there in person. Using Liven, they could choose different live streams to follow and watch. And, if the director of the show decided the virtual audience should direct their attention to a particular feed, they were able to do so to keep everyone engaged on the most important parts of the event.

“We really lean into the RTMP video feed there because we want to have a very high quality video broadcast coming out of these types of events. Right now we use api.video for weddings...at the end of a wedding we just use all the video feeds and we cut together a nice short that’s a 5-10 minute highlight reel of the event.” 

## Liven uses api.video for live and online events
Liven also does pop up shop promotion. Brett described one venue that regularly live streams pop up shopping events with multiple camera angles. The live streams are provided through api.video. As for the future, Fischl says they’re hoping to add webRTC capabilities to allow for certain events like panels or meetings to happen. They plan to continue using api.video for beautiful, high quality live streams they can broadcast to online audiences.


Case Study: Liven built their all IP event management system using api.video

large_liven.png

medium_liven.png

small_liven.png

thumbnail_liven.png

liven.png

[InEvent](https://inevent.com) is a virtual and hybrid event platform that started by building innovative technology to help organizers with in-person enterprise events. Their goal was to integrate a vast array of tools and data on a single platform including websites, emails, registration scheduling, QR codes and more. If there’s something an organizer needs for an in-person event, InEvent offers it. Their product was distributed  in the US, expanded to Europe, and then Covid struck. In-person events were at a halt, so they decided to expand their offering to include virtual events. 

## Planning for Live Streams
When InEvent decided to produce virtual events, they knew that they would need a way to offer live streams. They needed to be able to reach thousands of people with high quality video footage in real-time and provide that video for on-demand playback later. 

> “We have customers doing multiple sessions at the same time and they have thousands of users watching those sessions. We needed a platform to do a quick RTMP to HLS stream option that we could use on the fly. That’s what api.video does. We needed recordings with adaptive streaming quality. We chose you guys to be one of the providers, because we are growing and we need to have multiple providers for different locations,” said Mauricio Giordano, CTO of InEvent.

Using api.video, InEvent was able to quickly set up high quality live streams and make use of the recording feature, which allows for high quality HLS playback. InEvent uses WebRTC for a number of their sessions, but in order to broadcast those sessions to hundreds or thousands of people, they use an RTMP stream. And it’s this stream that gets saved so event attendees can come back to rewatch event sessions later or catch a session that they couldn’t attend in real time. 

> “We create a composite video from a webRTC session. Let’s say you have a meeting with 4 or 5 people, we need to get the video feed of each person and compile them into a layout. Then we need to create an RTMP stream. Then, you guys give us an HLS that we can distribute to thousands of people,” Giordano explained. 

## InEvent and api.video
Something InEvent finds extra useful about working with api.video is that it’s one of the few companies in the video space that creates simultaneous mp4 and HLS recordings. This allows InEvent to offer content for immediate download once everything has been recorded. 

Now that Covid is slowing down a bit, Giordano says that InEvent will transition to offering hybrid event solutions. Their virtual event capabilities will be offered as part of their in-person events. The goal is to create experiences where people online can join in-person events from their computers and comment, chat and interact with the event in real-time. Along the way, api.video will be there to help provide beautiful video viewing experiences for everyone.


How InEvent used api.video to produce events

thumbnail_inevent.png

inevent.png

Case Study: How InEvent used api.video to produce virtual and hybrid events

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

api.video team

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?

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

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.


## 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.



## 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 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:



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:


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

Featured article

# api.video blog

Blog

Follow the api.video Blog to explore tutorials, video use cases, and learn about on-demand and live-streaming video updates.

Video on demand

Live streaming

Analytics

See all features

Online learning

Short-form videos

Marketplace & E-commerce

Video messaging and recording

Quick start guides

Documentation

Ecosystem catalog

Clients & SDKs

Community

Blog

Demos

Help center

Blog

Huge pricing update! Introducing video encoding at zero cost