Video upload

Normal

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

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

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

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

Erikka Innes

large_api-video-blog-tutorials.png

medium_api-video-blog-tutorials.png

small_api-video-blog-tutorials.png

thumbnail_api-video-blog-tutorials.png

api-video-blog-tutorials.png

Tutorials

Python

Uploading video with api.video's Python Client is easy. You can use the method described here to upload big files over 199 MiB or small files. The client will handle chunking the upload for you. 

NOTE: If you're wondering how this differs from the previous Python tutorials:
* [Upload a Video From Your Computer wiht the api.video API (Python)](https://api.video/blog/tutorials/upload-a-video-from-your-computer-with-the-api-video-api-python/) 
* [Upload a Big Video File Using Python](https://api.video/blog/tutorials/upload-a-big-video-file-using-python/) 

It differs in that it uses our new [Python Client](https://github.com/apivideo/python-api-client).  

If you'd prefer to watch a video about how to upload video from your computer with the new client, you can check that out here: 

<iframe width="560" height="315" src="https://www.youtube.com/embed/4kWwSvrLtCA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

The API reference documentation for the endpoints used in this tutorial can be reviewed here: 
* [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)

If you prefer written walkthroughs, read on. I'll cover all the same information here. 

## Install the Python Client 
Installing api.video's Python Client is easy: 

```pip install api.video``` 

I recommend using a virtual environment to install, but it's not required. 

## How to Upload a Video from Your Computer 

What you'll be doing, is sending a request to the api.video server to create a video container. You'll get back a video ID you can use to reference your container. Then you'll prepare your video for upload and send a request to upload the video to the video ID you specify. 

Be aware that you can only upload to a video ID once. You can change settings and details about your video later using the update feature of the api.video API. 

You can get the code sample I'm using here: 
[https://github.com/apivideo/python-api-client/blob/master/examples/upload_video.py](https://github.com/apivideo/python-api-client/blob/master/examples/upload_video.py)

When you are creating your video, you may want to include more settings and metadata than I show in the walkthrough. A complete list of choices are shown here: 
[https://github.com/apivideo/python-api-client/blob/master/docs/VideoCreationPayload.md](https://github.com/apivideo/python-api-client/blob/master/docs/VideoCreationPayload.md)

And here's the code sample (tweaked a bit from the repository sample):

## Code Sample Walkthrough
To use the api.video Python Client, you'll want to start by making your imports. You need three. The first one you'll need to import is **apivideo**. This will let you use authentication and the client. Next, you want to import **VideosApi** from apivideo.apis. It is best practice to import just the part of the client you'll use, because it improves performance. VideosApi will let us use the create and upload features. Finally, you'll import **ApiAuthException** for error handling. 

Next, we'll add our API key and set up the Client. In the Python Client, authentication is handled for us, including refreshing the access token when needed. All we need to do is add our API key to the Client, then connect. After connecting, we can pass the Client to VideosApi, and we're ready to upload our video! 

To upload our video, we first want to create our video container. The video container contains details about the video as well as any configuration settings like whether you want your video to be public or downloadable. As part of our request to create our container, we'll want to send all those details and settings in a payload. For this walkthrough, I'm adding a title because that's the only required setting for container creation. Then I'm including a description of what my video is, setting my video to be private (make public = false) and then I'm adding tags to search with - bunny and tree. 

If you want to change the settings further, refer to the choices here: [https://github.com/apivideo/python-api-client/blob/master/docs/VideoCreationPayload.md](https://github.com/apivideo/python-api-client/blob/master/docs/VideoCreationPayload.md)

Let's create a request to make our video container and retrieve the video ID:

We grabbed the video ID, so next we prepare our file. To upload files with api.video, we open them in read-only binary format. Then we'll add our file and video ID to our upload request and check out the response! 

If everything works out, you'll get a response showing you all the metadata and configuration details for your upload. You can navigate to [your api.video dashboard](https://dashboard.api.video/overview) to see the video you uploaded there. If you're uploading a big video, give it a few minutes to be ready. 

If you get stuck or have questions, you can write us on our [community forum](https://community.api.video).

Upload a video with the api.video Python Client

doug.jpg

twitter-brands.svg

Doug Twitter

Doug Sillars

Live streaming is becoming more and more popular as a way to immediately share what a person is experiencing. Perhaps you've thought that live streaming might be a great feature in your mobile app that your customers would love, but you worried about the lifting involved to add this feature.  Today, you can use our [React Native module](https://github.com/apivideo/react-native-livestream) to quickly add live streaming to your app.

## Building the sample app

In this post, I'll walk through installing and using the sample application to livestream right from your Android phone. 

### Getting started

Since I had not worked with React Native in the past, I had to get all my dependencies straightened out on my Mac.  Make sure that you have

* Ruby & cocoapods installed. (and set as defaults.  I had a lot of issues with multiple versions that were not speaking to each other correctly)

* Android Studio (with SDK version 29) installed.

* clone the repository from github: [https://github.com/apivideo/react-native-livestream](https://github.com/apivideo/react-native-livestream)

Next, we'll build the application.  Enter the repository directory from the terminal, and build the app with yarn:

```

cd react-native-livestream
yarn

```

If you run into an error here, you probably have a dependency issue.  I spent some time in this area getting my development environment up and running properly.

Now we are ready to build the android app, and install it on your phone.  In my case, I chose to use a phone, so I made sure to enable the [developer options](https://developer.android.com/studio/debug/dev-options) and USB debugging, and connected to my laptop.  You know this is working as expected when you get a response from the ```adb devices``` command on the terminal:

```
 % adb devices
* daemon not running; starting now at tcp:5037
* daemon started successfully
List of devices attached
SOVOT8LR65EUCM7H	device
```

### Installing the app

Enter the example directory and run ```yarn android```

```
cd example 
yarn android
```

The app will build and install on your phone, but you'll see a red error message about the Metro server not running:



large_screenshot2021-06-09-12-06-36-563d7e43c2557a8617d79c9a3b92fa7275.jpg

medium_screenshot2021-06-09-12-06-36-563d7e43c2557a8617d79c9a3b92fa7275.jpg

small_screenshot2021-06-09-12-06-36-563d7e43c2557a8617d79c9a3b92fa7275.jpg

thumbnail_screenshot2021-06-09-12-06-36-563d7e43c2557a8617d79c9a3b92fa7275.jpg

screenshot2021-06-09-12-06-36-563d7e43c2557a8617d79c9a3b92fa7275.jpg

This is fixed by starting the server on your desktop:

```
npm start
```

Once the server starts, press 'r' to reload the application. The screen will be blank after the reload, as there are no app permissions enabled.  You'll have to go into Settings-> apps (find the ReactNativeLivestream Example app) and enable Camera and Microphone settings.


large_screenshot2021-06-09-09-33-36-82.jpg

medium_screenshot2021-06-09-09-33-36-82.jpg

small_screenshot2021-06-09-09-33-36-82.jpg

thumbnail_screenshot2021-06-09-09-33-36-82.jpg

screenshot2021-06-09-09-33-36-82.jpg

When you relaunch the application, now we are in business:

large_screenshot2021-06-09-09-11-28-383d7e43c2557a8617d79c9a3b92fa7275.jpg

medium_screenshot2021-06-09-09-11-28-383d7e43c2557a8617d79c9a3b92fa7275.jpg

small_screenshot2021-06-09-09-11-28-383d7e43c2557a8617d79c9a3b92fa7275.jpg

thumbnail_screenshot2021-06-09-09-11-28-383d7e43c2557a8617d79c9a3b92fa7275.jpg

screenshot2021-06-09-09-11-28-383d7e43c2557a8617d79c9a3b92fa7275.jpg

Now we are ready to stream.  The 5 coloured buttons change the settings of the application:

Purple: Changes orientation from landscape to portrait
Green: Camera selection from front to back
Yellow: Streaming resolution: 360p or 720p
Blue: Audio: true/false

White: Starts the stream. When you start the stream, you begin broadcasting the video (and the button turns red).  When you're done streaming, press the red button to stop (and it will turn white).

This streams into a test account and the player URL is not published.  To see the livestream in action, go to [App.tsx](https://github.com/apivideo/react-native-livestream/blob/main/example/src/App.tsx#L66) file on line 68, and use a streamKey from your api.video account.  Repeat the steps above, and the application will livestream into your account, and viewers can watch the video at the player URL for your live stream.



React Native Livestream Module: building the sample app

thumbnail_download-1.png

download-1.png

video create

Delegated Upload

JavaScript

The first demo we published on a.video was a demo on how to upload a video (check it out yourself at [https://upload.a.video](https://upload.a.video). This is a great little demo that will take your video, break it into smaller chunks (1 MB in this case), and upload them into api.video. Once the uploads are complete, you get a link to the url where the video will soon be available for playback. You can read the [post describing how we built the app](https://api.video/blog/tutorials/uploading-large-files-with-javascript/).

## More than one video

What if you'd like to upload a few videos? You could use this interface multiple times, but that would be slow and tedious.  

To resolve this, I've created a new version of the uploader at [https://upload.a.video/many.html](https://upload.a.video/many.html) that allows you to upload more than one video at a time. It only took about 5 lines of added code to make the change from one video to many.

Let's walk through what I did to make this happen.

### Input

First, we need to allow the form to accept multiple files.  This is a one word change:

```
	<input type="file" id="video-file" style='display:none'>
```

to

```
	<input type="file" id="video-file" style='display:none' multiple>
```

This basically tells the browser that users can select more than one file at a time. With this line added, you can select multiple adjacent files while holding the shift key, or multiple non-adjacent files holding the command (on a Mac) key.

### Uploading multiple files

In upload a video, only one video could be uploaded at a time. When you add files via a form, they are placed in an array, so once the button to upload was clicked, we defined the video and the video name based on the file in index 0 of the array:


```

			const file = input.files[0];
			const filename = input.files[0].name;
			
			<upload stuff>

```

There's just one file, so grab the file in index 0, grab the filename and upload the file to api.video.  Extending this to more than one file is easy: create a loop over the array of files (incrementing index i), and upload each file in the array by referencing file i in the array:

```
  const numberofFiles = input.files.length;
	for( i=0;i< numberofFiles; i++){
			//do the upload for each file.

			const file = input.files[i];
			const filename = input.files[i].name;
			<upload stuff>
			
	}

```


### Make the UI look nice

So that was probably the 5 lines of code I promised, (6 if you count the comment).  But the UI was weird, since the notifications and text were updating and overlapping for each file being uploaded - and you couldn't read anything as the text was changing so quickly.  So, let's fix that.  I changed 3 lines of code here:

First: the upload information is changed to show information for each video by appending the HTML and adding the video number: 

```
			document.getElementById("video-information").innerHTML += "Video "+ i +" will be uploaded in " + numberofChunks + " chunks.<br/>"

```


Second: as the videos upload, so the upload information should update for each video:

```
document.getElementById("chunk-information").innerHTML = "Video: " +i+" Chunk # " + chunkCounter + " is " + percentComplete + "% uploaded. Total uploaded: " + totalPercentComplete +"%";
```

This one just overwrites itself all the time.  I could probably make this look nicer, but for a demo, it's ok.

When the upload is completed, we add the completed upload notice, along with the url where the playback can be watched:

```
	document.getElementById("video-information").innerHTML += "Video " +i+" is uploaded! Watch the video <a href=\'" + playerUrl +"\' target=\'_blank\'>here</a><br/>" ;

```

All three of these lines were already in the code, I just updated them to fit the multiple upload function of the application. That said, with a grand sum of 8 lines of uploaded code, we've modified [https://upload.a.video](https://upload.a.video) to [https://upload.a.video/many.html](https://upload.a.video/many.html), allowing for more than one video to be uploaded at once.

## Try it out

With ~10 lines of modified code, I've taken a page built for a single video uploaded a page that can now handle many videos, and show the links to the videos when they are completed.

That said, since this is a live demo, I have placed a limit of 3 files per upload, just to keep my account from filling up with videos.  These videos will also be stored in the sandbox: so watermarked and deleted after 24 hours.

```
var maxUpload = Math.min(numberofFiles, 3);

		for( i=0;i< maxUpload; i++){
			<file selection & upload stuff>
		}
```

The code is live at [https://upload.a.video](https://upload.a.video), and available on [Github](https://github.com/dougsillars/blobUpload/blob/master/many.html). Give it a try, and let us know what you think!

Upload many files at once with HTML and JavaScript

medium_maxresdefault.jpeg

small_maxresdefault.jpeg

thumbnail_maxresdefault.jpeg

maxresdefault.jpeg

NodeJS

We recently launched a new [TypeScript NodeJS API client](https://docs.api.video/sdks/api-clients/apivideo-nodejs-client) that replaces the NodeJS SDK.  The NodeJS SDK is not going anywhere - so you can keep using it - but no new features will be added to the SDK.  All new features will now be added to the Client API.

Now, as we add new features, you might want to reduce the number of dependencies in your codebase and remove the NodeJS SDK - migrating to the new API Client.  We've prepared a [migration guide](https://github.com/apivideo/nodejs-api-client/blob/main/doc/MIGRATE.md) to help you along the path.

## Share a video migration

The changes are quite simple.  Let's walk through how I migrated the share.a.video application to the apiclient:

The [share.a.video](https://share.a.video) application uses a livestream to share a recorded video. This lets all the viewers watch the video at the same time.

In this application, the Node backend does a search of the livestreams in my account. First I added the SDK, and then I did a search for all livestreams:

```
//apivideo
const apiVideo = require('@api.video/nodejs-sdk');

<snip>

	//get data on both movies:
	const client = new apiVideo.Client({ apiKey: apiVideoKey });
	let allLiveStreams = client.lives.search();

```

To migrate this to the new API client, I only have to change these three lines:

 * Update the library I am going to use
 * change the apiVideo.Client to apiVideoClient, and place the parameters in brackets
 * lives to liveStreams
 * search() to list()


```
const apiVideoClient = require('@api.video/nodejs-client');

<snip>

	//get data on both movies:
	const client = new apiVideoClient({ apiKey: apiVideoKey });
	let allLiveStreams = client.liveStreams.list();

```

That's it. The code now runs on the new API client!


## resume a video

[resume.a.video](https://resume.a.video) finds a user's last session with a video, and then begins playback at the last second viewed by that user.  (just like when you restart a Netflix or YouTube video, it knows where you left off).

In resume.a.video the Node SDK was not querying analytics or sessions properly, so I used raw API calls:

* Authenticate my apiToken
* Receive all sessions for the user
* get the latest session data for the user for the most recent time,

With the Node API Client, this is now all possible with the client, and no more raw API calls.

When the user submits their username and the video they'd like to watch, we provide the Node server with the videoId and userName.  We make a request to the rawStatistics.listVideoSessions endpoint, asking for just one session.

If there are sessions, we grab the number of sessions, but if there are no sessions for that user, we know we can commence the video playback at time=0.


```
//first we'll get the session data for the video and the metadata userName
	var params = { videoId, metadata, currentPage, pageSize};
	console.log("params",params)
	const client = new apiVideoClient({apiKey: apiVideoKey});
	const result = client.rawStatistics.listVideoSessions(params);
	
	result.then(function(videos) {
	//	console.log("Allsessions that match", videos);
		const numberSessions = videos.pagination.itemsTotal;
		console.log("number of results: ", numberSessions);

		if(numberSessions >0){
			<we'll get the last session>
		}else{
			var videoUrl = 'https://embed.api.video/vod/'+videoId+'?metadata[userName]='+userName+'#autoplay';
						return res.render('video', {videoUrl});

		}	

```

### The user has sessions with the video

In the case that the user *has* watched this video, we'll be in the ```if(numberSessions >0)``` conditional.  We want to know how many sessions the user has had and collect the last one (which will have the last watched moment of the video).  

So, we make a second request to the same endpoint to get the most recent session for this user and this video and collect the sessionId.

```
if(numberSessions >0){
			currentPage = numberSessions;
			const lastSessionParams = { videoId, metadata, currentPage, pageSize};
			console.log("lastSessionParams", lastSessionParams);
			const lastSessionResult = client.rawStatistics.listVideoSessions(lastSessionParams);
			lastSessionResult.then(function(lastSession) {
				console.log("lastSesson: ", lastSession);
				//this is the last session
				var sessionId =  lastSession.data[0].session.sessionId;

```


With the sessionId, we can then call the  ```client.rawStatistics.listSessionEvents(sessionParams)```. Each event has the time recorded in the video when the event happened.  We retrieve this time value (in seconds) and append that to the video url with the ```#t``` url attribute.


```
				sessionData.then( function(lastSessionData) {
					//this is the session data
					console.log("session events", lastSessionData);
					var numberOfEvents = lastSessionData.pagination.itemsTotal;
					console.log("sessionevents", numberOfEvents);
					var lastTimeRecorded  = lastSessionData.data[numberOfEvents -1].at;
					console.log("lastTimeRecorded", lastTimeRecorded);

					var videoUrl = 'https://embed.api.video/vod/'+videoId+'?metadata[userName]='+userName+'#autoplay;t='+lastTimeRecorded;
						return res.render('video', {videoUrl});


				});
```

This tells the player to begin video playback at the time the last session ended, completing the task that resume.a.video was built to do. With many fewer lines of code, the new NODE api client has simplified the application, and it runs faster.

## Migrate your app

Our new Node API client is where all new api.video features will appear, as we have deprecated the Node SDK.  As this post shows, the migration from the older SDK to the API client is easy and relatively painless, so you can keep your application on our latest code base with minimal refactoring.

Migrate your Node app to our new API client

large_birds.jpeg

medium_birds.jpeg

small_birds.jpeg

thumbnail_birds.jpeg

birds.jpeg

A chyron is the text that appears at the bottom of the TV on news channels telling viewers the topic being discussed.  You might want to add a chyron to your live stream or to your video on demand (VOD).  In this post, we'll walk through the steps to add a chyron to your video.





small_boxers.jpeg

thumbnail_boxers.jpeg

chyron-example.jpeg

## Chyron a video

The application (which will soon be published at chyron.a.video) extends https://record.a.video. You can read about how we built record.a.video in a [series of blog posts](https://api.video/blog/tutorials/grabbing-camera-streams-with-mediadevices-getusermedia/).  This application allows you to share your camera and your desktop, and creates a live stream or VOD recording of what you have shared.

We'll extend this by adding an icon to the left of the chyron (in the same approach as [watermark.a.video](https://api.video/blog/tutorials/watermarking-your-videos/). We'll then add a stripe over the video that the text will appear on.

## The code

The HTML adds 2 fields to the form: one for the logo url, and the 2nd for the text to be placed in the chyron. Along with some CSS, we style the form:

```
    <div class="settingHeadings">
                Chyron<br/>
            </div>
            <div id="watermark">
                <label for="watermark-url">image for chyron</label> 
                <input type="text" id="watermark-url" value="http://localhost:3037/API.PNG"><br/>
                <label for="chyron-text">text for chyron</label> 
                <input type="text" id="chyron-text" value="Your text here.">
            </div>
```

medium_screenshot-2021-06-01-at-14-14-23.png

small_screenshot-2021-06-01-at-14-14-23.png

thumbnail_screenshot-2021-06-01-at-14-14-23.png

screenshot-2021-06-01-at-14-14-23.png

### Starting the playback

When the stream is started, we add a few features to the canvas:

```
//chyron
        canvas.drawImage(watermarkImg, watermark_x, watermark_y);
        canvas.fillStyle='#fa4b2a'; 
        canvas.fillRect(chyron_x,chyron_y, chyron_length, chyron_height);
        canvas.fillStyle='#ffffff'; 
        canvas.font = "60px Arial";
        ctx.fillText(document.getElementById("chyron-text").value, chyronText_x, chyronText_y);
```

First we draw the icon (with variable name watermark) with the x,y positions hardcoded inthe JS.  We assume the size of the icon is 100x100.

Next we add a rectangle with fill color #fa4b2a (orange) that appears across the bottom of the screen.  

Then we change the fill color to white (#ffffff), and add the text from the form field.

These canvas events are all within a loop that fires every 20ms, or about 50 frames per second.  Since our video is capturing at a lower framerate than that, it will appear to update instantaneously.

## See it in action


In the video above, as the text on the browser window changes, so does the text in the chyron.  With 2 displays, you can now produce a live stream or VOD video with a chyron bar at the bottom of the screen.

## Try it yourself

The code for chyron a video is on [Github](https://github.com/dougsillars/chyronavideo). It's super easy to launch locally with NodeJS, and by changing the variables for the canvas colour and fill, you can easily adjust the font and look of the chyron to fit your requirements.

In this post, we've gone through the steps taken to convert record.a.video into a video with a chyron. You may have even learned what a chyron is :).

Let us know what you think, and how you've changed the app to customize your chyron in you VOD or livestream in our [developer community](https://community.api.video)

Adding a chyron to your video: Look like the news!

live - create

Videos - Upload a Thumbnail

When publishing a video on the web, sometimes it is desirable to add a defining mark on the video, often called a watermark.

When you use api.video in the sandbox, we add a watermark to show that the videos are being played back in our test environment:


medium_screenshot-2021-05-25-at-06-50-01.png

small_screenshot-2021-05-25-at-06-50-01.png

thumbnail_screenshot-2021-05-25-at-06-50-01.png

watermarked-video.png

Perhaps you want to add your corporate logo in the corner of the video.  Or perhaps the class name.  There are a number of different reasons you might want to add a watermark to your video, and in this post, I'll walk through two approaches to add a watermark to your videos. 

NOTE: We now have watermarking available as part of the API. Check out the new way to update content here: [https://docs.api.video/reference/api/Watermarks#upload-a-watermark](https://docs.api.video/reference/api/Watermarks#upload-a-watermark)
 
## The watermark

In this study, we'll be adding the api.video logo as our watermark.  I (randomly) chose to insert the logo in the top right corner of the video.



logoorange100.png

Your watermark should be appropriately sized for the space in the video.  In this case 100x100 pixels to fit inside a 1920x1080 video (~5%x10% of the screen). 

I have adapted the [record.a.video](https://record.a.video) app to add a watermark and you can test it at [watermark.a.video](https://watermark.a.video), and in this app, I have provided 2 ways to add the watermark: the frontend and the backend.  

medium_screenshot-2021-05-25-at-07-50-14.png

small_screenshot-2021-05-25-at-07-50-14.png

thumbnail_screenshot-2021-05-25-at-07-50-14.png

input-box.png

If the box is checked, the watermark is inserted on the frontend. If unchecked, the watermark is added on the backend.  The field allows you to change the image being added as a watermark.  

## Frontend Watermark

In the watermark.a.video application, the screen (screenCaptureAPI) and the camera (MediaRecorded API) are drawn to a canvas.  I've [described this process in detail](https://api.video/blog/tutorials/building-record-a-video-the-screencapture-api/) with code samples. The canvas is refreshed every 20ms, giving 50 FPS video on the canvas.  

To add a watermark, I simply load the image into the app, and instead of only drawing the screen (videoElem) and the camera (cameraElem), I add the watermarkImg:

```
        console.log("FE watermark", canvasWatermark);
        //load watermark image
        var watermarkImg = new Image;
        watermarkImg.src = canvasWatermark;
            //draw the 2 streams to the canvas
            drawCanvas(videoElem, cameraElem,watermarkImg,ctx);

```

Inside the drawCanvas function, I draw the watermakrImg on top of the other 2 elements (by placing it last in the list of things drawn):

```
    function drawCanvas(screenIn, cameraIn,watermarkImg, canvas){
        var textLength = 60;
        canvas.drawImage(screenIn, screenX0,screenY0, screenX1, screenY1);
        canvas.drawImage(cameraIn, cameraX0, cameraY0, cameraX1, cameraY1);
        canvas.drawImage(watermarkImg, watermark_x, watermark_y);
```

For this demo, I have hardcoded the watermark to be in the upper right corner, so watermark_x = watermark_y = 25.


## Backend Watermark

Perhaps the watermarking for your videos needs to be hardcoded into your process, or you do not want your users to be able to modify the watermark. Adding a processing step in the backend to insert a watermark makes this easy.

> Note that this approach oly works on a live stream, and not with the video on demand.  The VOD recording is done completely on the front end.

In the [record.a.video](https://record.a.video) app, livestreams are sent to a NodeJS server, where the WebRTC video recorded by the browser is converted to RTMP for ingestion into the api.video livestream server.  This conversion is done with FFMPEG.  We can simply modify the FFMPEG command insert the watermark on top of the video while it is being transcoded.  

```
			var ops = [
				'-i', socket._watermarkUrl,
				'-i','-',		
         '-preset', 'ultrafast', '-tune', 'zerolatency', 
			       '-r', framerate, '-g', framerate*2, '-keyint_min',keyint_min, 
				'-filter_complex', '[1:v][0:v] overlay=25:25',
     				'-c:a', 'aac', '-b:a','44k', '-ar', 44100, 
			        '-f', 'flv', socket._rtmpDestination		
		
		];

```

The FFMPEG options for watermarking has 2 lines added to the code from record.a.video.

```
				'-i', socket._watermarkUrl,
```

We have to give the URL of the image to add as the watermark.

```
	'-filter_complex', '[1:v][0:v] overlay=25:25',
```

The filter complex tells FFMPEG the order of the overlay.  Since I add the watermark first (index 0), and then the video stream(index 1) - we place the video stream first, and then the watermark on top, with an offset of 25x25.

FFMPEG reads the image file and just inserts it on each frame encoded to the api.video server.

### Watermark addition

In both cases, the live video that is sent to api.video has the watermark added. In the first case it is added in the browser as the video is being recorded, and in the second case, it is inserted by FFMPEG during a transcoding step.

Here's what the resulting video looks like:




In either case, you can see that we have successfully added the api.video logo as a watermark in the upper right corner.  Try out the demo: [watermark.a.video](https://watermark.a.video).  If you want to add watermarks to your videos - try out [api.video](https://dashboard.api.video/register). Feel free to fork the repo on [Github](https://github.com/dougsillars/watermarkavideo) and try it out yourself! And you can check out all the API reference documentation here: [api.video API Reference documentation](https://docs.api.video/reference). If you have any questions or suggestions, please let us know on our [communtiy forum](https://community.api.video/). 



Watermarking your video or live stream

large_Watermarking.png

medium_Watermarking.png

small_Watermarking.png

thumbnail_Watermarking.png

Watermarking.png

We recently released a new Python client. To make it easier to work with, I set up basic code samples for every endpoint showing you how your requests should be created. The basic samples are all in the [Examples](https://github.com/apivideo/python-api-client/tree/master/examples) folder in the [Python client repository](https://github.com/apivideo/python-api-client).

## Tips for working with the Python client
These are some tips for working with the Python client. 

* Don't mix n' match the Python client's documentation with the docs at [docs.api.video](https://docs.api.video). Parameters are sometimes mapped to more Pythonic parameters in the Python client. For example enablesApi becomes enables_api. This isn't the case everywhere, check the code sample and the documentation in the repository. 
* When you're using the API, typically you'll import the endpoint you want to work with. So you'll import the API with 'import apivideo' and then you'll also have an import statement like 'from apivideo.apis import VideosApi' if you want to use the video endpoint. If you also want to use exceptions, you'd add 'from apivideo.exceptions import ApiAuthException.'
* Authentication is handled for you. It's arranged so you never need to worry about it. You may wonder then, why we provide a way to manually retrieve a refresh token. This is in case your token is exposed. Retrieving a new refresh token will cancel the old one. 
* When you create requests without the client, you'll notice that you open your file in binary, then attach it to a dictionary and send it. In the client, you just open your file in binary, assign that to a variable and send the open file. This is demonstrated in the examples, if the explanation is unclear. For an example, see the [upload_video.py](https://github.com/apivideo/python-api-client/blob/master/examples/upload_video.py) sample. 
* Everything for making requests is built using urllib3. 

## Documentation Examples
If you don't want to use the simplified examples in the code sample folder, you can also use the samples provided by the Python client documentation. Just look up the endpoint you want details about and there are samples provided there.


New code samples for the Python client

large_hitesh-choudhary-d9zow2rem8u-unsplash.jpg

medium_hitesh-choudhary-d9zow2rem8u-unsplash.jpg

small_hitesh-choudhary-d9zow2rem8u-unsplash.jpg

thumbnail_hitesh-choudhary-d9zow2rem8u-unsplash.jpg

hitesh-choudhary-d9zow2rem8u-unsplash.jpg

Chapters

Player SDK

When reading a book, chapters help the reader understand a change has taken place - perhaps a new narrator, or a different point of view is used in each chapter.


Chapters in videos can be used in much the same way. If you need a specific moment in a long video, chapter titles may help you quickly find the part of the video you were looking for.  Here at api.video, we have a native chapter ability in our video player:

In the above version of Big Buck Bunny, I have added several chapters.  This is done with a VTT file.  It looks like this:

```
WEBVTT

1
00:00:34.000 --> 00:01:17.000
Bunny wakes up.

2
00:01:17.000 --> 00:02:30.000
Butterfly 1

3
00:02:30.000 --> 00:04:12.000
Plotting
4
00:04:12.000 --> 00:05:15.000
Construction

5
00:05:15.000 --> 00:05:42.000
Bow

6
00:05:42.000 --> 00:06:35.000
Falling Stuff

7
00:06:35.000 --> 00:07:42.000
Flying Squirrel


8
00:07:42.000 --> 00:09:41.000
Kite

9
00:09:41.000 --> 00:09:42.000
Post Credits

```

These intervals in the VTT file are shown as sections on the playback line at the bottom of the player, and clicking the chapter button lists them all.

## But what if you want an External button?

Super easy.  Using the Player SDK, you can seek to any time you wish.  So, as an example, you can create a series of buttons:

```
    <button id ="bunnyWakes">Bunny wakes</button><br/>
        <button id ="Butterfly">Butterfly</button><br/>
        <button id ="Plotting">Plotting</button><br/>
        <button id ="Construction">Construction</button><br/>
        <button id ="Bow">Bow</button><br/>
        <button id ="Falling">Falling Stuff</button><br/>
        <button id ="FlyingSquirrel">FlyingSquirrel</button><br/>
        <button id ="Kite">Kite</button><br/>
        <button id ="Post">Post Credits</button><br/>
```

Now, we can use an eventListener on these buttons, and using the api.video Player SDK, we can seek to the required time.  Here's the JavaScript that makes this magic happen:

```
      window.player = new PlayerSdk("#target", { 
            id: "vi1UQBDAMqAPCRxB3dmw1thc", 
            autoplay:true,
            muted:true
        });
        
        window.onload = function(){
            document.getElementById("bunnyWakes").addEventListener("click", function() {
                player.setCurrentTime(34);
            });
            document.getElementById("Butterfly").addEventListener("click", function() {
                player.setCurrentTime(77);
            });
            document.getElementById("Plotting").addEventListener("click", function() {
                player.setCurrentTime(150);
            });
            document.getElementById("Construction").addEventListener("click", function() {
                player.setCurrentTime(252);
            });
            document.getElementById("Bow").addEventListener("click", function() {
                player.setCurrentTime(315);
            });
            document.getElementById("Falling").addEventListener("click", function() {
                player.setCurrentTime(342);
            });
            document.getElementById("FlyingSquirrel").addEventListener("click", function() {
                player.setCurrentTime(395);
            });
            document.getElementById("Kite").addEventListener("click", function() {
                player.setCurrentTime(462);
            });
            document.getElementById("Post").addEventListener("click", function() {
                player.setCurrentTime(581);
            });

        }
```

First, we create a player with the player SDK, and insert the Big Buck Bunny video.  Then the eventlisteners work as fastforward/rewind buttons to the exact starting points of each chapter.  Note that the VTT file is in HH:MM:SS.000 time format, while the player.setCurrentTime is in seconds.

With these buttons (and a little CSS to make them pretty), you can build a web interface to your videos that incorporate a chapter skipping functionality, just like inside the api.video player.



Video Chapters: Using external buttons for controls

medium_1599px-chapteronesign.jpeg

small_1599px-chapteronesign.jpeg

thumbnail_1599px-chapteronesign.jpeg

1599px-chapteronesign.jpeg

With so many of us wearing headphones all day for calls, music, podcasts, etc, no one likes having the volume unexpectedly blast their ears. Using the api.video player SDK, you can set a warning when the volume is inadvertently set too high. Let's walk through how it works!


## Setting up the SDK

In this simple HTML page, we have a div for the video, and a paragraph for text:

```
<head>
    ...
    <script src="https://unpkg.com/@api.video/player-sdk" ></script>
</head>

<body>
	<div id="target" style="align:center;width:75%;"></div>
	<p id="text"></p>
</body>
</html>
```
We add a script to load the player SDK.  Now we can instantiate the player with JavaScript:

```
   <script type="text/javascript">
        window.player = new PlayerSdk("#target", { 
            id: "vi4blUQJFrYWbaG44NChkH27", 
            autoplay:true,
            muted:true
        });
     
    </script>

```

This creates the video, using the videoId and tells the player to autoplay the video while muted.  (This is the way to ensure that autoplay works in all browsers, but sadly is muted).

## Volume control

When a video is muted, the user will click/touch on the volume control. In this case we do not want them to accidently turn the volume too high, so we're going to set an initial maximum volume of 50% (in reality, this is kind of low, but test for yourself.)

We do this by setting the event listener for ```volumechange```, so whenever there is a change in volume, we can apply our script.

Here's the code for the volume change:

```
            var warning=false;
            player.addEventListener('volumechange', function(volume) { 
            var vol = volume.volume;
                console.log(`volume has changed: ${vol}`); 
                if(vol >0.50){
                    console.log("too loud!");
                    if(warning){
                        //they've been warned
                        document.body.style.backgroundColor = "red";
                        document.getElementById("text").innerHTML= "THIS IS LOUD";
                    }
                    else{
                        //warn user
                        warning=true;
                        player.setVolume(.5);
                        document.getElementById("text").innerHTML= "Are you sure? Loud volumes can damage hearing";
                    }
                }else if(vol<.50){
                        warning=false;
                        document.body.style.backgroundColor = "green";
                        document.getElementById("text").innerHTML="Nice and soft.";
                    }
		                else{ //exactly 0.5
                    document.getElementById("text").innerHTML= "Are you sure? Loud volumes can damage hearing";
                }

            });

```

First, we declare the boolean ```warning``` as false.  If the player detects a volume change, we look to see if the volume is over or under 50%. 

### High volume

If the volume is set to over 50%, we initially reset it to 50% and ask, "are you sure?", and the warning boolean is flipped to true.  If the user tries to go over 50% **again**, we let them set the higher volume (and change the page background to red).

### Low volume

If the volume is set to under 50%, we change the background to green.

## That's it

The code is on [Github](https://github.com/dougsillars/videoVolume), and the demo is live at [volumewarning.a.video](https://volumewarning.a.video/).  

Here's a video of the demo in action:








Volume warnings

medium_372340532b4c1b79eccc.jpg

small_372340532b4c1b79eccc.jpg

thumbnail_372340532b4c1b79eccc.jpg

372340532b4c1b79eccc.jpg

webhooks

A couple of times a month, we get queries about a video not being ready to play. In this post we'll walk through how you can check the status of your video upload using our API and using our webhook.

large_screenshot-2021-05-05-at-16-12-51.png

medium_screenshot-2021-05-05-at-16-12-51.png

small_screenshot-2021-05-05-at-16-12-51.png

thumbnail_screenshot-2021-05-05-at-16-12-51.png

screenshot-2021-05-05-at-16-12-51.png

Sometimes we'll be asked: *"I uploaded my video a few minutes ago, and the quality is really pixelated. Why does my video look so bad?"*

Both of these questions have roots with the same phenomenon. When a video is uploaded, there is a period of time while the api.video servers encode your video, and place it on our hosting server for delivery.  Until the videos are encoded, they cannot be played back.

When we can up the video's encoding status on our backend, and we often see something like:

large_longvideo.png

medium_longvideo.png

small_longvideo.png

thumbnail_longvideo.png

longvideo.png

The 240p video took 17 minutes to encode, but is ready for playback. The other video qualities are being processed, but are not yet ready, so when the developer looks at the video, she only sees the 240p version. For an idea of why this video was so slow, the video was 120 minutes long.  Shorter videos encode faster than longer ones, because there is less data to process.

Our first user (above) had a very long video, and none of the versions had been encoded yet.

## You can check this yourself!

The [video status](https://docs.api.video/reference/api/Videos#retrieve-video-status-and-details) API endpoint will give you the encoding status of each version of your video.

```
"encoding":{
"playable":true
"qualities":[
{
"quality":"360p"
"status":"encoded"
}
{
"quality":"480p"
"status":"encoded"
}
{
"quality":"720p"
"status":"encoded"
}
{
"quality":"1080p"
"status":"encoding"
}
{
"quality":"2160p"
"status":"waiting"
}
]
```

This API is what we used to diagnose the video encoding above - we've used it to built an internal dashboard to tell where a video stands in the encoding pipeline.  You could do this too! 

In the JSON example above, all versions from 240p to 720p have been encoded and are ready to play. The 1080p encoding is in progress, and the 4K is waiting in the queue to be encoded.

## Is my video ready to play?

With this endpoint, you can check to ensure that the minimum quality that you want is ready for playback.  You can use this to decide whether or not to show the video on your site

## Polling is slow

Polling a server for this status is slow and time consuming.  If your app will be handling many videos being uploaded, you don't want to manage polling the status for each video.

## Webhooks push the encoding status to you

We have a [video encoding webhook](https://docs.api.video/reference/create-and-manage-webhooks) that pushes an alert to your server whenever a video/quality combination is ready for playback.  That way, you can set up a webhook, and let api.video *tell you* when your videos are ready for playback.  You can see a demo at [webhook.a.video](https://webhook.a.video), and read the [blog post](https://api.video/blog/product-updates/new-feature-webhooks/) on how we built this app.

## We're here to help

If you think your video encoding is slow, we're here to help you understand what is going on, and we are happy to help.  But, you can also use our APIs and tools to get this information to your servers in an automatic fashion - and it might just give you the answer you are looking for. (And while we're here for support during the week, the API does not take evenings or weekends off.)


Why isn't my video ready yet?

medium_processing.jpeg

small_processing.jpeg

thumbnail_processing.jpeg

processing.jpeg

codec

small_cedric.webp

thumbnail_cedric.webp

cedric.webp

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/apivideo/talk-to-us) 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/apivideo/talk-to-us)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

small_Blog_Zero Cost.webp

thumbnail_Blog_Zero Cost.webp

Blog_Zero Cost.webp

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?

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/what-is/video-encoding/) that allows companies to add on-demand videos to their websites more efficiently.

Using [api.video](https://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](https://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? 

large_EncodingTranscoding.png

medium_EncodingTranscoding.png

small_EncodingTranscoding.png

thumbnail_EncodingTranscoding.png

EncodingTranscoding.png

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

Video infrastructure

Video player

See all features

Online learning

Short-form videos

Marketplace & E-commerce

Video messaging and recording

Quickstart guides

Documentation

Ecosystem catalog

Clients & SDKs

Community

Blog

Demos

Help center

Tutorials

Follow along these tutorials using api.video