Normal

small_olivier.png

thumbnail_olivier.png

olivier.png

Olivier Lando

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

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

large_plugin-installation-from-directory.jpg

medium_plugin-installation-from-directory.jpg

small_plugin-installation-from-directory.jpg

thumbnail_plugin-installation-from-directory.jpg

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

large_plugin-installation-api-key.jpg

medium_plugin-installation-api-key.jpg

small_plugin-installation-api-key.jpg

thumbnail_plugin-installation-api-key.jpg

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.

large_plugin-add-new-video.jpg

medium_plugin-add-new-video.jpg

small_plugin-add-new-video.jpg

thumbnail_plugin-add-new-video.jpg

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.

large_plugin-videos-list.jpg

medium_plugin-videos-list.jpg

small_plugin-videos-list.jpg

thumbnail_plugin-videos-list.jpg

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.

large_plugin-edit-video.jpg

medium_plugin-edit-video.jpg

small_plugin-edit-video.jpg

thumbnail_plugin-edit-video.jpg

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. 

large_plugin-shortcode.jpg

medium_plugin-shortcode.jpg

small_plugin-shortcode.jpg

thumbnail_plugin-shortcode.jpg

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

large_plugin-shortcode-paste.jpg

medium_plugin-shortcode-paste.jpg

small_plugin-shortcode-paste.jpg

thumbnail_plugin-shortcode-paste.jpg

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

large_plugin-shortcode-columns.jpg

medium_plugin-shortcode-columns.jpg

small_plugin-shortcode-columns.jpg

thumbnail_plugin-shortcode-columns.jpg

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

large_plugin-player.jpg

medium_plugin-player.jpg

small_plugin-player.jpg

thumbnail_plugin-player.jpg

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

thumbnail_anne-sophie.jpg

anne-sophie.jpg

twitter-brands.svg

Twitter (Anne-Sophie)

Anne-Sophie Poupard

We're excited to announce the launch of a highly requested feature: **Workspaces**.

Anyone can now share their [api.video dashboard](https://dashboard.api.video/login) with a colleague or client. It's a great way to involve stakeholders in your projects.
Workspaces enable the primary account owner to invite unlimited team members to their dashboard securely, so they can help with video integration or add video content.

The new feature will allow multiple users to share videos and collaborate under the same roof, with a unique API key and unique billing.

small_unlimited-members-workspace.png

thumbnail_unlimited-members-workspace.png

unlimited-members-workspace.png

> Just tried it out and sent a bunch of invites to my coworkers! We're all very excited about this feature. Thank you for being so attentive to our needs.

Michael, Senior Software Engineer from TractApp

## Why would I want to share my api.video dashboard?

### Manage different clients
You are an agency, and you need a separate api.video accounts to facilitate usage and billing management.

You can set up a different Workspace for each client as an account holder.
To do so, create a new workspace, give it a name, and add billing information.

thumbnail_create_new_workspace.png

create_new_workspace.png

### Integrate video in my app, website, or software

You need to integrate on-demand video or live stream into your app or software. By inviting your dev team to your Workspace, they will access the API key and all features included in your plan. 

You can easily give team members access to your Workspace. This is helpful if you typically have more than one person working with you on video content and development.

## Owners vs. Members

'Owner'status is automatically assigned to the user who created the organization. All new invited users are ‘Members.’

Owners and members have the same access rights. The owner cannot be removed from the Workspace. However, the owner can transfer his Workspace to another member.

Once you’ve invited a user to your Workspace, they can edit any video content and access the API key. Invitees will only have access to the Workspace from where the invite was sent. If you would like a user to have access to different workspaces, you will need to invite them to each one. 

As an account holder, you have access to everything except team members’ personal Workspaces.


## Receiving invoice emails

The workspace Admin will receive an invoice email monthly.


Have questions about Workspaces? Contact us on the chat or [our Community](https://community.api.video/).
The Workspace feature is the beginning; stay tuned! 

Introducing Workspaces

large_api-video-workspace-feature.png

medium_api-video-workspace-feature.png

small_api-video-workspace-feature.png

thumbnail_api-video-workspace-feature.png

api-video-workspace-feature.png

large_api-video-blog-no-code.png

medium_api-video-blog-no-code.png

small_api-video-blog-no-code.png

thumbnail_api-video-blog-no-code.png

api-video-blog-no-code.png

No-code

no code

We've just released a brand new [api.video plugin](https://bubble.io/plugin/apivideo-1632390165248x133502315345739780) on the Bubble.io marketplace. This plugin allows you to use the main features of api.video in your web application (video upload / video player / API calls) without having to write a single line of code.

For those who do not know Bubble.io yet, it is a no-code tool that allows you to build SaaS platforms, marketplaces and CRMs without code.

In this tutorial, we will show you the main features of the api.video plugin, taking as an example the creation of a video sharing site (similar to YouTube, but much... much more rudimentary). This will allow us to discover some of the features offered by our Bubble.io plugin, namely:

* the video uploader element
* the video player element
* the API calls

The result can be seen here: [Bubble demo application](https://api-video-tube.bubbleapps.io/version-test/).

The purpose of this article isn't to describe the api.video plugin in detail, but you can find the full documentation here: [Bubble.io plugin documentation](https://docs.api.video/sdks/nocode/bubbleio-plugin).

## The demo application

Our application is composed of the following pages:

* a home page (public) - the home page contains a thumbnail of each video that has been uploaded on the website
* a video page (public) - it contains a player to watch a specific video (when a user clicks on a video title on the home page, he will arrive here)
* a login / sign up page (public)
* an upload page (logged in users only) - logged in users are able to upload a new video from this page
* an account page (logged in users only) - logged in users are able to manage their videos here

## Database schema

Our Bubble database is composed of only 2 data types: `User` & `Video`. Each video is associated with a `User` entry (the person who uploaded the video).

Here are the schemas of the 2 data types:

### User



large_userschema.png

medium_userschema.png

small_userschema.png

thumbnail_userschema.png

userschema.png

large_videoschema.png

medium_videoschema.png

small_videoschema.png

thumbnail_videoschema.png

videoschema.png

**Here is what it looks like in the Bubble interface:**

large_database.png

medium_database.png

small_database.png

thumbnail_database.png

database.png

## Installation of the api.video plugin

To begin with, we need to add the api.video plugin in the Bubble.io application. You can find the details in our documentation: [api.video Bubble.io plugin](https://docs.api.video/sdks/nocode/bubbleio-plugin). 

## Pages

### Login / sign up page

The login / sign up page consists of two forms: one to register and a second one to log in. By default the login form is hidden. It shows up when the "login" button is clicked. 

#### Sign up form

The sign up form is a standard form with a "Sign up" button and 3 input fields: Email, Password & Password confirmation. When the "Sign up" button is clicked, the user is registered using the standard "sign up" Bubble workflow action. 

At this time, we generate a [delegated upload token](https://api.video/blog/tutorials/delegated-uploads/) from [api.video](https://api.video). This token will be used later, every time the user wants to upload a new video. 

In order to generate the token, we use the `+ Change another field` button in the Bubble action pop-up. As a source for the value, we use `Data from an external API` and select `authenticate - generate upload token`. 

medium_workflow-sign-up-upload-token.png

small_workflow-sign-up-upload-token.png

thumbnail_workflow-sign-up-upload-token.png

workflow-sign-up-upload-token.png

#### Login form

The login form consists of a "Login" button and 2 input fields: Email & Password. When the "Login" button is clicked, the user will be logged in using the *had oc* Bubble action:


small_workflow-login.png

thumbnail_workflow-login.png

workflow-login.png

### Upload page

The upload page will contain
*  two text inputs: "Title" and "Description" 
*  a "Select a video file" button that opens a pop-up to select the video file to upload 
*  a progress bar 
*  a submit button

#### The api.video uploader element

The "Select a video file" button is not a standard button but an api.video uploader element. For more details about this element you can read the documentation here: [Bubble.io uploader element
](https://docs.api.video/sdks/nocode/bubbleio-uploader). The purpose of the uploader element is to offer users of your web application the ability to easily upload videos to api.video.

The element needs one setting: the delegated upload token to use. It will use the one that has been associated with the user when they signed up. To do so, in the "upload token" parameter of the element, we've entered `Current user's upload token`. We've also applied some style to the element to make it fit with the design of our site. 

#### Progress bar

To display the upload progress bar a SimpleProgressBar element is used. Its "Percentage" value is associated with the "percent" value of the video uploader element. 

#### Workflow actions

There are five workflows defined for this page:

large_workflows-upload-page.png

medium_workflows-upload-page.png

small_workflows-upload-page.png

thumbnail_workflows-upload-page.png

workflows-upload-page.png

*  When the user arrives on the page, if they are not logged in, they are redirected to the login page 
*  When the "Title" input becomes not empty and if the video uploader element's `file_selected` value is true (meaning that the user has already selected a video file), then the "Upload" button is shown.
*  Reciprocally, when the `file_selected` becomes true and if the "Title" input field isn't empty, then the "Upload" button is shown.
*  When the "Upload" button is clicked, the "upload" action of the video uploader element is triggered. Also, the form inputs are hidden and the progress bar is shown. 
*  When the "end" event of the video uploader element is triggered, a new Video element is created in the Database. The following attributes are set:
*    videoId: the value of the videoId attribute of the uploader element (this is the id of the new video that has been returned by api.video)
*    user: the current user
*    title: the value of the "Title" input field
*    description: the value of the "Description" input field

### Home page

The home page is pretty basic. It will display a preview of all the videos that have been uploaded by any user of the application. It will look like this:


large_homepage.png

medium_homepage.png

small_homepage.png

thumbnail_homepage.png

homepage.png

#### The repeating group

A [Repeating group](https://manual.bubble.io/core-resources/elements/containers#repeating-group) is used to iterate over all the Video entries stored in the database. 

The datasource query of the repeating group is simple: `Search for videos`. A "Sort by" constraint has been added on the `Created date`field with "Descending" = `false` in order to have the latest videos displayed at the top of the page. 


large_homepage-repeating-group.png

medium_homepage-repeating-group.png

small_homepage-repeating-group.png

thumbnail_homepage-repeating-group.png

homepage-repeating-group.png

#### Repeating group elements: the api.video player element

In each entry of the repeating group, an api.video videoplayer element is used to display a preview of the video. To make the player look like a preview, the following settings are applied:


large_homepage-player-settings.png

medium_homepage-player-settings.png

small_homepage-player-settings.png

thumbnail_homepage-player-settings.png

homepage-player-settings.png

*  `autoplay` is false: we don't want all the players to automatically start when the home page appears
*  `hideControls` and `hideTitle` are true: the players are very small here, we only want to see the video 

Two workflows are also used to handle the video previews. They are respectively triggered when the video player element sends mouseenter and mouseleave events. When the mouse enters the player area, the video playback is launched thanks to the play action of the player element. On the contrary, when the mouse leaves the player area, the pause action is used to stop the playback.

Under the player element, the following details of the video are displayed:

* the title
* the views
* the author's email

The title is a link that redirects the user to the video page of that video.

 

### Video page

Users land on this page after a click on a video preview from the home page. The page layout consists of a large video player, plus some details about the video:

large_video-page.png

medium_video-page.png

small_video-page.png

thumbnail_video-page.png

video-page.png

The same video player element as on the home page is used. The only difference is that when the player element triggers a first play event, a workflow action increments the `views` value of the video in the database. 


### Account page

The Account page has almost the same layout as the home page. It consists of a repeating groups iterating on videos. The main difference here is that the videos are filtered in order to only display the ones that have been uploaded by the current user. The other difference is that a "Delete" button is present next to each video. When clicked, the `delete` endpoint of the api.video API is called, and the video entry is deleted from the database:





large_delete-video.png

medium_delete-video.png

small_delete-video.png

thumbnail_delete-video.png

delete-video.png

## Conclusion 

In this step by step tutorial we have covered the process of building a video sharing application. In particular, we have looked at the following features of the api.video Bubble plugin: 

* the video uploader element
* the video player element
* the API calls

As always, we encourage you to join our [Community Forum](https://community.api.video/) and sign up to our newsletter (you will find the link below this post). 

Bubble.io + api.video: build YouTube-like site with no code

large_bubble_plugin.png

medium_bubble_plugin.png

small_bubble_plugin.png

thumbnail_bubble_plugin.png

bubble_plugin.png

Bubble.io + api.video: build a YouTube-like site with no code

API client

thumbnail_thibault_rond.png

thibault_rond.png

Thibault Beyou

Swift

[api.video](https://api.video) removes the complexity from streaming video. Our simple to use APIs allow you to focus on creating your content -- leave the video streaming details to us.

Few months ago, we announced our [Android API client](https://github.com/apivideo/api.video-android-client), we are now happy to announce the release of our [Swift API client](https://github.com/apivideo/api.video-swift-client) for iOS, macOS and tvOS. We are replacing the iOS SDK to simplify api.video usages and deployment of the new version. It also provides support for [api.video progressive upload](https://docs.api.video/vod/progressive-upload). We will focus on the progressive upload part in another blog articles.

The [Swift API client](https://github.com/apivideo/api.video-swift-client) comes with:
* [documentation](https://github.com/apivideo/api.video-swift-client#documentation
* [sample code](https://github.com/apivideo/api.video-swift-client/tree/main/Example).

This article is a walkthrough to upload a file with [Swift API client](https://github.com/apivideo/api.video-swift-client).

## Installation
### Cocoapods

1.  Add the following entry to your `Podfile`:

2. Then run `pod install`

3. Import ApiVideoClient in every file you’d like to use [Swift API client](https://github.com/apivideo/api.video-swift-client).

### Carthage

1.  Add the following entry to your `Cartfile`:

2. Then run `carthage update`

3. Import ApiVideoClient in every file you’d like to use [Swift API client](https://github.com/apivideo/api.video-swift-client).

## Swift API configuration

To use the Swift API client, you first have to import the `ApiVideoClient`.

`ApiVideoClient` class provides static fields and methods to configure the Swift API client. You can set your API key, your environment (sandbox or production), chunk size,...

Set your API key with:


If you want to target the sandbox environment:

## Create a video file

If you haven't create a video on api.video, you have to create a video entry on api.video platform with:

Description of the fields of `VideoCreationPayload` is provided [here](https://github.com/apivideo/api.video-swift-client/blob/main/docs/VideoCreationPayload.md).

## Upload a video file

To upload a file, you will have to get the `URL` of your file. You can get it from the image picker component. Have a look at our a [sample code](https://github.com/apivideo/api.video-swift-client/tree/main/Example).


If you want to draw a progress bar that displays the upload progress, there is a `onProgressReady: ((Progress) -> Void)` parameter to the `upload` method.

## Swift API client capabilities

The [Swift API client](https://github.com/apivideo/api.video-swift-client) provides methods to perform every possible actions on the [api.video](https://api.video) API such as list videos (with filters), delete video, add/remove captions,...
If you are not familiar with [api.video](https://api.video) API, you should have a look on [api.video documentation documentation](https://docs.api.video/reference). You will find the same concepts in the [Swift API client documentation](https://github.com/apivideo/api.video-swift-client#documentation). 

## Swift video uploader

If you want to develop an application that only uploads video files. You should have a look at the [Swift video uploader](https://github.com/apivideo/api.video-swift-uploader).

Don't hesitate to share your feedback on [our community](https://community.api.video/). Happy building!

Video on demand

Live streaming

Analytics

Video infrastructure

Video player

See all features

Online learning

Short-form videos

Marketplace & E-commerce

Video messaging and recording

Quickstart guides

Documentation

Ecosystem catalog

Clients & SDKs

Community

Blog

Demos

Help center

Blog

Huge pricing update! Introducing video encoding at zero cost