next.js

video api

api video plugin

Normal

large_img_8063-min-1.jpg

medium_img_8063-min-1.jpg

small_img_8063-min-1.jpg

thumbnail_img_8063-min-1.jpg

img_8063-min-1.jpg

github-brands.svg

GitHub Yohann

5a22d420c9a5a7-416105621512231968826.png

LinkedIn Yohann

Yohann Martzolff

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

JavaScript

Typescript

Next.js

React

No doubt, Next.js is one of the best React framework for full-stack web applications.

What if you want to create your own video application? A Next.js boilerplate with all [api.video](https://api.video) features is ready for you to begin your journey 🧑‍💻 

## What’s a boilerplate 🤔

A boilerplate is a unit of writing that can be reused without change. The idea is sometimes applied to reusable programming, and that’s the case here: our Next.js boilerplate is a starter pack containing all [api.video](https://api.video) features that anybody can use, without having to change anything in it to start a new project. 

Of course, you are free to modify anything once your application is running!

## What can I achieve with this boilerplate 🥇

After the boilerplate has been bootstrapped, you can run your brand-new application and enjoy [api.video](https://api.video) features!

Upload videos, display them as a list, and play any video in a fully customizable player.

[api.video](https://api.video) proposes many more endpoints to manage and create a complete video application.
Check [our documentation](https://docs.api.video/) to learn about this.

## Get started 🏁

Find out about ***[how to use our boilerplate](https://github.com/vercel/next.js/tree/canary/examples/with-apivideo)*** on the README file, or follow the guide bellow 👇 

1. Create a new Next.js application by running one of the following commands in a new terminal and following the command prompts.

2. Rename the `.env.local.example` file with `.env`.
3. Find your API key in the [api.video](https://api.video) dashboard [API keys section](https://dashboard.api.video/project-settings/api-keys) and add its value to the API_KEY environment variable in the `.env` file.

💡 If you don’t already have an api.video account, create a free one [here](https://dashboard.api.video/register).

4. Start your application by running `yarn dev` in your terminal, and voilà!

You should be able to see a basic sample app from where you can upload videos and see them as a list.

large_screenshot-2023-01-31-at-17-24-04.png

medium_screenshot-2023-01-31-at-17-24-04.png

small_screenshot-2023-01-31-at-17-24-04.png

thumbnail_screenshot-2023-01-31-at-17-24-04.png

api-video-next-js-boilerplate-preview.png

Everything in this application is set up to build a complete video application, from Next.js to api.video, enjoy coding! 

Find the full boilerplate in the official Next.js repository [right here](https://github.com/vercel/next.js/tree/canary/examples/with-apivideo).

Start your video project with api.video Next.js boilerplate

large_NextjsBoilerplate.png

medium_NextjsBoilerplate.png

small_NextjsBoilerplate.png

thumbnail_NextjsBoilerplate.png

NextjsBoilerplate.png

api.video Next.js boilerplate: start your video project the easy way

large_Neda.jpg

medium_Neda.jpg

small_Neda.jpg

thumbnail_Neda.jpg

Neda.jpg

Neda Ashrafi Amiri

large_api-video-blog-product-updates.png

medium_api-video-blog-product-updates.png

small_api-video-blog-product-updates.png

thumbnail_api-video-blog-product-updates.png

api-video-blog-product-updates.png

Product updates

If you have some technical knowledge, you know it’s not the wisest decision to create and develop your product from scratch. Why reinvent the wheel? To successfully create an application or a website, you need to take advantage of what is already out there and add that extra bit to make your product unique and competitive 🏃🏾‍♀️🏃‍

Each tech company can only provide you with some of your needs. While WordPress is ideal for developing your company website, WooCommerce is an excellent tool for adding a webshop, and api.video is specialized for managing your videos on your site. This means that you depend on various suppliers for tools and apps to create an end product 📲 

api.video has made it its mission to create a strong network of plugins, clients, libraries, and other no-code or low-code tools, namely api.video's ecosystem. We know what our strengths are, and at the same time, we acknowledge the power of our peers. We work towards making it easy to add api.video to your product and combine it with the rest of the tools you need to create your solution.

Over the past year, api.video’s ecosystem has had a staggering growth to ensure that you can easily add, manage, and playback videos into your products anywhere on the web and mobile. In this article, we will look at some of the most popular items in our ecosystem and how they can help you create your solution, whether it's an application or a website 💻

## api.video’s ecosystem - the highlights 🏆

Let’s look at some of our most recent and popular additions to our ecosystem and find out how you can benefit from each tool.

🧩  [Video import tool](https://import.api.video/)

Some of you were looking to move away from your current video providers and switch to api.video services for various reasons such as gaining more control over your video content and benefiting from the flexible pricing plans that we offer. We saw this as a great opportunity to introduce an ultimate video import tool that allows you to quickly and easily import your videos from another provider (e.g. Dropbox or Vimeo) to your api.video dashboard.

🧩  [Plugin for WordPress](https://api.video/blog/product-updates/wordpress-plugin/)

WordPress is the world’s most popular Content Management System (CMS) that allows you to create your blog or website without bothering with too much development. A large number of WordPress users were looking for a video provider with more security and higher availability rates than some of the more commercial video providers out there such as YouTube. Becoming aware of this gap in the market, we developed a plugin to offer api.video services for WordPress users.

With our WordPress plugin, you can embed and manage your videos into your WordPress website or blog using our HTML5 video player and manage your videos from your WordPress admin interface.

🧩  [Plugin for Strapi](https://api.video/blog/tutorials/api-video-strapi-plugin-add-videos-to-your-headless-cms/)

If you are looking for a CMS that gives you freedom and doesn’t lock you in any way, then Strapi headless CMS is your ticket out! Strapi is one of the most popular headless CMSs out there that saves you a lot of development time while enabling you to use your favorite tools to bring content to your website and application.

api.video created a powerful plugin that is a perfect fit for you who wish to add videos to your content but also have the possibility to customize and manage your videos as you wish.

**🧩  [Player](https://api.video/blog/tutorials/api-video-player-for-flutter-playback-videos-on-your-apps/) and [uploader](https://github.com/apivideo/api.video-flutter-uploader) for Flutter

Android, iOS, and web, all require a certain way of development with different coding languages. This is where Flutter comes and makes your lives as developers easier. No more developing multiple applications and websites with hours and hours of coding. With Flutter, you create once and generate for multiple devices. Here is where api.video comes to complete your application development journey.

We built an api.video customizable player for Flutter built natively for Android, iOS, and the web. We also created an uploader that allows you to upload your videos to [api.video](https://api.video/) from your Flutter application. These are very specific needs that go a long way to making your development journey smoother.

🧩  Players for [Android](https://api.video/blog/tutorials/how-to-add-an-api-video-player-to-your-android-application/) and [iOS](https://api.video/blog/tutorials/how-to-add-an-api-video-swift-player-to-your-ios-application/) applications

Are you creating an Android or iOS application and want to add videos? api.video has developed players that help you with just that. A hassle-free and quick way to add your videos but also have the options to adjust to screen size and customise your players as you want.

🧩  [Accessible player](https://api.video/product/player/)

We work everyday to remove any technological barriers so that any group of society can easily use api.video’s services. Whether a person experiences vision impairments or hearing impairments, it’s our ultimate mission to make api.video accessible for all users. We made sure to develop our video player including ARIA attributes so that it’s accessible to all screen reader users.

We have many more interesting and useful tools in our ecosystem. Go and browse through our [ecosystem catalog](https://dashboard.api.video/catalog), [blog](https://api.video/blog/), and [GitHub](https://github.com/apivideo) page to find out the many more opportunities that are available when it comes to building your solution!

## api.video’s ecosystem- tutorials, use-cases, and support 🔦

When it comes to creating a strong and powerful ecosystem, many companies often forget the very important part of this journey which is the pedagogical part. At api.video we don’t just push the latest trendy plugins on our ecosystem; we also ensure that we provide the right tutorials, use-cases, and customer support that goes with our new tools. It’s an intuitive web of elements that make our ecosystem catalog unique and stands out from our competitors.

### Tutorials ✍️

Whenever we launch a new item on our ecosystem catalog, our team plans a tutorial that helps our users to navigate the new tool. Our tutorials can range from being a simple step-by-step guide to a quick video demo that display how to use and explore our new tool.

Here are three of the latest examples:

1. [Switch to api.video with our fast & easy video import tool](https://api.video/blog/tutorials/switch-to-api-video-with-our-fast-easy-video-import-tool/)
2. [api.video Strapi Plugin: Add videos to your headless CMS](https://api.video/blog/tutorials/api-video-strapi-plugin-add-videos-to-your-headless-cms/)
3. [api.video player for Flutter: playback videos on your apps](https://api.video/blog/tutorials/api-video-player-for-flutter-playback-videos-on-your-apps/)

You can find many more tutorials on our [blog](https://api.video/blog/).

### Use-cases 💡

You may have the will to create the next best application but not quite know what you can create with our tools! We provide use-case-based articles to give you plenty of ideas that can inspire you and bring your creativity to life! 

You want to create your own TikTok or Loom-like app? Browse through some of the articles that we have written with real-life implementations that our ecosystem team has put together:

- **[Build a YouTube-like site with no code](https://api.video/blog/no-code/bubble-io-api-video-build-a-youtube-like-site-with-no-code/)**
- **[Build your own TikTok](https://api.video/blog/tutorials/rebuilding-tiktok-with-api-video/)**
- **[Create a Udemy-like learning platform](https://api.video/blog/tutorials/how-to-create-a-udemy-like-learning-platform/)**
- **[Build a Loom-like app with just a few lines of code](https://api.video/blog/tutorials/build-a-loom-like-app-with-just-a-few-lines-of-code/)**
- **[How to Be Like Netflix with the Power of api.video Analytics](https://api.video/blog/video-trends/how-to-be-like-netflix-with-the-power-of-api-video-analytics/)**

We have many more articles that can inspire you. Check out our [blog](https://api.video/blog/), and feel free to [contact us](https://meetings.hubspot.com/apivideo/talk-to-us) if you have any feedback or other ideas that you would like to explore!

### Documentation 📚

Developers love a neat documentation that helps them navigate through code libraries. We work towards refining our documentation everyday to make your lives easier. Check out our [documentation](https://docs.api.video/reference) page and our [GitHub](https://github.com/apivideo) pages for more information!

### Support 🤝

It doesn’t end with a new tool, a tutorial, or a use-case article. We know that every one of you may have a very specific and individual need that requires our one-on-one attention. Therefore we ensure that our experts are available to answer your questions or hear your feedback anytime. Chat with us or [email us](https://api.video/contact/) whenever it suits you! We are located in EU-zone to answer all your requirements!

## What is next for the api.video’s ecosystem 🧗🏼‍♂️

We are currently working on a few exciting projects to expand our ecosystem catalog! Here is a sneak peak of the closest upcoming projects **👀**

- new providers in the import tool
- brand new open source HTML5 player
- new plugins & integrations in CMS & no code platforms
- continue to improve & to add features to our existing SDKs
- a new Firebase plugin to help mobile app developers to easily build UGC apps

We work towards developing tools that make it easier for you to upload, manage, and smoothly playback your videos in small or large quantities on your websites and applications. 

🚀 [Get started](https://dashboard.api.video/register) for free at api.video and follow us on our growth journey 💫

Our ecosystem: connect api.video with your product

api.video ecosystem plugins no-code tools

large_24jan23.png

medium_24jan23.png

small_24jan23.png

thumbnail_24jan23.png

api-video-ecosystem-plugins-no-code-tools.png

Our ecosystem: connect api.video with your product 🔌

strapi

large_logo_avatar.webp

medium_logo_avatar.webp

small_logo_avatar.webp

thumbnail_logo_avatar.webp

logo_avatar.webp

Github Mathieu Thiry

linkedin_logo_initials.png

LinkedIn Mathieu Thiry

Mathieu Thiry

[Strapi](https://strapi.io/) is a headless CMS used to develop websites, mobile applications, eCommerce sites, and APIs. Strapi allows you to create an API without knowing anything about backend development or databases. 

Today, we're pleased to announce our new plugin on the Strapi marketplace 🎊. A powerful, easy, and secure way to bring video content to your websites and applications using the Strapi interface. 

In this tutorial, we will focus on how to use the [api.video](https://api.video) plugin, and provide a basic example on how to integrate the api.video plugin into your project. 

## Install the api.video plugin for Strapi

Take a look at the following video which goes through the following:

* How to install the api.video uploader on your Strapi CMS with a few simple steps.
* How to add your api.video key to the Strapi CMS to connect your accounts.




You will need to have your instance of Strapi installed. If you haven’t installed a Strapi project yet follow this [guide](https://docs.strapi.io/dev-docs/quick-start). 

We are going to install the [api.video uploader](https://www.npmjs.com/package/@api.video/strapi-uploader-plugin) Strapi plugin in this step. Run the following command from within the project root of Strapi.

🎉 Congrats, the *api-video-uploader* plugin should appear in the **Plugins** section of Strapi sidebar after you run app again.

## Connect your api.video API Key

Before getting started, you will need to obtain an **API Key** which can be generated from the [api.video dashboard.](https://dashboard.api.video/)

On your Strapi dashboard, you will see the api.video uploader on the left side. Click on the api.video uploader and you will see the *Go to settings* button. Enter your API Key you have obtained on your api.video dashboard and copy it here. 

Now you are all set to upload your videos 🎖️

large_api-video-uploader-strapi.png

medium_api-video-uploader-strapi.png

small_api-video-uploader-strapi.png

thumbnail_api-video-uploader-strapi.png

api-video-uploader-strapi.png

## Manage and integrate your videos 

Take a look at the following video which goes through the following:

* How to add, update, and delete your videos on the api.video uploader in your Strapi CMS.
* How to integrate your videos into your application using the Postman application for testing.



## Upload your first video

As you can see, you have two options to add a video. Click any of the buttons, and a pop-up window will appear.

large_api-video-uploader-strapi-1.png

medium_api-video-uploader-strapi-1.png

small_api-video-uploader-strapi-1.png

thumbnail_api-video-uploader-strapi-1.png

api-video-uploader-strapi-1.png

You can choose to upload your video file by either clicking on the Select a video box or drag and drop your video file into the boxed area. As you can see, the video must have a title. Once you select a video and enter a title, you can go ahead and click the Upload button. Wow! You have just uploaded your first video 🎈

large_api-video-uploader-strapi-2.png

medium_api-video-uploader-strapi-2.png

small_api-video-uploader-strapi-2.png

thumbnail_api-video-uploader-strapi-2.png

api-video-uploader-strapi-2.png

Before clicking the *Upload* button, you can also add several video attributes that would help you or your business to organize and rank your videos in a more efficient way. You can write a description of the video, list a number of tags to categorize your video, and add metadata. 

By default, the metadata sends the value Strapi as upload source and can’t be deleted. However, you can add as many other metadata as needed.

medium_api-video-uploader-strapi-3.png

small_api-video-uploader-strapi-3.png

thumbnail_api-video-uploader-strapi-3.png

api-video-uploader-strapi-3.png

It’s worth mentioning that behind the scenes, it uses our home made [`typescript uploader`](https://github.com/apivideo/api.video-typescript-uploader) for fast uploading.

### Edit or delete your videos

You can edit and update your videos at any time. The information modified will be applied and visible on the Strapi dashboard. The delete option is available on the thumbnail.

### Configure the external resources**

large_api-video-uploader-strapi-4.png

medium_api-video-uploader-strapi-4.png

small_api-video-uploader-strapi-4.png

thumbnail_api-video-uploader-strapi-4.png

api-video-uploader-strapi-4.png

If you encounter an issue in visualising the thumbnail and the video like the image above, please add those 2 external resources `embed.api.video` and `cdn.api.video`. Modify the `middlewares.js` file like below:

## Permissions

With the Community Edition of [Strapi](https://strapi.io/), any user with the role of super administrator can configure and use the plugin.

With *Strapi Enterprise* the permissions can be fine tuned according to the role of the users. This is done in the **Roles** view in the **Administration Panel**.

large_api-video-uploader-strapi-5.png

medium_api-video-uploader-strapi-5.png

small_api-video-uploader-strapi-5.png

thumbnail_api-video-uploader-strapi-5.png

api-video-uploader-strapi-5.png

## Integrate the api.video uploader with your application

The `api-video-asset` collection type gives users a way of easily integrate [api.video](https://api.video) assets in their front-end application thanks to custom api call. 

The info that is stored on the `api-video-asset` collection type is the following: 


large_graphic_strapi.png

medium_graphic_strapi.png

small_graphic_strapi.png

thumbnail_graphic_strapi.png

graphic_strapi.png


The endpoint is protected, so you need a token to authenticate. Go to the *Settings* section on your Strapi dashboard and then select *API Tokens*. Click on Create new *API Token*. Select *Custom*  as your *Token type* and then scroll down to *Api-video-uploader* and choose what type of permission you want.

large_api-video-uploader-strapi-6.png

medium_api-video-uploader-strapi-6.png

small_api-video-uploader-strapi-6.png

thumbnail_api-video-uploader-strapi-6.png

api-video-uploader-strapi-6.png

After clicking on the Save button, copy the bearer token published. We are going to test it on Postman. Copy the following URL address ```http://localhost:1337/api/api-video-uploader/api-video-asset``` and paste it next to your request type. Go to Authorization, select the Type Bearer and paste the copied token. Click send and you will get your videos details! 

medium_api-video-uploader-strapi-7.png

small_api-video-uploader-strapi-7.png

thumbnail_api-video-uploader-strapi-7.png

api-video-uploader-strapi-7.png

## Final thoughts

We're super excited to see what folks will build with the api.video and Strapi 🤩 

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

api.video Strapi Plugin: Add videos to your headless CMS

large_api-video-strapi-plugin.png

medium_api-video-strapi-plugin.png

small_api-video-strapi-plugin.png

thumbnail_api-video-strapi-plugin.png

api-video-strapi-plugin.png

As we all know, WordPress is an excellent platform to use for building your own website because it is easy to you. The variety of plugins at your disposal is a game-changer, especially if you do not code. 

We're pleased to announce our new WordPress integration on the [Wordpress plugins directory](https://wordpress.org/plugins/api-video/). 
If you have a WordPress website or blog, our plugin will allow you in a few clicks to:
* embed any of your videos in your WordPress content using our HTML5 video player
* manage your videos from your WordPress admin interface: list all your videos, upload a new one, and edit existing ones

All you need is: 

1. A WordPress website 🤓
2. An api.video API key (get a free sandbox key [here](https://dashboard.api.video/register))


## Installing the api.video WordPress plugin

### Adding the plugin from the plugins library

The easiest way to install the plugin is to use the plugin search. Log in to your WordPress administration area, and go to the **Plugins » Add New** page. 

Plugin installation from the plugins directory

plugin-installation-from-directory.jpg

You'll see a screen like the one above. In the top-right search area, type "api.video". You should see the api.video plugin appear. 

Click on the **Install now** button on the api.video plugin card. After a few seconds (or minutes, depending on your connection), the **Install now** button changes to **Activate**. Click on **Activate** to activate the plugin. That's it; the plugin is installed!

### Setting up the plugin

There is one last step before using the plugin: you have to enter your api.video API key in the plugin settings.

A new entry called **api.video** automatically appeared in your administration menu after you installed the plugin. Go to the **api.video » Settings** page.

Enter your API key in the plugin settings

plugin-installation-api-key.jpg

Copy your API key from your [api.video dashboard](https://dashboard.api.video) and paste it in the dedicated field, as shown in the above screenshot. Finally, click on the Save button. If an error message appears, double-check your API key. 

## Usage

### Uploading a video

To upload a new video, go to the **api.video » Add new** page. From here, you'll be able to select the video file you want to upload by clicking on the **Select files** button.

plugin-add-new-video.jpg

Once the video file has been selected, the upload starts automatically. Once the upload is complete, a link is provided to the video editing page ("Watch the video here" link). By clicking on this link, you'll be redirected to the video editing page (see bellow [Editing a video](#editing-a-video)). 

### Listing your videos

You can find the list of all the videos you have uploaded to your api.video account by clicking on **api.video » Library**. For each of your videos, you will see the associated thumbnail and its title.

plugin-videos-list.jpg

If you want to integrate one of the videos into an article and then modify it, click on the associated thumbnail. You will be redirected to the **video editing page**. 

### Editing a video

You can access the video editing page right after uploading a video or selecting an entry in the videos list.

plugin-edit-video.jpg

From here, you'll be able:
- to update the video title, description, and tags
- to decide whether the video is private or not, panoramic or not, and downloadable or not 

Don't forget to click on the **Save** button after making your changes!

Another essential element on this page is the **"shortcode"**. This is what will allow you to embed the video on your website.

### Embedding a video in a post/page

The first step is to copy the **shortcode** associated with the video you want to embed. This shortcode can be found on the [video editing page](#editing-a-video). 

Once you have copied this shortcode, go to the editing page of the article where you want to embed the video. 

At the spot where you want the video to appear, insert a "shortcode" block into your article. One way to do that is to show the **block inserter** by clicking on the big **+** at the top left of the page. Then type "shortcode" in the search input and click on the **Shortcode** element. 

plugin-shortcode.jpg

Once the block has been added in your article, you now have to paste the value you copied in the video editing page (it should look like **[api.video video_id=123456789]**).

Paste the shortcut value into the dedicated input

plugin-shortcode-paste.jpg

In most cases (but it depends on your WordPress theme), you will get a better result if you transform the block to "Columns." To do so, click on the first icon above the block and select **Columns**.

plugin-shortcode-columns.jpg

And that's it! Once your article is saved, you will see the video appear where you inserted it. 

Your video is now embedded in your article

plugin-player.jpg

## Conclusion

If you have any questions, please ask us on our [community forum](https://community.api.video/).

For any feature request or bug report, don't hesitate to open an issue on the [Wordpress plugin Github repository](https://github.com/apivideo/api.video-wordpress-plugin).

The New api.video WordPress Plugin

large_wordpress-andapi-video.jpg

medium_wordpress-andapi-video.jpg

small_wordpress-andapi-video.jpg

thumbnail_wordpress-andapi-video.jpg

wordpress-andapi-video.jpg

Uploading a video to api.video just got easier!

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


## JS Uploader Widget

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

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

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

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

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

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

```

### Walking through the code

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

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

```

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

The retry count defaults to 5.  

#### During Upload

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


```

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

#### Upload complete

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

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

```


## Conclusion

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

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

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


New video uploader JavaScript library

large_new-video-uploader-javascript-library.png

medium_new-video-uploader-javascript-library.png

small_new-video-uploader-javascript-library.png

thumbnail_new-video-uploader-javascript-library.png

new-video-uploader-javascript-library.png


Here at [api.video](https://api.video), we love making video delivery easy for our customers. We take care of doing all the video transcoding and [video streaming](https://api.video/product/live-stream/) so that you can focus on all the other facets of your product. Using our APIs (and our SDKs) is a straightforward and easy way to add video to your service. In this post, we’ll walk through the steps to create a website where you can upload videos.

> Note: Use NodeJS in the middle results in a "double upload" - the video is uploaded to the Node server - then to api.video.  You can avoid this with a [delegated token](https://api.video/blog/endpoints/delegated-upload/) and our [JS library](https://api.video/blog/tutorials/new-video-uploader-javascript-library/).

You can also check out our API reference documentation here: [API Reference documentation](https://docs.api.video/reference)

## Overall Architecture

![Overall architecture api.video](https://cdn-images-1.medium.com/max/800/1*Vje7Cz76uC0VTHLkrAmGFQ.png)

1.  Starting with a web form, a video is submitted to the Node server.
2.  The video is immediately uploaded to api.video for processing
3.  api.video acknowledges the video upload, returns the videoId, and begins encoding the video.
4.  The node server polls api.video to obtain the playable status (confirming that encoding is completed).
5.  As long as the result is “false”, the polling continues.
6.  When the video is playable, the Node server returns a page with the video. The video autoplays to show that the video is ready to play. The page also returns the timings for upload & for video processing.
7.  The video link is e-mailed to the user (optional).

### Getting Started

### Node & Dependencies

There are a number of required Node dependencies:

``` 
npm install express dotenv @api.video/nodejs-sdk fs pug serve-favicon formidable email-validator
```

This tutorial also optionally connects to Intercom to send emails to your users. This will require:

``` 
npm install intercom-client
```

### Building the Site

### Starting index.js

You can clone the GitHub repository to follow along, but here is the code that builds your video uploader:

In the src/index.js file, copy the following code:

In this snippet, Node imports Express (and dotenv for environmental variables). The first big chunk of code creates and sets up an express app. It will use Pug to build the views. Static files are saved in the ‘public/’ directory, and serve-favicon adds the favicon to the site. You can use the default favicon in the public directory on GitHub, or create your own.

Next we have app.get — on the default entry point of the site. If a request occurs at the “/upload-demo” directory of the web server, we’ll deliver the start.pug file that is saved in the views directory.

Finally, the app listens on port 3000 for requests. If you run npm start from the terminal, you should get a response of “Example app listening on port 3000!” You can now enter “localhost:3000/upload-demo” into your browser, and if you have added the views directory — you’ll see the form. If you have not yet added the view, you’ll probably get an error.

### Start.pug

The landing page is simply an introductory text describing the upload and a form to select the file. This page is created with Pug. Pug is really persnickety about indentation spaces, so it might be best to copy the code (or just use the code) from GitHub rather than copy and paste from this post.

In the head tag, we load some CSS and the favicon.

test-out-api-video.png

The body loads descriptive text on api.video, and the submission form. The form takes 4 inputs: video name, e-mail, true/false mp4 support and the video file. You may notice that the form action will reload the root directory of the server. Since the data submission is a POST, it will be easy to identify the 2nd request.

### POST Form Processing

Add these additional lines to the index.js. At the top of the file, we need to add dependencies:

api.video is our backend where uploaded videos are transcoded into video streams. We add the SDK, and then I store my API key in a .env file. I have added the .env file to my .[gitignore](https://git-scm.com/docs/gitignore) file so that when I post my code on GitHub, my key is not uploaded and remains secure.

We also add formidable to read the form data and save the video locally on the Node server. The e-mail validator does what it sounds like it might do, and finally I add three variables to measure how quickly the service handles the video processing.

In the body of index.js, add the following:

We are now building the POST response. Formidable saves the video in the directory specified in the .env variable videoDir (this doesn’t have to be private, but it is nice to save all configurable variables in one place). When the upload requests mp4 support, the variable must be a boolean, so we use the string from the response to create the corresponding boolean value. The email validator validates the email, and if the email is valid  -  we use production credentials at api.video (permanent video hosting). If there is no e-mail, or it is not valid, the video is instead processed in the Sandbox, meaning that it will be watermarked & deleted after 24 hours. For your use — you probably just want to post to production, so you can simplify this logic.

Finally, we begin the upload of the video to api.video (and capture the time of the upload start).

If you try to run this code now, it will hang — we are not yet listening for the response from api.video. However, adding:

```
console.log(result);
```

Will show the JSON response from api.video:

The videoID is important to display and playback the video, as are the assets. We also can see useful metadata about the video — Mp4Support, Panoramic, public/private, etc. Note that there is no mp4 url — the video must be encoded to receive that url, so we’ll grab it later.

### Video Upload Response

After the “let result = client.videos.upload(files.source.path, {title: fields.title, mp4Support: mp4Support});” paste in the lines below.

We listen for the result from the upload. This allows us to mark upload completed (to measure the elapsed upload time). If the video has successfully been uploaded to api.video, we now have 2 copies of the video: one on the node server, and the other at api.video. Fs.unlink deletes the file on the node server. The JSON response gives us the videoId at api.video, and links to the iframe and player video urls (which we assign to variables). The mp4 url is only presented in this response when encoding is finished.

Even though we have the urls to the videos, they have not been processed yet. To determine if the video is playable, we call the videoStatus function. This sends a request to api.video to obtain the video status. The response is a JSON with lots of details about upload status, file size, and metadata like the dimensions and bitrate (you can learn more about these parameters in the [documentation](https://docs.api.video/reference/api/Videos#retrieve-video-status-and-details)):

Reading the videoStats.encoding.playable value tells us if it is ready to play or not. If it is not ready, we call videoStatus again recursively until we get the affirmative response. When we receive that ‘playable’ is true (as in the example above), the function can then query for the MP4 url, and return the view to the user: return res.render(‘video’, {iframe, player, uploadSeconds,processSeconds});

This means that video.pug will be displayed to the end user with some variables (the urls of the video, and timings on upload and processing). We’ll discuss that view in the next section.

### Displaying the Video

The Video.pug file is a simple html file that simply adds an iframe for the video, and reports the elapsed times for upload and processing of the video. The variables are ensconced in #{} tags. One other interesting thing to note is adding #autoplay to the url tells the video player to autoplay the video (you can also add #loop to loop the video).

And there we have it, a working video upload tool, where the response page shows the encoded video, along with the time for upload and for processing! Pretty cool!



webpage-video-upload-screenshot.jpg

### Optional Step: Email integration

In the video upload response section, there is a line of code that calls the intercom integration:

We first create a lead (or a contact) inside Intercom. This will come back with an id that uniquely IDs the user. If the email address already exists, Intercom returns an error message that says “There is already a user with the id=<idnumber>.” So, if the user already exists, we can parse the error message to grab the user id.

Then we can add a tag to Intercom to show that the user has used the video upload tool, and we send an email to the user’s email address with links to the videos, and the time it took to upload and process the videos. The text of the email is right in the code, so easy to modify.


### Update (2022)
	
We have a new version of a video uploader that uses a delegated token. It is live at [upload.a.video](https://upload.a.video), and you can read a post on [delegated token upload](https://api.video/blog/tutorials/uploading-large-files-with-javascript/). Delegated tokens remove the "double upload" to Node and then to api.video: videos are directly uploaded to api.video.
	
	
### Conclusion

We’ve built a video uploader using Node.js and api.video. The easy to build tool now gives us the ability to easily share our videos across our internet properties. Using Node and api.video, the entire process creates an easy to use interface to take regular videos, and convert them into video streams. If this tutorial has inspired you (or if you have any questions), let us know by posting in our [community forum](https://community.api.video/). 

Building a video upload demo with Node.js and api.video

medium_githubsocialnodejs.png

small_githubsocialnodejs.png

thumbnail_githubsocialnodejs.png

github-social-nodejs.png

api.video Strapi Plugin: Add videos to your headless CMS.

Announcements

small_cedric.webp

thumbnail_cedric.webp

cedric.webp

Cédric Montet

Company News

AI, models, assistants, agents and prompts sound and look magical on social networks. But from the countless conversations we have had with startups and Enterprise customers over the last months, we have realized that the gap between existing video workflow and concrete use cases is real.

&nbsp;

Whether it’s getting transcripts in seconds, changing the language of your video or being able to search for items in your content – the benefits, value or potential savings you see and can get with AI are obvious.

&nbsp;

This is why we are thrilled to unveil how we are bringing AI into video, where we are heading and how you can get more value from it!

## What does the future of video streaming look like?

AI will completely upend video consumption as we know it today. We envision a world where video is not a content piece anymore which you can only start and stop – because AI will make videos discoverable and universally understandable. More than ever it resonates fully with our core mission – connecting people through their cameras.

&nbsp;

Since Day 1, we are building api.video to make your use cases, first, a reality and, then, a success.

&nbsp;

Back in the days, the fragmented video streaming market, the number of services you had to aggregate, the lack of innovation by the incumbents was preventing you from joining our video-first world, while your efforts and budgets were consumed by maintaining mashups instead of focusing on what matters. 

&nbsp;

This is why we have built the video backbone and seeing that, now, you host 2.5 millions videos on api.video and deliver dozens of millions videos every month demonstrate why simplicity, exceptional performances and an E2E approach were key.


&nbsp;

What’s happening today with AI, the efforts it requires to benchmark, setup and customize LLMs, to run and maintain them, the Infrastructure you have to build to execute them before getting any value, remind us of the state of the streaming market when we had launched api.video.

&nbsp;

Helping you to benefit from the AI revolution by abstracting all the underlying complexity became obvious and a natural next step in our evolution.

&nbsp;

To get there and to bring you there, here is what we are building, api.video’s very first – **Video Model Hub**.

&nbsp;

Let’s start with the root principles encompassing our work on this Hub:

&nbsp;

- **Open-source models over private ones.** We are long time believers and contributors of the open source community and we have chosen to run only models that are available publicly.

- **Your data is… your data.** You already trust us to host and deliver sensitive content,and this is exactly why we won’t train our own models or sell the data generated from your videos to anyone.

- **Privacy at the core.** We host and execute the models inside our own infrastructure. Your data remains inside the api.video infrastructure. Your videos or data is not sent to external partner, SaaS providers like OpenAI, or others.

- **We believe that every organization will eventually build their own models to leverage their unique data sets**. Next year, alongside the ability to run public and open source models on api.video, we will offer you the ability to host your own.

- **One API to rule them all.** As we have already replaced a dozen of services and vendors under GET/videos to make your videos available worldwide in seconds, we are abstracting all the complex work of executing LLMs behind clear and straightforward endpoints.

&nbsp;

At a glance, api.video brings to you today the power of AI by:

- Leveraging its years of experience in video management and building infrastructure, with GPUs.
- Combining with the most advanced LLMs available on the market.

so that you get more value from your videos in a few lines of code!

&nbsp;

## Here are the first three new features from the Video Model Hub

### 1. Summarization of long-form videos

Upload a video in English, Spanish, French, Portuguese or Chinese and get a text summary of 120 characters with the 3 key takeaways discussed in the video (within seconds!). Ideal to index or preview long form recorded meetings or courses!

&nbsp;

_The video below gives you a glimpse into AI summarization._


### 2. Transcription of your video in seconds

Get a transcript (in .VTTformat) from your uploaded video with the timecodes and offer the captions to your audiences. The best part? The api.video player supports VTT files so there’s nothing new that you need to build on your side!
This also makes your content more inclusive by making it accessible to people with hearing impairments. 


### 3. Translation of subtitles in 5 different languages (and more to come!)

Is your video in English? You can get Spanish and French subtitles. In Chinese? You will get English subtitles and three more languages. In short, this is the perfect solution to spread your message to your international audience!

&nbsp;

_Check out the video below for a glimpse into AI translation._ 


_Try it for yourself now by uploading a video in your [sandbox account](https://dashboard.api.video/overview)._ 

## What’s next

From video classification, alteration, generation, audio alteration, metadata generation, we have identified and plan to implement more than 200 additional use cases and features within the upcoming months!

&nbsp;

From next year, we will let you bring your own models on the infrastructure to get even better and more personalized outcomes.

&nbsp;

This is a long-journey and we’re only getting started. The whole team is thrilled to be at the forefront of this next chapter!


Video on demand

Live streaming

Analytics

Video infrastructure

Video player

AI features

See all features

Online learning & Corporate training

Social & Entertainment

Marketplace & E-commerce

Communication & UGC

Generative AI

Quickstart guides

Documentation

Ecosystem catalog

Clients & SDKs

Community

Blog

Demos

Customer success stories

Help center

Api video plugin