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

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

api-video-blog-tutorials.png

Tutorials

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

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

video create

Video list

Video upload

Mobile

thumbnail_mathieu_round-1.png

mathieu_round-1.png

github-brands.svg

Github Mathieu Thiry

linkedin_logo_initials.png

LinkedIn Mathieu Thiry

Mathieu Thiry

large_api-video-blog-tutorials.png

medium_api-video-blog-tutorials.png

small_api-video-blog-tutorials.png

thumbnail_api-video-blog-tutorials.png

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!

Build your own TikTok with PWA and api.video

large_cover-tiktok-s-clone.png

medium_cover-tiktok-s-clone.png

small_cover-tiktok-s-clone.png

thumbnail_cover-tiktok-s-clone.png

cover-tiktok-s-clone.png

Chapters

doug.jpg

twitter-brands.svg

Doug Twitter

Doug Sillars

JavaScript

When reading a book, chapters help the reader understand a change has taken place - perhaps a new narrator, or a different point of view is used in each chapter.


Chapters in videos can be used in much the same way. If you need a specific moment in a long video, chapter titles may help you quickly find the part of the video you were looking for.  Here at api.video, we have a native chapter ability in our video player:

In the above version of Big Buck Bunny, I have added several chapters.  This is done with a VTT file.  It looks like this:

```
WEBVTT

1
00:00:34.000 --> 00:01:17.000
Bunny wakes up.

2
00:01:17.000 --> 00:02:30.000
Butterfly 1

3
00:02:30.000 --> 00:04:12.000
Plotting
4
00:04:12.000 --> 00:05:15.000
Construction

5
00:05:15.000 --> 00:05:42.000
Bow

6
00:05:42.000 --> 00:06:35.000
Falling Stuff

7
00:06:35.000 --> 00:07:42.000
Flying Squirrel


8
00:07:42.000 --> 00:09:41.000
Kite

9
00:09:41.000 --> 00:09:42.000
Post Credits

```

These intervals in the VTT file are shown as sections on the playback line at the bottom of the player, and clicking the chapter button lists them all.

## But what if you want an External button?

Super easy.  Using the Player SDK, you can seek to any time you wish.  So, as an example, you can create a series of buttons:

```
    <button id ="bunnyWakes">Bunny wakes</button><br/>
        <button id ="Butterfly">Butterfly</button><br/>
        <button id ="Plotting">Plotting</button><br/>
        <button id ="Construction">Construction</button><br/>
        <button id ="Bow">Bow</button><br/>
        <button id ="Falling">Falling Stuff</button><br/>
        <button id ="FlyingSquirrel">FlyingSquirrel</button><br/>
        <button id ="Kite">Kite</button><br/>
        <button id ="Post">Post Credits</button><br/>
```

Now, we can use an eventListener on these buttons, and using the api.video Player SDK, we can seek to the required time.  Here's the JavaScript that makes this magic happen:

```
      window.player = new PlayerSdk("#target", { 
            id: "vi1UQBDAMqAPCRxB3dmw1thc", 
            autoplay:true,
            muted:true
        });
        
        window.onload = function(){
            document.getElementById("bunnyWakes").addEventListener("click", function() {
                player.setCurrentTime(34);
            });
            document.getElementById("Butterfly").addEventListener("click", function() {
                player.setCurrentTime(77);
            });
            document.getElementById("Plotting").addEventListener("click", function() {
                player.setCurrentTime(150);
            });
            document.getElementById("Construction").addEventListener("click", function() {
                player.setCurrentTime(252);
            });
            document.getElementById("Bow").addEventListener("click", function() {
                player.setCurrentTime(315);
            });
            document.getElementById("Falling").addEventListener("click", function() {
                player.setCurrentTime(342);
            });
            document.getElementById("FlyingSquirrel").addEventListener("click", function() {
                player.setCurrentTime(395);
            });
            document.getElementById("Kite").addEventListener("click", function() {
                player.setCurrentTime(462);
            });
            document.getElementById("Post").addEventListener("click", function() {
                player.setCurrentTime(581);
            });

        }
```

First, we create a player with the player SDK, and insert the Big Buck Bunny video.  Then the eventlisteners work as fastforward/rewind buttons to the exact starting points of each chapter.  Note that the VTT file is in HH:MM:SS.000 time format, while the player.setCurrentTime is in seconds.

With these buttons (and a little CSS to make them pretty), you can build a web interface to your videos that incorporate a chapter skipping functionality, just like inside the api.video player.



Video Chapters: Using external buttons for controls

medium_1599px-chapteronesign.jpeg

small_1599px-chapteronesign.jpeg

thumbnail_1599px-chapteronesign.jpeg

1599px-chapteronesign.jpeg

With so many of us wearing headphones all day for calls, music, podcasts, etc, no one likes having the volume unexpectedly blast their ears. Using the api.video player SDK, you can set a warning when the volume is inadvertently set too high. Let's walk through how it works!


## Setting up the SDK

In this simple HTML page, we have a div for the video, and a paragraph for text:

```
<head>
    ...
    <script src="https://unpkg.com/@api.video/player-sdk" ></script>
</head>

<body>
	<div id="target" style="align:center;width:75%;"></div>
	<p id="text"></p>
</body>
</html>
```
We add a script to load the player SDK.  Now we can instantiate the player with JavaScript:

```
   <script type="text/javascript">
        window.player = new PlayerSdk("#target", { 
            id: "vi4blUQJFrYWbaG44NChkH27", 
            autoplay:true,
            muted:true
        });
     
    </script>

```

This creates the video, using the videoId and tells the player to autoplay the video while muted.  (This is the way to ensure that autoplay works in all browsers, but sadly is muted).

## Volume control

When a video is muted, the user will click/touch on the volume control. In this case we do not want them to accidently turn the volume too high, so we're going to set an initial maximum volume of 50% (in reality, this is kind of low, but test for yourself.)

We do this by setting the event listener for ```volumechange```, so whenever there is a change in volume, we can apply our script.

Here's the code for the volume change:

```
            var warning=false;
            player.addEventListener('volumechange', function(volume) { 
            var vol = volume.volume;
                console.log(`volume has changed: ${vol}`); 
                if(vol >0.50){
                    console.log("too loud!");
                    if(warning){
                        //they've been warned
                        document.body.style.backgroundColor = "red";
                        document.getElementById("text").innerHTML= "THIS IS LOUD";
                    }
                    else{
                        //warn user
                        warning=true;
                        player.setVolume(.5);
                        document.getElementById("text").innerHTML= "Are you sure? Loud volumes can damage hearing";
                    }
                }else if(vol<.50){
                        warning=false;
                        document.body.style.backgroundColor = "green";
                        document.getElementById("text").innerHTML="Nice and soft.";
                    }
		                else{ //exactly 0.5
                    document.getElementById("text").innerHTML= "Are you sure? Loud volumes can damage hearing";
                }

            });

```

First, we declare the boolean ```warning``` as false.  If the player detects a volume change, we look to see if the volume is over or under 50%. 

### High volume

If the volume is set to over 50%, we initially reset it to 50% and ask, "are you sure?", and the warning boolean is flipped to true.  If the user tries to go over 50% **again**, we let them set the higher volume (and change the page background to red).

### Low volume

If the volume is set to under 50%, we change the background to green.

## That's it

The code is on [Github](https://github.com/dougsillars/videoVolume), and the demo is live at [volumewarning.a.video](https://volumewarning.a.video/).  

Here's a video of the demo in action:








Volume warnings

medium_372340532b4c1b79eccc.jpg

small_372340532b4c1b79eccc.jpg

thumbnail_372340532b4c1b79eccc.jpg

372340532b4c1b79eccc.jpg

## Animated video preview


Traditionally, a video preview on the web is a poster image from the video, with a big play button in the middle.  The poster can be a unique image, but more typically is a frame from the actual video. The poster is an attribute of the video tag, so adding the image is very easy.

But animation draws your eye. When you see the page moving, you're going to look to see what is going on, and by seeing that there is a movie, can watch it.  So, how can you add an animated preview?

Many applications that use an animated preview use an animated GIF. We all love GIFs, and use them in our Slack conversations, add them on Twitter, often to great comedic effect. But - when you use a gif on Twitter - guess what?  It is actually a looping mp4!

So why do many video APIs fall back to animated GIFs?

Another image of the same street musician playing

large_streetmusicianplaying.jpg

medium_streetmusicianplaying.jpg

small_streetmusicianplaying.jpg

thumbnail_streetmusicianplaying.jpg

streetmusicianplaying.jpg



## GIF: Not intended as a platform for animation

If we enter our time machine back to 1989, we can read what the creators of GIF have to say about animated GIFs: it is right in the [specifications](https://www.w3.org/Graphics/GIF/spec-gif89a.txt):

>Animation - The Graphics Interchange Format is not intended as a platform for
animation, even though it can be done in a limited way.

The reason is that video uses time based compression - allowing for compression across frames of the video, while a 15 fps animated GIFs has 15 static GIF images per second. That means: really big files.  


## Using HTML5 video

With just a few lines of code, we can loop the actual video file without any editing of the file:

```
<video loop muted autoplay controls id="video">
	<source src="vi4blUQJFrYWbaG44NChkH27.mp4#t=5">
</video>

<script>
	var video = document.getElementById("video");
	var START_TIME = 5;
    var END_TIME=10;

	 video.addEventListener("timeupdate", () => {
		 console.log(video.currentTime);
		 if(video.currentTime >= END_TIME){
			 video.currentTime = START_TIME;
			video.play();
	      }
	  });
	
	
	</script>

```

In the video tag, we append the video url with #t=5, telling the video player to start the playback at 5 seconds. Aside: if we used #t=5,10, it will stop the video at t=10 seconds, but the video does not loop.

To ensure the video loops, we add a listener to 'timeupdate' (which fires every 250 ms).  When this exceeds the end time, we reset to start time, and begin the video playback again.

## Using api.video


We can do the exact same thing with api.video [player SDK](https://docs.api.video/sdks/player/apivideo-player-sdk):

```
    <iframe id="target" width="100%" height="100%"></iframe>
    <script>
        const START_TIME = 5;
        const ENDTIME = 10;

        // create the player in the #target element
        var player = new PlayerSdk("#target", {
            id: "vi5oDagRVJBSKHxSiPux5rYD",
            autoplay: true,
            muted: true,
            hideControls: true,
        });

        player.addEventListener("ready", () => {
            player.setCurrentTime(START_TIME);
        })

        setInterval(() => {
            player.getCurrentTime((time) => {
                if (time >= ENDTIME) {
                    player.setCurrentTime(START_TIME);
                }
            });
        }, 200);
    </script>
```

You can try it out in a [JSFiddle](https://jsfiddle.net/3f4gpnjd/1/)

## Using video

The great thing about the implementations above is that no additional files have to be generated: we keep using video to display video.  Do you want to change the interval of the loop?  All you need to do is change the start/stop variables in the JavaScript, and the change will be instantaneous. A GIF would require re-encoding.

If the user decides to watch the video, you already have a great deal of the files needed to start the video in your local cache - so playback will be super fast.

## Conclusion

We can create looping "GIF-like" experiences with videos uploaded to api.video with just a few lines of JavaScript.  There's no added cost to creating or changing your files - since it is all based on the video files already in the system. And, since we are just programmatically playing back a selected part of the video, making changes on the start, finish and duration of the video is easy.  Try it yourself.  Create an [api.video account](https://dashboard.api.video/register) today!

*Thanks to Olivier Lando from the Ecosystem team for creating the JSFiddle.*

Adding an "animated GIF" with api.video

large_output.jpg

medium_output.jpg

small_output.jpg

thumbnail_output.jpg

output.jpg

Sometimes your video content flows nicely from one video to another. If this is the case, having the player automatically load the 'next' video in a sequence would be convenient.

In this post, we'll use the [JavaScript Player SDK](https://docs.api.video/sdks/player/apivideo-player-sdk) to control the videos that appear in the player.  The demo application is available at [watch.a.video/playlist/](https://watch.a.video/playlist/), and the code is on [GitHub](https://github.com/apivideo/videoPlaylist/tree/main).

## Video Playlist

Each video at api.video has a unique videoId. You can get this value from the video API, or you can extract it from the go.api.video URL for each video. I selected four videos from my account, and created an array with their videoIds:

```
var videos = [
            "vi7RSVfjmrCmQZgS12j7VW5X", //Edinburgh bagpipes
            "vi4uIigPjKOXiVnBGLjHDIMs", //clouds from a plane
            "vi3DZ8BOJBt3DxqenDSDXL1Z", //Zurich Christmas church
            "vi1rdVw3OxmAzpCM7mJmlz2c" //Munich surfing
        ];
var counter = 0;
```
 
This array will be our playlist.  We also create a counter that we will use to loop through the array.

## Creating a video player instance

The SDK makes it very easy to create a video on a page.  The first step is to include the [SDK script](https://github.com/apivideo/api.video-player-sdk/tree/main/) file:
```
<script src="sdk.js"></script>
```

In the above example, I simply have a div with the ID myVideo:

```
<div id="myVideo" ></div>
```

when the page loads, we call the createVideo function. This will use the player SDK to create a player instance in the myVideo div.  The videoId is set to the first video in the videos array, and we tell the player to autoplay - so the video starts as soon as it has loaded.

```
window.onload = createVideo(counter);

        function createVideo(counter) {
            console.log("video", counter +videos[counter]);
            window.player = new PlayerSdk("#myVideo", { 
               id: videos[counter], 
                autoplay: true
                // ... other optional options s
            });
            player.addEventListener('play', function() { 
                //console.log("playing");
                onPlay(counter);
            });
            player.addEventListener('ended',function() { 
                console.log("ended");
                counter ++;
                //if we hit the end of the array - start over again
                if (counter == videos.length){
                    counter = 0;
                }
                onEnd(counter);
            });
    
        }
```

There are 2 listeners attached to the player we created: 'play' and 'ended'

### Play Listener

The play listener fires when the video starts playing. Obviously, this happens at the start, but also when unpaused, and also whenever there is a 'seek' - the user jumps ahead or behind in the video.

the onPlay() function simply updates the 'videoInfo' div:

```
        function onPlay(counter) {
           // console.log("onPlay");
            console.log("counter" ,counter);
            document.getElementById('videoInfo').innerHTML = "video playing " + counter;
            console.log("video playing");
        }
```

### Ended Listener

When the video ends, this event fires.  We increment the counter (or if we are an the end of the array - we reset counter to 0), and call onEnd():

```
        function onEnd(counter){
            //console.log("onEnd");
            document.getElementById('videoInfo').innerHTML = "video over" ;
            //console.log("video over");
            player.destroy();
            //video is over - so start another one...
            createVideo(counter);
        }
```

onEnd destroys the current player, and then calls the createVideo function to create a new player with the new video in it.  

## Jump to the next/previous video

There are 2 arrow images to the left and to the right of the video. Clicking these will cause the video to skip to the next video (the right arrow) or the previous video (left arrow).

This is controlled with a clicklistener. Here's how we move to the "previous" video:

```
        document.getElementById("prev").onclick = function() {
            counter--;
            if( counter < 0){
                counter = videos.length -1;
            }
            player.destroy();
            createVideo(counter);
        }
```

It simply decreases the counter by 1 (and handles the case if we are at counter=0 by going to the last video), destroys the current player, and creates a new player with the new counter value. 

The "next" clickListener works the same way (and the code is in the repo.

## Playlist

onEnd calling createVideo creates a loop: after the video ends, start the next video.  This effectively creates a playlist that can be controlled by the array.


## Conclusion

Using the [api.video Player SDK](https://api.video/catalog/player-sdk/), we have created a way to play one video after another. Give it a try, and let us know what you think on our [community page](https://community.api.video)!  

&nbsp;  

Sign up for free and start using api.video

How to create Video Playlists with api.video's Player SDK

small_playlist.png

thumbnail_playlist.png

playlist.png

Your company’s brand is unique.  Shouldn’t the video player that you use your 
branding & your colour scheme… not the YouTube/Google corporate colour scheme?

## api.video player

api.video, in addition to fast video [encoding](https://api.video/what-is/video-encoding/), [streaming](https://api.video/product/live-stream/) and storage, has a fully customisable player that allows you to have greater control over how your video is presented. By default, here’s what it looks like:

This is a video of Bucky Badger (the mascot for the University of Wisconsin-Madison) dancing at a basketball game. (On Wisconsin!)

Sports teams are **highly** identifiable by their colors - fans wear scarves, shirts in “their” teams colours to show their support. 

The colors for the Wisconsin Badgers are Badger (Cardinal Red) and White. A close look at the screenshot above shows that the api.video logo (while awesome) is closer to the colours of the University of Minnesota (and we just can't Gopher that!). The play button is blue, and while unlikely to be mistaken for the dark blue of Penn State or (shudder) the University of Michigan, it certainly does not match the Badger color scheme.  Let’s dive in and learn how to build a custom player with api.video that uses the [University of Wisconsin color scheme](https://brand.wisc.edu/web/colors/).

## Create a New Player

The first step in creating your new player is, well, to create a new player.  You’ll need your api key from the [api.video dashboard](https://dashboard.api.video/).  Use this to [authenticate your account](https://api.video/blog/tutorials/authentication-tutorial/), and receive an access token that will be good for an hour. 



To create a player, we’ll use the [create player](https://docs.api.video/reference/api/Player-Themes#create-a-player) endpoint. A quick scan of the API shows that you can pretty much customise the player completely on creation, but we’ll go one step at a time to show the differences each change incurs.

To create the default player, we’ll use the API and use no parameters in the JSON (make sure you replace {accessToken} with the token you received in the last step):


To which we will receive a response that resembles:

Hooray! We’ve created a player (ptSQlESqn5KIn9tGxlA88Q1) that we can now customise. Before we begin customising the player, we must associate it with a video to see it.  Using the [Update Video](https://docs.api.video/reference/api/Videos#update-a-video-object) endpoint, and the videoId (vi3666MejLyqtJOOHFIwGCA9) for the Bucky Badger video, we will change the playerId parameter to our new player:


The response JSON (not shown) for the video shows that the new playerId is now present in the response, indicating that the change was successful. Now we can begin walking through the various customisations that are possible with the player, and see them with this video.  

### Assets

There are 2 API endpoints to edit a player. The [Upload Logo](https://docs.api.video/reference/api/Player-Themes#upload-a-logo) endpoint is specifically for changing the logo on the player.  It requires 2 parameters, an image file (JPG or PNG, 100x200 pixels max) and a url.  When the icon in the player is clicked, a new tab will open the url. For example: the default api.video player features the api.video logo, that, when clicked, takes the user to the [api.video](https://api.video) homepage.


bucky-default1.png

Our new player has no asset (logo and link are ```null``` in the JSON), and therefore no icon to click on:

bucknoasset1.png

Let’s go ahead and add an icon to this player..  In this case, we’ll use the official University of WIsconsin “motion W” logo, downloaded from Wikipedia.  For the url, we’ll point to Bucky’s Twitter account (https://twitter.com/uwbuckybadger)


I am using the ```multipart/form-data``` mimetype, which allows me to update a text form field (```link=https://twitter.com/uwbuckybadger``` ), and also upload a file (in this case the motionW.png image in my downloads folder).  Now my video features the official icon of the university, and when clicked, opens Bucky’s Twitter page in a new tab.


screenshot-2020-08-26-at-15-55-33.png

## Update Player

The second endpoint for customizing the player is the [Update Player](https://docs.api.video/reference/api/Player-Themes#update-a-player) endpoint. We could have made all of these changes on creation, but for the sake of showing examples, we will be making small incremental changes to the player, and investigating the differences.

Let’s take a look at which areas we can change in the api.video player:

all the places color can be added in player

screenshot-2020-08-26-at-17-35-09.jpg


### Customising player colors

The display parameters we can adjust are named as follows:

* ```backgroundText``` changes the video title.
* ```text``` affects playback timers (total and elapsed time). 
* ```lineActive``` & ```linkHover``` affect icon colors and hover state color, 
* Playback bar: The colors indicating video playback status can be changed:
* ```trackPlayed``` to the left of the current playback location (video that has been played)
* ```trackUnplayed``` To the right of current playback location, indicating the video downloaded.  You can also think of this as the locally buffered video.
*   ```trackUnplayed``` To the right of current playback location, indicating the video downloaded.  You can also think of this as the locally buffered video.
* ```trackBackground```: To the right of trackUnplayed: this is where no video is yet downloaded.
* ```backgroundTop``` & ```backgroundBottom``` are used to create a gradient effect when the menu is opened.

Let's see how each of these features work!

### Text Coloring

The video name attribute is controlled by the ```backgroundText``` parameter.  The primary UW color is Badger Red, and the branding guide provides a HEX code:  #c5050c. Using an [online converting tool](https://www.webfx.com/web-design/hex-to-rgb/), this corresponds to rgb(197,5,12).  The default alpha is 1, so we’ll add ```rgba(197,5,12,1)``` as follows:




This call results in a success, so we can reopen the video to see if the title in red is easy to read:

redtitle.png

Looks good to me!  Using the same red color for the playback times, using the ```text``` API parameter is not as successful. The text is hard to read in places, like when the text goes across Bucky’s striped sweater:  

redtime.png

Rather than revert to white, we can use the UW-gray-blue specified in the branding guide: ```{"text":"rgba(218,223,225,1)"}```

graytime.png

### Playback bar

There are 3 statuses that appear in the playback bar:
* Played: video that has been played (to the left of the current playback location)
* Buffered: Unplayed, but downloaded - to the right of the current playback locations
* Not yet downloaded: Appears early in playback - for the end of the video that is not yet downloaded. 

The default colors here are blue -> white -> white, and the alpha channel goes from 0.95 -> 0.35 -> 0.2 (unplayed video is more transparent than video that is played).

Let’s keep the same transparency, but use UW-dark-red-> UW-gray-darker -> UW-gray-blue. The data I send is:


videobar1.png

The red ‘played’ color on the left looks great, but it is hard to see the difference between the unplayed and background colors on the right.  Using UW -*gray blue* for both unplayed and returning the alpha channel values to the default values seems like a good compromise with excellent visibility:


videobar2.png

### Icons

The icons are all white, and probably could remain that way, but because this is a walkthrough of changing all the colors, we’ll change the icons to UW-gray-darker, with a white hover.  


### Background colours

In the upper righthand corner is an icon with three dots.  When it is clicked, the video is paused, and placed in the background with a gradiant of colours from top to bottom over the video.  These colours are adjusted with the ```backgroundTop``` and ```backgroundBottom``` parameters.

Since this is the UW Badgers player, we'll use Badger Red to White for the gradient:

backgroundgradient.jpg

### Video Playback



The last few API configurable features control the video playback inside the player.
* ```enableApi``` when true, allows the [player SDK](https://docs.api.video/sdks/player/apivideo-player-sdk) to control the player.
* ```forceAutoplay``` when true, the video will automatically autoplay. Note that due to browser limitations, the video will be muted when set to autplay. 
* ```enableControls``` will hide all the playback controls from the user. This is great if you are using your video as a background on a page, and there is no need to start/stop the video. Note: without controls, the video should be set to autoplay.
* ```hideTitle``` Remove the title and logo from the video.
* ```forceLoop``` For the video on an endless loop.

With these tools, you can simulate an animated gif: hide the controls and the title, force autoplay and looping.

In the case of my UW Badgers video, I'll force autoplay and looping, but also keep the title, controls and API access:

##  Conclusion

Well, we've done it.  Here is the final player with all of our edits:




Pretty neat! I was able to upload a video, create a player for my video, and customise it to meet the brand requirements of the organisation. 

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

Player SDK