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

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](http://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](http://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](http://api.video) features!

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

[api.video](http://api.video) proposes many more endpoints to manage and create a complete video application.
Check [our documentation](https://docs.api.video/docs) 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](http://api.video) dashboard [API keys section](https://dashboard.api.video/apikeys) 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

screenshot-2023-01-31-at-17-24-04.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).

large_02fev23.png

medium_02fev23.png

small_02fev23.png

thumbnail_02fev23.png

02fev23.png

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

large_20190712_201317.jpg

medium_20190712_201317.jpg

small_20190712_201317.jpg

thumbnail_20190712_201317.jpg

20190712_201317.jpg

Neda Ashrafi Amiri

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](http://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/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://api.video/contact) 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/docs/apivideo-api-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 💫

api video ecosystem plugins no-code tools

large_24jan23.png

medium_24jan23.png

small_24jan23.png

thumbnail_24jan23.png

24jan23.png

Our ecosystem: connect api.video with your product 🔌

strapi

thumbnail_mathieu_round-1.png

mathieu_round-1.png

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](http://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/developer-docs/latest/getting-started/quick-start.html). 

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](http://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/docs)** and **[sign up for a free account](https://dashboard.api.video/register).**

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

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

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.

Api video plugin

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

Our ecosystem: connect api.video with your product 🔌

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