Player SDK

Player

Player update

Normal

thumbnail_thibault_rond.png

thibault_rond.png

Thibault Beyou

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

Dart

Building a mobile application with video functions? Let’s dive into why api.video is the right choice for this task.

&nbsp;

api.video encodes your videos, hosts them securely, and enables you to stream on any device or platform for you. You only need to build your mobile application, with your own branding.

&nbsp;

We value developer experience and the time spent on developing your mobile application, so we provide you with the tools we’d also choose to integrate video in a mobile application. We’ve developed several SDKs for you to use in order to take control of the video player in your mobile app.

&nbsp;

Check out these plaftorms:

- [Flutter](https://github.com/apivideo/api.video-flutter-player) player for Android, iOS, and Web
- [ReactNative](https://github.com/apivideo/api.video-reactnative-player) player Android and iOS
- [Android and Jetpack Compose](https://github.com/apivideo/api.video-android-player)
- [Swift](https://github.com/apivideo/api.video-swift-player) player for iOS

&nbsp;

With these player SDKs, you can integrate videos that you host on api.video into your mobile application in just a few minutes.

&nbsp;

The api.video mobile player SDKs support both VOD and live streaming, private videos, and player notifications. They also handle the dirty work for you:
- take the [video ID](https://docs.api.video/vod/video-object#video-id) as input
- generate analytics events for [api.video analytics](https://api.video/product/video-analytics/)
- play back HLS using the best quality that fits actual network conditions
- fall back to MP4 when there is an issue with HLS

&nbsp;

Every api.video player SDK comes with a sample application. Check out the [documentation](https://docs.api.video/sdks/player#mobile) and look for the `example` directory in each SDK’s repository.

&nbsp;

The [api.video players](https://api.video/product/player/) are open source. Feel free to fork and modify them as you want! We are happy to review your pull requests!

## Usage

To use api.video players, you need the [video ID](https://docs.api.video/vod/video-object#video-id) of video you want to serve. You can retrieve a video ID via the [API](https://docs.api.video/reference/api/Videos) or from the [dashboard](https://dashboard.api.video). 

&nbsp;

In a typical use case, you should follow this workflow:
1. Add the player package to your project
2. Create a `VideoOptions` instance with the video ID of the video you want to serve 
3. Create a player controller and pass it the `VideoOptions` instance
4. Create the player view and pass the player controller to the player view.

&nbsp;

Check out this example for **Flutter**:

&nbsp;

Run this in your command line:

Check out the [Flutter player SDK documentation](https://docs.api.video/sdks/player/apivideo-flutter-player) for a detailed explanation.

## Quickstarts

To get you started, we created quickstart articles that can help you integrate the api.video player SDK in just a couple of minutes:

- **Flutter**: [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/)

- **Android**: [How to add an api.video player to your Android application](https://api.video/blog/tutorials/how-to-add-an-api-video-player-to-your-android-application/)

- **Swift (iOS)**: [How to add an api.video Swift player to your iOS application](https://api.video/blog/tutorials/how-to-add-an-api-video-swift-player-to-your-ios-application/)

## Customization

Customizing the look & feel of the player is important to maintain your own branding in your application. The api.video player SDKs enable you to customize the UI of the player. You have the possibility to configure the color of the progress bar, the color of the play button, and many more items.

&nbsp;

If you think a customization option is missing, let us know in the `Issues` section of the player SDK’s GitHub repository.

## Using custom players

Even though we recommend using the api.video player SDKs when working with api.video’s solutions, you can use other players in your application.

&nbsp;

To support your decision even if you go with another player solution, we provide extensions for your mobile player to read and serve videos hosted with api.video through the [video ID](https://docs.api.video/vod/video-object#video-id)s.

- **Android**: [Switch your existing Android player to api.video](https://api.video/blog/tutorials/switch-your-existing-android-player-to-api-video/)

- **iOS**: [Switch your existing Swift player to api.video](https://api.video/blog/tutorials/switch-your-existing-swift-player-to-api-video/)

&nbsp;

To enable you to collect usage data even from the custom player of your choice, we created analytics libraries for Android and iOS that you can integrate into your application.

- **Android**: https://github.com/apivideo/api.video-android-player-analytics
- **iOS:** https://github.com/apivideo/api.video-swift-player-analytics

&nbsp;

We can recommend these players in case you decide not to use the api.video player SDKs:
- Flutter: `chewie` and `video_player`
- Android: `ExoPlayer`
- iOS: `AVPlayer`

&nbsp;

_Need help, or have questions? Join the [api.video community](https://community.api.video/) and start a discussion. Or simply create a sandbox account on [api.video](https://dashboard.api.video/register) and check out the features for yourself._

Enhance viewer experience in your mobile apps with api.video's player SDKs

large_Blog_MobilePlayer.png

medium_Blog_MobilePlayer.png

small_Blog_MobilePlayer.png

thumbnail_Blog_MobilePlayer.png

Blog_MobilePlayer.png

doug.jpg

Doug Twitter

Doug Sillars

api-video-blog-product-updates.png

Product updates

api.video makes the delivery of streaming video easy. Just use our API to upload a video, and we handle all of the transcoding, storage and video delivery for you.  All you need to do is add the url (or iframe) to your site or app, and we handle the rest - ensuring fast, easy video delivery to all of your users.

The url (or iframe) from api.video that you add to your site contains a customisable video player full of great features. Today, we are announcing the release of our new video player with more incredible features to wow your customers.

&nbsp;


**<iframe src="https://embed.api.video/vod/viTLpKB231ATWOWjkHgi9bf" width = "800" height ="600" allowfullscreen></iframe>**

&nbsp;


A video describing the new api.video player, inside the new [api.video player](https://api.video/product/player/)!

Our new player is completely rewritten from the ground up, built on top of the video.js architecture. So, what that does this mean for you? For existing api.video users - all your videos have been automatically upgraded to the new player, and all future videos will automatically use the player as well!
New Features
In addition to the new sleek look of the player, there are a lot of new features that we would like to share with you.

## Captions and chapters  

[Captions](https://docs.api.video/reference/api/Captions) and [Chapters](https://docs.api.video/reference/api/Chapters) were supported in the last player, and continue to be supported by the api.video player.

## Chromecast

If there is a Chromecast on the same network as the device playing the video, a “cast” button will appear, so you can send to the larger screen.

## Picture in picture
Pop the video out of your browser, and keep watching, even when you visit different pages - or even different screens!  The video follows along so you can keep tabs of what is going on!

## Responsiveness

One unique feature in Video.js is that the player automatically delivers the appropriate stream based on both the network bandwidth available AND based on the size of the video viewport.  If you are watching a video on a small screen, or small window in the page, api.video only sends the largest appropriate size video to the screen - ensuring the highest quality,  without sending extra data to your customers (that they cannot consume).

## Video playback speed
For longer videos, some viewers may wish to watch at a slightly faster rate. The speed button in the bottom right allows you to watch as much as 2x faster than the original recording.

## Video rewind and fast forward
Surrounding the video speed option are rewind and fast forward buttons.  The rewind backs up the video 10 seconds, and the fast forward moves the video ahead 20 seconds.  This is great when you miss a scene or critical bit of content, and want to quickly seek around in the video.

But, that is not the coolest part of the rewind and fast forward.  

## Live DVR
Yes! The rewind works on a live stream!  If you are watching a live stream on api.video and miss a word, or want to review a slide - you can rewind and pause the video.  Then press play, and increase the playback speed to zip back to the “live” coverage!

We are really excited to share these great new features with you, and can’t wait to see what cool videos and ways you might implement these features to better display your content.  Please let us know what you think about the new video player in our **developer forum**: [community.api.video](https://community.api.video)  

&nbsp;

_To start using api.video for your videos, [sign-up](https://dashboard.api.video/register) for a free sandbox account now._

Announcing our new video player

large_1595521905-player.png

medium_1595521905-player.png

small_1595521905-player.png

thumbnail_1595521905-player.png

intro-api-video-player.png

swift

api-video-romain-petit.png

Romain Petit

api-video-blog-tutorials.png

Tutorials

Swift

We have now released the Swift player! The Swift player helps you to playback your videos easily in your iOS and iPadOS applications.

In this tutorial we will see how to add the Swift player to your code.

The [Swift player package](https://github.com/apivideo/api.video-swift-player) allows you to use UIKit and SwiftUI to handle multi-platform projects.
The Swift player package is available on both Cocoapods and Swift Package Manager (SPM).

Before starting with this tutorial, make sure that you set your minimum target to iOS 13 and above.

To just give you a quick preview, we are going to create a Swift application with an api.video player that looks like this:

swift-player-video-api.png

## Upload video

Before starting to add the api.video Swift player to your application, you need to upload at least one video to your api.video account. If you haven't yet, see [how to upload a video](https://docs.api.video/vod/upload-a-video-regular-upload).

You'll need a video Id to use this component and play a video from api.video. To get yours, follow these steps:

1. [Log into your account](https://dashboard.api.video/login) or create one [here](https://dashboard.api.video/register).
2. Copy your API key (sandbox or production if you are subscribed to one of our [plans](https://api.video/pricing/)).
3. Go to the official [api.video documentation](https://docs.api.video/).
4. Log into your account in the top right corner. If it's already done, make sure that it's the account you want to use.
5. Go to *API Reference* -> *Videos* -> *[List all videos](https://docs.api.video/reference/api/Videos#list-all-video-objects)*
6. On the right, be sure the *Authentication* section contains the API key you want to use.
7. Generate your upload token by clicking the *Try It!* button in the right section
8. Copy the *videoId* value of one of elements of the response in the right section.

Alternatively, you can find your video Id in the video details of your [dashboard](https://dashboard.api.video/).

## Add the api.video Swift player

In this section, we will go through the three main steps of adding the [api.video](https://api.video/) Swift player to your iOS application.

1. Get the latest version
    
    You can find it in the [release page](https://github.com/apivideo/api.video-swift-player/releases)
    
2. Add the `ApiVideoPlayer` package to your app with:
    1. SPM
        
        Add the following to your package.swift

2. Cocoapods
    
    add the following to your Podfile

Replace X.X.X with the latest version.

3. UIKit
    
    a. Import the package

(!) Replace “YOUR_VIDEO_ID” by your own videoId to display video

(!) Replace “YOUR_PRIVATE_TOKEN” by the private token of the video to display it.

c. To get all player events (optional)

d. Implement the player view in your view controller and add constraints.

4. SwiftUI
    
    a. Import the `ApiVideoPlayer` package

b. In your view you have to instantiate the player and the player events in the init method

(!) Replace “YOUR_VIDEO_ID” by your own videoId to display video

If you want to play private videos:

c. In the body you have to add the player with the specification you want

You will be able to use all the methods available externally, by calling player.methodName, for example :

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

How to add an api.video Swift player to your iOS application

large_api-video-swift-player.png

medium_api-video-swift-player.png

small_api-video-swift-player.png

thumbnail_api-video-swift-player.png

api-video-swift-player.png

video api

img_8063-min-1.jpg

GitHub Yohann

LinkedIn Yohann

Yohann Martzolff

Flutter

Flutter has a strength that only a handful of frameworks have: the power to build a multi-platform application with a single codebase. 

What if you need to display some videos in your new or future worldwide famous app? At the time I write this article, it’s fair to say that there aren’t many video players available for Flutter out there. Here comes our solution at [api.video](https://api.video)!

api-video-player-screenshot.png

## A single video player for all platforms

If you’re new to Flutter or cross-platform development, welcome to this wonderful, fast, and simple world! No more separate logics or codebase to create an application that works across multiple platforms. Better yet, no need to have multiple developers working to create different applications for various operating systems. Create an application once, and use it everywhere!

The api.video player for [Flutter](https://pub.dev/packages/apivideo_player) is built natively for Android, iOS, and web and can be implemented on these three platforms easily. All you need is a computer and an [api.video](https://dashboard.api.video/register) account.

Continue reading this article for a full tutorial 👀

## Upload a video to display it

In order to display a video, you need to first upload it! To upload a video, [login](https://dashboard.api.video/login) to your api.video account or if you are not registered already, you can easily [create an account](https://dashboard.api.video/register) for free.

Once you reach the dashboard, check if you have previously uploaded any videos, and if not, no worries! You can easily upload a video by clicking the “Create Video Object” button on the overview and follow the steps on the dashboard. 

💡 You can also upload videos to your workspace with one of our [SDKs](https://docs.api.video/reference/api/Videos#upload-a-video)

upload-video-api-video.png

## Add the api.video player to your application on Flutter

If you’re new to Flutter, or if you don’t already have a Flutter app running, [please follow the official guide](https://docs.flutter.dev/get-started/install).

Once your application is running, add the api.video player package to you Flutter.

### Option 1

Run the following command at the root of your project:

### Option 2

Modify your project’s `pubspec.yaml` file:

## For iOS usage

This package only works on iOS 13 and above. Please update your `ios/Podfile` platform property as follows, or update the iOS version in xCode.

## Display your first video

You can display your first video by following the easy steps below 👇

### 1. Import the package

Add the following line at the top of the file where you want to use the api.video player:

### 2. Create a new video player controller

You need to first instantiate a `ApiVideoPlayerController` to be able to use the video player widget.

To instantiate the `ApiVideoPlayerController`, you will need an api.video video id. Find the video id in the api.video dashboard by clicking on one of your videos found under the section called [videos](https://dashboard.api.video/videos).

Create a new widget or modify an existing one like this:

Run your application on the device of your choice and a simple line of text should appear on your application.

## 3. Create a new video player

Now that you have a functional `ApiVideoPlayerController`, you can create a new `ApiVideoPlayer` and associate your controller to the player.

Modify your widget by replacing the `Text` widget with an `ApiVideoPlayer` one:

`ApiVideoPlayer` comes with a parameter `fit` or type `BoxFit` to set how it will behave in its parent widget.

### 4. Make it yours!

You can customize your brand new video player the way you want by changing its colors and adding some event listeners.

## Add some event listeners

There are two ways to add an event listener to your video player controller:

1. When you instantiate the player controller

2. After the player controller has been initialized.

The following sample code shows you how to add an `onPlay` event listener on `ApiVideoPlayerController` instantiation and an `onPause` event listener after the controller has been initialized in the `initState` method.

Modify your code like this to test these two event listeners:

## Customize the theme of your player

You can change your video player’s style by attributing a `PlayerStyle` class to the `style` parameter of your `ApiVideoPlayer` widget:

## Go further

You can access and control the video player features such as the play button, reverse, or forward features from outside of the player. 

Let’s see how we can retrieve the video’s information and control our video player from elsewhere.

### Retrieve the video’s information

The `ApiVideoPlayerController` gives you access to a lot of information about the current video: duration, current time, volume, and many more.

Let’s add a simple button to retrieve the current video duration.

Modify your widget as follows:

## Control the video from outside of the player

You can control the video player from outside of the player thanks to the controller methods.

For instance, we can add an icon button to mute and unmute the video on press.

Modify your widget as follows:

## Full documentation and example

Find the [full documentation](https://github.com/apivideo/api.video-flutter-player) and a [full sample app](https://github.com/apivideo/api.video-flutter-player/tree/main/example) in our GitHub repository. 

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 player for Flutter: playback videos on your apps

large_05dec22-copie-4.png

medium_05dec22-copie-4.png

small_05dec22-copie-4.png

thumbnail_05dec22-copie-4.png

api-video-player-for-flutter.png

small_api-video-romain-petit.png

thumbnail_api-video-romain-petit.png

large_api-video-blog-tutorials.png

medium_api-video-blog-tutorials.png

small_api-video-blog-tutorials.png

thumbnail_api-video-blog-tutorials.png

Have you already developed your own player, but find it challenging to switch to the [api.video player](https://api.video/product/player/)? We have a solution. In this tutorial, we will demonstrate how to play a video from api.video on your player.

## Before starting

Before you start, make sure that you have already uploaded at least one video to api.video. If you haven't done so yet, you can follow this [guide](https://docs.api.video/vod/upload-a-video-regular-upload) for assistance.

## Extensions

In this tutorial, we will discuss extensions. If you are not familiar with extensions, I will explain them briefly, but if you are, feel free to skip ahead. Extensions enable you to add custom functionality to a code without altering the original implementation. For example, let's say you have a struct named "Person" with "firstname" and "lastname" as properties. You can create an extension to retrieve their full name.  

&nbsp;

 ## Adding the api.video Swift player library

In this section, we will cover the two main steps involved in adding the api.video Swift player to your project:

1. Get the latest version by accessing it [here](https://github.com/apivideo/api.video-swift-player/releases).
2. Add the `ApiVideoPlayer` package to your app using one of the following methods:

    a. SPM:
	* In the Project Navigator, select your project.
	* Click on the "Package Dependencies" tab in the Project section.
	* Click the "+" button at the bottom.
	* Paste the URL below into the search bar in the top right.
	* Finally, click the "Add package" button.


  b. Cocoapods:
* Add the following to your Podfile.

## VideoOptions

Every video on api.video is assigned a unique identifier called the `videoId`, which can be found on the Dashboard or in the video list.

As you follow this tutorial, make sure to replace `YOUR_VIDEO_ID` with the actual `videoId` of your video.

If you are using private videos, it will be necessary to provide the private token as well.

A private token is an exclusive token that guarantees access to a specific private video, but it can be used only once.

## AVPlayer Extension

The api.video Swift Player provides an extension for playing new videos with AVPlayer:

If, for any reason, you encounter an error with the HLS stream, you can try again with an MP4 video.

To do this, you need to add an observer to your player and retry when the status fails:

Congrats, you did it; you can now play your video from [api.video](https://api.video) 🥳🥳🥳🥳

(!) To get info on failed mp4, feel free to add an else statement after the if 

## Explore more

With the Swift Player client, you are not limited to just replacing the `currentItem`.

It offers the flexibility to construct a player by using either UIKit or SwiftUI.

To explore this feature further, I suggest checking out this [article](https://api.video/blog/tutorials/how-to-add-an-api-video-swift-player-to-your-ios-application/) or the project on [GitHub](https://github.com/apivideo/api.video-swift-player).  

&nbsp;

_To start using api.video and see how all this works, [sign up](https://dashboard.api.video/register) for a free sandbox account now._

Switch your existing Swift player to api.video

small_Frame 39563.jpg

thumbnail_Frame 39563.jpg

switch-existing-swift-player-to-api-video.jpg

If you've developed an existing Android application with a video player, you may be looking for ways to enhance the video playback experience for your users. One solution to consider is using [api.video player](https://api.video/product/player/): customizable design, advanced playback features, and easy integration.

This tutorial will demonstrate how to easily use your player to play video from api.video.

Let’s go! ▶️

## Before getting started

To help you migrate your video content to api.video, we’ve built a tool that allows you to quickly and easily import your videos from another provider (e.g. Dropbox or Vimeo) to your api.video dashboard. All you need is an API key and the provider’s access token. You can [get started with a few clicks](https://import.api.video/).

## Extensions

In this tutorial, we will often talk about extensions. If you are not familiar with the concept of extensions, let me explain: it is a way to extend a class or an interface with new functionality. And… it is a kind of magic 🪄 

Here is a quick example:

Then, you can use it as a regular property:

## Installation

In your module `build.gradle`, add

where `X.X.X` is the latest version of [api.video Android player](https://github.com/apivideo/api.video-android-player).

## Video Options

On api.video, each video is identified by a unique identifier called video Id. You can find the video Id in the dashboard or in the video list. In this tutorial, replace `YOUR_VIDEO_ID` with the video Id of your video.

To set an api.video video Id, you have to pass it through a `VideoOptions` instance:

If you are using private videos you will also have to pass the private token.

A private token is a unique token that can be used only once to access a specific private video.

Then, to simplify migration, we have made some specific extensions for 3 main Android players:

- ExoPlayer
- VideoView
- MediaPlayer

## Extensions for ExoPlayer

`ExoPlayer` provides 2 main ways to play a video on your `ExoPlayer` instance:

- `addMediaSource` or `addMediaItem`: adds the video to the playlist
- `setMediaSource` or `setMediaItem`: clears the playlist and adds the video

With the api.video Android player Exoplayer extensions, you can directly use these methods with a `VideoOptions` method.

## Extensions for VideoView

The api.video Android player provides extensions to play a new video with a VideoView:

## Extensions for MediaPlayer

The api.video Android player provides extensions to play a new video with a MediaPlayer:

## Private video

The extension will send a request for the private videos to get the token session. If this request fails, the error will be returned in the `onError` callback of the previous methods.

If you want to check that no error has happened, write:

## Conclusion

Let’s go. Let’s play video from [api.video](https://api.video) from your own Android video player now 🎉🎉🎉🎉  

&nbsp;

_To start using api.video for your videos, [sign-up](https://dashboard.api.video/register) for a free sandbox account now._

Switch your existing Android player to api.video

large_switch_player.png

medium_switch_player.png

small_switch_player.png

thumbnail_switch_player.png

switch_player.png

small_capture-d-ecran-2023-03-16-a-16-15-48.png

thumbnail_capture-d-ecran-2023-03-16-a-16-15-48.png

large_img_8063-min-1.jpg

medium_img_8063-min-1.jpg

small_img_8063-min-1.jpg

thumbnail_img_8063-min-1.jpg

github-brands.svg

5a22d420c9a5a7-416105621512231968826.png

medium_screenshot-2022-12-05-at-10-56-04.png

small_screenshot-2022-12-05-at-10-56-04.png

thumbnail_screenshot-2022-12-05-at-10-56-04.png

large_Screenshot 2024-02-21 at 4.52.39 PM.png

medium_Screenshot 2024-02-21 at 4.52.39 PM.png

small_Screenshot 2024-02-21 at 4.52.39 PM.png

thumbnail_Screenshot 2024-02-21 at 4.52.39 PM.png

Android

Mobile

Private Videos

Kotlin

We have now released an [api.video](https://api.video/) player for Android. The api.video player helps you to include your videos in your Android applications very easily and quickly. In this tutorial, we are going to show how to add an api.video player to your Android application. It will only take 5 minutes. Let’s do this! 👊

Before starting this tutorial, you can upload a video to your api.video. If you haven’t yet, you can check [Upload your first video guide](https://docs.api.video/vod/upload-a-video-regular-upload), which will walk you through your first video upload. The video that you have uploaded to your api.video account will have an assigned `videoId`. In the following steps, we will call for your videoId using the `YOUR_VIDEO_ID` parameter.

To just give you a quick preview, we are going to create an Android application with an api.video player that looks like this:

## The api.video player for Android

The api.video Android player is available on GitHub and comes with an example application, and the artifact is hosted on Maven Central.

The minimum Android API version supported by the api.video Android player is 24. Make sure that you don’t have a `minSdk` version under 24.

The API is divided into 2 main components:

- **The player view:** This component displays the video and its controls: `ApiVideoExoPlayerView` class.
- **The player controller:** This component controls the video and its events: `ApiVideoPlayerController` class.

## Add api.video Android player to your project

If you don’t have an Android application yet, you need to create one before you go further. The [Build Your First Android App in Java](https://developer.android.com/codelabs/build-your-first-android-app#0) is a simple guide that will help you create your Android application. 

### Dependency

The first thing is to add the [api.video](https://api.video/) Android player to your project dependencies. In your application `build.gradle`, add your `dependencies` tag as shown below:

It’s always good to check out if a [new version](https://github.com/apivideo/api.video-android-player/releases) is available.

To have access to the view, I am going to use `ViewBinding` in this tutorial because it is elegant to use as it will be more user-friendly. Now we add the `android` tag:

### XML Layout

In your `Activity` layout, add a player view:

You might have some constraints to add depending on the parent layout.

With `ViewBinding`, we can access our `ApiVideoExoPlayerView` by using the following field:

### Implementation

The main part of the implementation is to create a player controller, but it depends on several other components.

To manipulate video from api.video, the `videoId` is wrapped in an object called `VideoOptions`:

Create a player controller in your `Activity`. For example, in the `onResume`:

Launch the application. You have successfully integrated the [api.video](https://api.video) Android player in your application! 🥳🥳🥳

### Video privacy setting

For more information on changing video privacy settings, see this [article](https://api.video/blog/product-updates/video-access-management-how-to-create-deliver-and-manage-private-videos-and-what/).

If your application requires the use of private videos, then pass your private token to the `VideoOptions`:

### Fullscreen

For the fullscreen button, you will have to develop the fullscreen behavior. The base principles are: 

* When full screen is activated, hide all surrounding views, menu,…, and lock the application in landscape mode.
* When the full screen is deactivated, display surrounding views and unlock the application orientation.

These behaviors must be implemented on the `onFullScreenModeChanged` of `ApiVideoExoPlayerView.Listener`:

In this quick tutorial, you learned about how to simply add an [api.video](https://api.video) player for your Android application. Now you know how to add the api.video player as a dependency, configure the XML layout, and implement the player controller. Moreover, you learned how to change your video privacy and how to set up a fullscreen behavior. 

You can successfully integrate the api.video Android player in your own application by following the steps in this tutorial. For an example of api.video Android player, see the [example](https://github.com/apivideo/api.video-android-player/tree/main/example) provided in the player repository.

If you miss any features, face any bugs, or come across any other issues, we will be happy to help you on our [GitHub issues](https://github.com/apivideo/api.video-android-player/issues) page.🤝

How to add an api.video player to your Android application

large_23nov22-1.png

medium_23nov22-1.png

small_23nov22-1.png

thumbnail_23nov22-1.png

How-to-add-api-video-player-to-your-android-app.png

video create

Video list

Video upload

thumbnail_mathieu_round-1.png

mathieu_round-1.png

Github Mathieu Thiry

linkedin_logo_initials.png

LinkedIn Mathieu Thiry

Mathieu Thiry

React

Typescript

Next.js

This tutorial will show how quick and straightforward it is to build a TikTok clone as a progressive web app (PWA) with [api.video](https://api.video/use-cases/short-form/) and Next.js. A PWA is a website that looks and behaves like a mobile app. It can have all the capabilities of a native mobile app, like design and functionality, and you can even install it on your phone!

TikTok’s core functionality is to create and share short-form content. So today, we will focus on these crucial features:
- **Get** videos with [@api.video-node.js-client](https://github.com/apivideo/api.video-nodejs-client) package
- **Display** videos with [@api.video/react-player](https://github.com/apivideo/api.video-react-player) package
- **Upload** videos with [@api.video-typescript-uploader](https://github.com/apivideo/api.video-typescript-uploader) package
    
Thanks to these 3 easy-to-use api.video tools, you will have everything you need to build a **smooth scrolling** TikTok feed. Let's start 🎬
    

*NB: You can see the demo [here](https://api-video-tiktok-demo.vercel.app) and the complete code [here](https://github.com/apivideo/tiktok_clone). We invite you to clone the project, insert your free-to-use API key from our Sandbox environment and start testing it with your videos!*

Screenshot TikTok demo on desktop screen size

large_cover_image_tiktok_clone.png

medium_cover_image_tiktok_clone.png

small_cover_image_tiktok_clone.png

thumbnail_cover_image_tiktok_clone.png

cover_image_tiktok_clone.png

## Quick Setup

As in this tutorial, we will focus on the core features. We provide two links on how to start the project easily: 

We created a dedicated [tutorial](https://github.com/apivideo/Next.js_Starters-) on building a **new Next.js application** using Create Next App and Typescript. Please follow these [instructions](https://github.com/apivideo/Next.js_Starters-) to get an up-to-date Next.js app.

1. Transform the Next.js app into a PWA with [next-pwa](https://www.npmjs.com/package/next-pwa). Complete all steps with this article [here](https://blog.avneesh.tech/how-to-create-a-pwa-with-nextjs).
2. Once inside our project, install api.video’s [Node.js client](https://github.com/apivideo/api.video-nodejs-client), [typescript video uploader](https://www.npmjs.com/package/@api.video/video-uploader), [react’s player SDK](https://www.npmjs.com/package/@api.video/react-player), and [swr](https://www.npmjs.com/package/swr) for data fetching.

## Get videos

## Back-end: **Create API routes with api.video/nodejs-client**

You can declare the API under the `pages/api` directory. When you declare a file or folder inside `pages/api`, it will generate an URL endpoint that matches `/api/<folder>/<file>`. We set our API key in an environment variable in the `.env.local` file for security.

Now create a `pages/api/videos/index.ts` file. Inside this file, add the following code:

We can get videos in just a few lines of code by applying the method `list`. Check more methods you can use with our *nodejs* client [here](https://github.com/apivideo/api.video-nodejs-client/blob/main/doc/api/VideosApi.md#list).

### Front-end: Client-side data fetching

**Initialize swr**

[useSWR](https://swr.vercel.app/docs/getting-started) is a React Hook library made by Vercel. It fetches data from an API or other external source, then saves that data in a cache and renders the data. We configure swr in `_app.tsx`.

The useSWR hook takes two parameters and returns data. It accepts the following:

- A `Key`: API URL we are calling.
- A `fetcher`: a function that returns the fetched data.

We call `useSWR` hook. Once we get the result, we store data in the state `videos`. Then, we  `map` videos around  `VideoComponent`, whose role is to display videos.

### How to create smooth scrolling

thumbnail_screenshot_mobile.png

tiktok-demo-screenshot-mobile.png

The app has a `height: 100vh`. It has 2 sections. The first one, the div `app__video`, is scrollable with a `height: calc(100%-50px)`, and the second one, the upload section, has a fixed `height: 50px`.

**CSS scroll snap**

As written above, the class `app__videos` has the property `scroll-snap-type: y mandatory;` and  `overflow-y: scroll;` making the scroll vertical. This property allows for the creation of well-controlled scroll experiences by declaring a scroll snapping position, in our case, at the `start` of the video. To obtain this perfect result, we just need to add the property `scroll-snap-align: start` to the child component, here the `ApiVideoPlayer` *(see code in the section below.)*

## Display videos

We are going to use [api.video react player component](https://github.com/apivideo/api.video-react-player), which allows us to display our videos in just a few lines of code. The only requirement is to pass the `videoId`. Create a `ref` to manipulate methods like `pause` or `play` easily. We set the `object-fit` CSS property in `cover` to ensure that even a landscape video will take the full size.

## Upload a video

[api.video](https://api.video) provides a [typescript library](https://www.npmjs.com/package/@api.video/video-uploader) to upload videos to api.video using delegated upload token. The easiest way to create an upload token is to open your api.video’s dashboard, go to the upload tokens section from the sidebar, then click on the “*Create upload token*” button. Find the full guide [here](https://docs.api.video/vod/delegated-upload-tokens).

**Upload using delegated upload token**

We create a hidden input with a type `file` that we activate programmatically. Create a new object `VideoUploader`, and add two options, the `upload token` set as an environment variable for security purposes and the current `file` to upload.

That’s it. You are done 🎉. Now you can safely and efficiently upload videos.

## Conclusion

We recreated TikTok thanks to [api.video’s features](https://api.video/use-cases/short-form/) in just a few steps. We did not cover every topic, but the entire code is available [here](https://github.com/apivideo/tiktok_clone).

And we're done! To start building right now, check out our **[docs](https://docs.api.video/)** and **[sign up for a free account](https://dashboard.api.video/register)**.

***BONUS***

In this part, I will explain how **to send** 💟’s

Each video object has a `metadata` property containing an array of key-value objects. So we can add a ‘*likes*’ metadata with a numeric value and increase this value when the user has pressed on the 🤍 icon!

To record the new data, we need to update the video by making an API call 

Note: Find a full description of the upload method [here](https://github.com/apivideo/api.video-nodejs-client/blob/main/doc/api/VideosApi.md#update).

Ready to build your own TikTok-like project? Get started by [signing up](https://dashboard.api.video/register) with api.video!

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

Player