Player SDK

video create

Video list

Video upload

Player

Mobile

Normal

thumbnail_mathieu_round-1.png

mathieu_round-1.png

github-brands.svg

Github Mathieu Thiry

linkedin_logo_initials.png

LinkedIn Mathieu Thiry

Mathieu Thiry

Tutorials

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

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](http://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/docs/create-and-manage-tokens-for-delegated-uploads).

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

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

Build your own TikTok with PWA and api.video

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.



medium_1599px-chapteronesign.jpeg

small_1599px-chapteronesign.jpeg

thumbnail_1599px-chapteronesign.jpeg

1599px-chapteronesign.jpeg

Video Chapters: Using external buttons for controls

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:








medium_372340532b4c1b79eccc.jpg

small_372340532b4c1b79eccc.jpg

thumbnail_372340532b4c1b79eccc.jpg

372340532b4c1b79eccc.jpg

Volume warnings

## 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/docs/video-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](https://my.api.video) account today!

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

large_output.jpg

medium_output.jpg

small_output.jpg

thumbnail_output.jpg

output.jpg

Adding an "animated GIF" with api.video

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/docs/video-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/dougsillars/videoPlaylist/blob/main/index.html).



## 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/player-sdk/tree/master/dist) 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, 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)!




small_playlist.png

thumbnail_playlist.png

playlist.png

Creating Video Playlists

Featured article

# api.video blog

Blog

Follow the api.video Blog to explore tutorials, video use cases, and learn about on-demand and live-streaming video updates.