DEV Community: Sebastian Marin

The ultimate guide to online video (codecs, containers and more)

Sebastian Marin — Tue, 13 Jun 2023 15:53:35 +0000

Video is one of the most popular forms of media today, with billions of hours of video content being watched every day. But have you ever wondered how all of this video content is compressed and decompressed? Or what the difference is between a codec and a container? Understanding these concepts is crucial for anyone who works with video, whether you’re a content creator, marketer, or just someone who enjoys watching videos online. In this article, we’ll take a deep dive into the world of video formats, codecs, and containers. We’ll explore the most popular codecs used today, such as H.264, H.265, and VP9, and discuss how they work to compress and decompress video files. We’ll also examine some of the most popular video formats used today, such as MP4, AVI, and MOV. By the end of this article, you’ll have a better understanding of how video files work and why it’s important to understand these concepts.

With the rise of video-sharing platforms like YouTube, Vimeo, and TikTok, more and more people are uploading videos to the internet every day. Understanding codecs and compression is essential for creating high-quality videos that can be easily shared and viewed on different devices and platforms. Similarly, understanding container formats is important for ensuring that your videos are compatible with different software applications and operating systems.

By using the right codecs and container formats, you can create videos that are optimized for different use cases. For example, if you’re creating a video for streaming over the internet, you’ll want to use a codec that provides good compression while maintaining high-quality video playback. On the other hand, if you’re creating a video for archival purposes, you may want to use a codec that provides lossless compression to preserve the original quality of the video.

Now that we’ve established the importance of codecs and containers in digital video, let’s dive a little deeper into video encoding and the different types of codecs that are commonly used.

Encoding is the process of exporting digital video into a format and specification suitable for playback by a user. Each video file contains two elements: codecs and containers. Codecs are compression-decompression algorithms that compress the video data to reduce its size and decompress it for playback. Containers are file formats that hold the compressed video data along with other information such as audio tracks, subtitles, and metadata.

Imagine a shipping container filled with packages of many types. In this analogy, the shipping container is the container format, and the codec is the tool that creates the packages and places them in the container. The container format determines how the compressed video data is stored and organized within the file.

Deep dive into compression-decompression algorithms

Codecs compress and decompress video data by using complex algorithms that analyze the video data and remove any unnecessary information while preserving the quality of the video. During the compression process, the codec analyzes the video data and identifies areas that can be compressed without affecting the overall quality of the video. The codec then discards this information and stores only the essential data required to recreate the video.

When decompressing the video data, the codec reverses this process by analyzing the compressed data and recreating the original video data by filling in any missing information. This process is done in real-time during playback, allowing you to watch high-quality videos without having to wait for them to fully download.

There are two main types of codecs: lossy and lossless. Lossy codecs use compression algorithms that discard some of the original video data to reduce the file size. Lossless codecs, on the other hand, use compression algorithms that preserve all of the original video data while still reducing the file size.

There are many different lossy video codecs available today, each with its own strengths and weaknesses. Some of the most popular codecs include H.264, H.265 (also known as HEVC), VP9, and AV1. H.264 is currently the most widely used codec and is supported by most devices and platforms. It provides good compression while maintaining high-quality video playback.

Let's take H.264 as an example and explain how its algorithms actually work:

H.264 uses a block-oriented motion compensation algorithm. This means that it divides each frame into small blocks called macroblocks and then predicts the movement of these blocks in the next frame. By predicting the movement of these blocks, H.264 can compress the video data more efficiently.

In a little more detail:

The entropy coding algorithm used in H.264 is called CABAC (Context-adaptive binary arithmetic coding). CABAC is used to compress the video data by encoding the symbols that represent the video frames. The symbols are typically pixel values or motion vectors that describe how the pixels move from one frame to another. CABAC uses adaptive probability estimation to adjust the probabilities of symbols based on the context in which they appear. This means that as more data is compressed, CABAC can adjust its probabilities to better reflect the actual distribution of symbols in the data stream. This allows CABAC to achieve better compression than other entropy coding algorithms that use fixed probabilities.

The same process occurs in reverse when decoding an H.264 video.

H.265 is a newer lossy codec that provides even better compression than H.264 but requires more processing power to decode. VP9 is an open-source codec developed by Google that provides high-quality video playback while using less bandwidth than other codecs. AV1 is a newer codec that provides even better compression than VP9 but is not yet widely supported by devices and platforms.

Lossless codecs on the other hand retain all of the original data after decompression. However, lossless video codecs like ProRes codecs can’t compress videos low enough for live web streaming. In contrast, a lossy codec will compress a file by permanently getting rid of data—especially data that is redundant.

Lossless compression is also used in cases where it is important that the original and the decompressed data be identical, or where deviations from the original data would be unfavorable like in the production stage of videos and movies.

Video formats: not just .mp4

Video formats are more than just a file’s extension, like the .mp4 in Video.mp4. They include a whole package of files that make up the video stream, audio stream, and any metadata included with the file. All of this data is read by a video player to stream video content for playback.

The video stream includes the data necessary for motion video playback, while the audio stream includes any data related to sound. Metadata is any data outside of audio and sound, including bitrate, resolution, subtitles, device type, and date of creation.

In addition to standard metadata fields, MP4 files can also contain Extensible Metadata Platform (XMP) metadata. XMP metadata is a standard for embedding metadata in digital files that was developed by Adobe Systems. It allows you to add custom metadata fields to your video files that can be used to store additional information about the video.

Some examples of XMP metadata fields that can be added to MP4 files include camera settings, location data, and copyright information. This information can be useful for video production and editing. For example, if you are working on a video project that includes footage from multiple cameras, you can use XMP metadata to keep track of which camera was used for each shot.

There are many different video formats available, each with its own advantages and disadvantages. Some of the most common video formats include:

MP4: This is a popular format that is widely supported by most devices and platforms. It uses the H.264 codec for video compression and can store both audio and video data.
AVI: This format is widely used on Windows-based systems. It uses a variety of codecs for video compression, including DivX and XviD.
WMV: This format was developed by Microsoft and is commonly used for streaming video on the web. It uses the Windows Media Video codec for compression.
MOV: This format was developed by Apple and is commonly used on Mac-based systems. It uses the H.264 and ProRes codecs for video compression and can store both audio and video data.

Choosing the right video format depends on your specific needs. If you want a format that is widely supported by most devices and platforms, then MP4 is a good choice. If you are working on a Windows-based system, then AVI might be a better choice. If you are streaming video on the web, then WMV might be the best option.

Bit depth and rate…

In video files, bit depth and color depth are two different concepts that are often confused with each other. Bit depth refers to the number of bits used to represent each pixel in an image or video file. The higher the bit depth, the more colors can be represented in an image or video file. Color depth, on the other hand, refers to the number of colors that can be displayed in an image or video file. It is measured in bits per pixel (bpp).

For example, if a video file has a bit depth of 8 bits and a color depth of 24 bpp, it means that each pixel in the video file is represented by 8 bits and can display up to 16.7 million colors.

In summary, bit depth refers to the number of bits used to represent each pixel in an image or video file, while color depth refers to the number of colors that can be displayed in an image or video file.

Now on to Bitrate. It is the rate at which bits are processed or computed over time. The higher the bitrate, the more data there is, which generally means a higher-quality video file. When choosing a bitrate it is important to consider the device your videos will be played on. High bitrate file streams need lots of processing power to encode, and a fast internet connection to download for playback. There are two main types of bitrate: CBR (constant bitrate) and VBR (variable bitrate). Bitrates directly affect the file size and quality of your video. The higher the bitrate, the better the quality of your video, but also the larger the file size.

For example, if you have a video with a bitrate of 10 Mbps (megabits per second), it means that 10 million bits are transmitted every second.

A useful application for your new understanding of bitrate is making sure all your future videos uploaded to a specific platform meet the requirements for minimum and maximum bitrate. This is important when using programs such as Adobe's Premiere Pro or Apple's final cut pro to obtain the best results when exporting.

Here is a brief guide on the bitrates required for optimal streaming performance on Instagram, TikTok, and YouTube:

Instagram: Instagram recommends a bitrate of 3-5 Mbps for optimal streaming performance.
TikTok: TikTok recommends a bitrate of 2.5-3.5 Mbps for optimal streaming performance and a maximum of 8.
YouTube: YouTube recommends a bitrate of 8 Mbps for 1080p video at 30 frames per second (fps) and 12 Mbps for 1080p video at 60 fps and a maximum of 50 at 1080p 60fps or 68 Mbps at 4K.

Please note that these are general recommendations and the actual bitrate required may vary depending on the video content and other factors.

Playback Techniques for Video and Livestreaming

When on the viewing end of the video streaming pipeline there are a few things to take into account:

Video playback and livestreaming are two different methods of viewing video content. Video playback refers to the process of downloading a video file and playing it back on your device. This is the traditional method of watching videos online. Livestreaming, on the other hand, refers to the process of broadcasting live video content over the internet in real time. This allows viewers to watch events as they happen.

There are several formats available for live streaming. One popular format that supports adaptive bitrate (ABR) is HTTP Live Streaming (HLS). HLS or HTTP Live Streaming is a popular format that uses adaptive bitrate streaming techniques to enable high-quality streaming with small HTTP-based file segments. The key to this format’s popularity is the use of HTTP, which is the universal language protocol for the Internet. This allows for reduced infrastructure costs, greater reach, and simple HTML5 player implementation.

Another popular format is Real-Time Messaging Protocol (RTMP), which is a proprietary protocol developed by Adobe Systems for streaming audio, video, and data over the internet between a server and a client.

A great feature of the HLS format is the M3U8 file descriptor. This file allows the client or device to automatically select the best quality stream at any time to prevent playback buffering regardless of bandwidth or CPU power. This means that if your internet connection slows down or speeds up, the stream will automatically adjust to ensure that you have a smooth viewing experience.

Wow, it turns out that the ultimate guide to video is a bit more complex than anticipated 😅🙃.

Congratulations on understanding all the nuances of digital video! It’s no small feat to have a good grasp of such a complex topic. You should be proud of yourself!

If you’re looking for a way to simplify your video hosting, encoding, transcoding, and streaming pipeline, I recommend using api.video. This platform makes it easy to manage your online video needs. Upload your videos, encode them into multiple formats and resolutions, and stream them to your viewers all from one place. Plus, api.video offers a variety of features such as analytics and security options to help you get the most out of your video content.

Whether you’re a seasoned video professional or just starting out, api.video is the perfect solution for simplifying your video workflow.

Unleashing the power of python and FFMPEG: Extracting and stitching video frames with ease

Sebastian Marin — Thu, 25 May 2023 15:44:56 +0000

TL;DR:

Learn how to harness the capabilities of Python and the FFMPEG library to effortlessly extract frames from a video at regular intervals. Explore the step-by-step process, from leveraging the ffmpeg-python module to extracting frames, and discover how to seamlessly stitch them back together into a dynamic video sequence. Unleash your creativity by automating video skimming and programmatically creating video trailers with just a few lines of code.

Unlocking New Possibilities

Have you ever wondered how you can extract frames from a video at regular intervals using Python and FFMPEG? Well, wonder no more! In this article, I will delve into the exciting world of video processing and show you how to effortlessly extract a list of frames from a video file. This powerful technique not only enables you to perform a quick skim of the video but also opens up a world of possibilities, such as creating a captivating trailer for your video programmatically.

By utilising the robust capabilities of Python and the versatile FFMPEG library, you can automate the extraction process and obtain frames evenly spaced throughout the video duration. Whether you're a video enthusiast looking to explore the content of a lengthy recording or a content creator aiming to generate engaging teasers, this technique will undoubtedly come in handy.

Once you've extracted the frames, you might be wondering, "What can I do with them?" Well, the possibilities are endless! You can reassemble the frames back into a condensed video, allowing you to create a visually stunning trailer that captures the essence of the original footage. Imagine the convenience of automating this process instead of manually sifting through hours of video content to find the most compelling moments. With Python and FFMPEG, you have the power to programmatically curate a captivating preview, saving you time and effort.

In this article, we'll guide you through the step-by-step process of extracting frames from a video using Python and FFMPEG. I'll cover the necessary installations and setup, dive into the code implementation, and explore additional customisation options to suit your specific needs. So, whether you're a beginner seeking to expand your Python skills or an experienced developer looking for an efficient video processing solution, this tutorial is tailored just for you.

Extract Images From Your Video

To extract images from your video, we will utilize the powerful ffmpeg-python module. This module provides a convenient Python interface to interact with the FFMPEG library, enabling us to perform various video processing tasks with ease.

To get started, you need to ensure that ffmpeg-python is installed in your Python environment. If it's not installed yet, you can easily install it by running the following command:

pip install ffmpeg-python

Once ffmpeg-python is installed, let's explore the process of extracting images from a video at specific intervals, as illustrated in the code snippet below:

import ffmpeg

YOUR_FILE = 'sample-mov-file.mov'
probe = ffmpeg.probe(YOUR_FILE)
time = float(probe['streams'][0]['duration']) // 2
width = probe['streams'][0]['width']

# Set how many spots you want to extract a video from.
parts = 7

intervals = time // parts
intervals = int(intervals)
interval_list = [(i * intervals, (i + 1) * intervals) for i in range(parts)]
i = 0

for item in interval_list:
    (
        ffmpeg
        .input(YOUR_FILE, ss=item[1])
        .filter('scale', width, -1)
        .output('Image' + str(i) + '.jpg', vframes=1)
        .run()
    )
    i += 1

Let's break down the code snippet step by step:

Firstly, import the ffmpeg module, which provides the necessary video processing capabilities.
In the YOUR_FILE variable, specify the name of the video file from which you want to extract images. Ensure that the video file is located in the same folder as the code sample.
The ffmpeg.probe function is utilized to retrieve essential information about the video. By accessing properties like 'duration' and 'width' from the probe, we can determine the video's duration and width.
Define the parts variable to represent the desired number of intervals from which you want to extract images.
Calculate the intervals value by dividing the video's duration by the number of parts and converting it to an integer.
Create the interval_list using list comprehension, generating tuples that specify the start and end time for each interval.
Iterate over each interval in the interval_list using a loop.
Within the loop, utilize the ffmpeg.input function to specify the input file, with the ss parameter set to the end time of the current interval (item[1]).
Apply the .filter method to scale the output image, ensuring the width remains consistent while automatically adjusting the height to maintain the aspect ratio.
Use the .output method to define the output file name for the extracted frame. In this example, the format 'Image' + str(i) + '.jpg' is employed, where i represents the index of the image.
Finally, execute the extraction process by calling .run(). The loop will iterate to the next interval accordingly.

To assemble the extracted images back into a video sequence, consider the following code snippet:

import ffmpeg

(
    ffmpeg
    .input('Image%d.jpg', framerate=1)
    .output('output.mp4')
    .run()
)

This code snippet compiles the sequence of extracted frames named 'Image%d.jpg', where %d represents the frame number. It then creates a new video file named 'output.mp4' with a frame rate of 1 frame per second, effectively assembling the extracted images into a video sequence.

Now that you have the code snippet at your disposal, you can start extracting frames from your videos programmatically. Experiment with different frame rates and explore the exciting possibilities of using these extracted frames to create engaging visual content, such as video trailers or quick skims of your videos.

Get ready to unlock the potential of video frame extraction with Python and FFMPEG. Discover the magic of transforming videos into dynamic visual experiences that leave a lasting impression on your audience.

Mastering the Art of Seamless Large File Uploads with JavaScript

Sebastian Marin — Tue, 23 May 2023 15:57:37 +0000

TLDR

This article shows you how to upload large files to api.video using JavaScript and the File API and the Blob API. You will learn how to split the file into segments, upload them with a token and a header, and show the progress and the URL to the user. You can find the code on Github, and use a library to simplify the upload.

Introduction

Uploading large files to remote servers can be a challenge for developers. Whether it’s presentations, PDFs, files, or videos, we often encounter errors and frustrations when our files exceed the server’s limit. But what if we could avoid these errors with just a few lines of JavaScript? In this article, we will show you how to do just that.

api.video enables developers to build, scale and operate video in their own apps and platforms in minutes, with just a few lines of code. The service handles the end-to-end workflow, from video ingestion to worldwide video delivery. You can test it for free right away and start building.

One of the most common errors with large uploads is HTTP 413: Request Entity too Large. This means the server has a fixed size limit for accepting files, and anything larger than that will be rejected. You might think that the solution is to increase the server limit, but that’s not always feasible or desirable. For example, if you raise the limit to 2GB for videos, you might end up with huge images that take up too much space.

Another problem with large uploads is that they can fail midway and force you to start over. How annoying is it when your upload fails at 95% completion? To avoid this, we need a way to resume the upload from where it left off.

Segments/Chunks

You probably know that streaming videos from api.video, Netflix or YouTube involves breaking down large video files into smaller segments that are transmitted over the internet. Then the player on your device stitches the video segments back together to play them in the correct order. But did you know that you can do the same thing with your large file uploads? You can split the large file into smaller segments and upload each one separately, without your users noticing anything!

This is possible thanks to the File API and the Blob API that are built into JavaScript and supported by all major browsers:

These APIs allow us to take a large file from our user, and use the browser locally to divide it into smaller segments, without affecting the user experience!

In this article, we will show you how to use this technique to upload a large video to api.video.

You can find the code for this example on Github, so feel free to clone the repo and run it locally.

To create your own uploader like this, you’ll need a free api.video account. You’ll also need a delegated upload token, which is a public upload key that lets anyone upload videos into your api.video account. You can create one using CURL and a terminal window in just 3 steps.

We recommend that you set a TTL (time to live) on your token, so that it expires as soon as the video is uploaded.

Once you have your token, you’re ready to start uploading large files.

Markup



Add a video here:
    <br>
    <input type="file" id="video-url-example">
    <br>



    <br>
    <div id="video-information" style="width: 50%"></div>
    <div id="chunk-information" style="width: 50%"></div>

There is an input field for a video file, and then there are 2 divs where we will output information as the video uploads.

Next on the page is the <script> section - and here's where the heavy lifting will occur.



<script>
      const input = document.querySelector('#video-url-example');
      const url ="https://sandbox.api.video/upload?token=to1R5LOYV0091XN3GQva27OS";
      var chunkCounter;
      //break into 5 MB chunks fat minimum
      const chunkSize = 6000000;
      var videoId = "";
      var playerUrl = "";

First, we need to define some JavaScript variables:

input: the file input interface specified in the HTML.
url: the delegated upload url to api.video. The token in the code above (and on Github) points to a sandbox instance, so videos will be watermarked and removed automatically after 24-72 hours. If you’ve created your own token, replace the URL parameter ‘to1R5LOYV0091XN3GQva27OS’ with your token.
chunkCounter: the number of chunks that we will create from the file. • chunkSize: the size of each chunk in bytes. We set it to 6,000,000, which is slightly above the 5 MB minimum. For production, we can increase this to 100MB or more.
videoId: the delegated upload will assign a videoId on the api.video service. This is used for subsequent uploads to identify the segments, ensuring that the video is properly reassembled on the server.
playerUrl: this will store the playback URL for the api.video player after the upload is complete.

Next, we create an EventListener on the input - when a file is added, split up the file and begin the upload process:



 input.addEventListener('change', () => {
        const file = input.files[0];
           //get the file name to name the file.  If we do not name the file, the upload will be called 'blob'
           const filename = input.files[0].name;
        var numberofChunks = Math.ceil(file.size/chunkSize);
        document.getElementById("video-information").innerHTML = "There will be " + numberofChunks + " chunks uploaded."
        var start =0;
        var chunkEnd = start + chunkSize;
        //upload the first chunk to get the videoId
        createChunk(videoId, start);

We assign the uploaded file to a variable called ‘file’. To calculate the number of chunks to upload, we divide the file size by the chunk size. We round up the number, because any ‘remainder’ smaller than 6M bytes will be the last chunk to be uploaded. We display this number on the page for the user to see. (This is just for demonstration purposes, your users might not be interested in this information in a real product).

Slicing up the file

The function createChunk splits the file into smaller pieces.

Then, we start to slice the file into chunks. You might think we should use chunkSize -1 as the last byte of the chunk we create, since the file starts from zero. But that’s not the case. We use chunkSize as it is, because it represents

the index of the first byte that is excluded from the new Blob (i.e. the byte at this index is not part of the chunk).

So, we need to use chunkSize as it is, because it marks the boundary between the new Blob and the rest of the file.



function createChunk(videoId, start, end){
            chunkCounter++;
            console.log("created chunk: ", chunkCounter);
            chunkEnd = Math.min(start + chunkSize , file.size );
            const chunk = file.slice(start, chunkEnd);
            console.log("i created a chunk of video" + start + "-" + chunkEnd + "minus 1    ");
            const chunkForm = new FormData();
            if(videoId.length >0){
                //we have a videoId
                chunkForm.append('videoId', videoId);
                console.log("added videoId");

            }
            chunkForm.append('file', chunk, filename);
            console.log("added file");


            //created the chunk, now upload iit
            uploadChunk(chunkForm, start, chunkEnd);
        }

In the createChunk function, we increment the chunkCounter to keep track of which chunk we are uploading, and we calculate the end of the chunk (remember that the last chunk will be smaller than chunkSize, and it will go until the end of the file).

In the first chunk uploaded, we include the filename to name the file (otherwise, the file will be called ‘blob.’

The actual slice command

The file.slice cuts the video into a ‘chunk’ for upload. This is how we divide the file into smaller pieces!

We then create a form to upload the video segment to the API. The API returns a videoId after the first segment is uploaded, and we need to include this videoId in the following segments (so that the backend knows which video to append the segment to).

On the first upload, the videoId is empty, so we don’t need it. We add the chunk to the form, and then we call the uploadChunk function to send this file to api.video. On the next uploads, the form will have both the videoId and the video segment.

Uploading the chunk

Let's walk through the uploadChunk function:



    function uploadChunk(chunkForm, start, chunkEnd){
            var oReq = new XMLHttpRequest();
            oReq.upload.addEventListener("progress", updateProgress);   
            oReq.open("POST", url, true);
            var blobEnd = chunkEnd-1;
            var contentRange = "bytes "+ start+"-"+ blobEnd+"/"+file.size;
            oReq.setRequestHeader("Content-Range",contentRange);
            console.log("Content-Range", contentRange);

We kick off the upload by creating a XMLHttpRequest to handle the upload. We add a listener so we can track the upload progress.

Adding a byterange header

When doing a partial upload, you need to inform the server which ‘part’ of the file you are sending - we use the byterange header for this.

We attach a header to this request with the byterange of the chunk being uploaded.

Note that in this case, the end of the byterange should be the last byte of the chunk, so this value is one byte less than the slice command we used to cut the chunk.

The header will look something like this:

Content-Range: bytes 0-999999/4582884

Upload progress updates

While the video chunk is uploading, we can show the upload progress on the page, so our user knows that everything is working fine. We created the progress listener at the start of the uploadChunk function. Now we can define what it does:



            function updateProgress (oEvent) {
                if (oEvent.lengthComputable) {  
                var percentComplete = Math.round(oEvent.loaded / oEvent.total * 100);

                var totalPercentComplete = Math.round((chunkCounter -1)/numberofChunks*100 +percentComplete/numberofChunks);
                document.getElementById("chunk-information").innerHTML = "Chunk # " + chunkCounter + " is " + percentComplete + "% uploaded. Total uploaded: " + totalPercentComplete +"%";
            //  console.log (percentComplete);
                // ...
              } else {
                  console.log ("not computable");
                // Unable to compute progress information since the total size is unknown
              }
            }

First, we do some math to calculate the progress. For each chunk we can get the percentage uploaded (percentComplete). This is a fun value for the demo, but not very useful for real users.

What our users want is the totalPercentComplete, which is the sum of the existing chunks uploaded plus the amount currently being uploaded.

For this demo, we display all these values in the ‘chunk-information’ div on the page.

Chunk upload complete

Once a chunk is fully uploaded, we run the following code (in the onload event).



oReq.onload = function (oEvent) {
                           // Uploaded.
                            console.log("uploaded chunk" );
                            console.log("oReq.response", oReq.response);
                            var resp = JSON.parse(oReq.response)
                            videoId = resp.videoId;
                            //playerUrl = resp.assets.player;
                            console.log("videoId",videoId);

                            //now we have the video ID - loop through and add the remaining chunks
                            //we start one chunk in, as we have uploaded the first one.
                            //next chunk starts at + chunkSize from start
                            start += chunkSize; 
                            //if start is smaller than file size - we have more to still upload
                            if(start<file.size){
                                //create the new chunk
                                createChunk(videoId, start);
                            }
                            else{
                                //the video is fully uploaded. there will now be a url in the response
                                playerUrl = resp.assets.player;
                                console.log("all uploaded! Watch here: ",playerUrl ) ;
                                document.getElementById("video-information").innerHTML = "all uploaded! Watch the video <a href=\'" + playerUrl +"\' target=\'_blank\'>here</a>" ;
                            }

              };
              oReq.send(chunkForm);

When the file segment is uploaded, the API returns a JSON response with the videoId. We store this in the videoId variable, so we can include it in the next uploads.

To upload the next chunk, we increase the bytrange start variable by the chunkSize. If we have not reached the end of the file, we call the createChunk function with the videoId and the start. This will recursively upload each subsequent piece of the large file, until we reach the end of the file.

Upload complete

When start > file.size, we know that the file has been completely uploaded to the server, and our work is done! In this example, we know that the server can accept 5 MB files, so we split the video into many smaller segments to fit under the server size limit.

When the last segment is uploaded, the api.video response contains the full video response (similar to the get video endpoint). This response includes the player URL that is used to play the video. We save this in the playerUrl variable, and add a link on the page so that the user can watch their video. And that’s it!

Conclusion

In this article, we have shown you how to upload large files to api.video using JavaScript and the File API and the Blob API. We have explained how to split the file into smaller segments and upload them separately, using the byterange header and the delegated upload token. We have also demonstrated how to show the upload progress and the playback URL to the user. We hope you found this article useful and informative. If you have any questions or feedback, please let me know in the comments below. Happy uploading!