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

Video Status

thumbnail_aya-modified.png

aya-modified.png

Github Aya Bochman

Aya Bochman

JavaScript

NodeJS

In this tutorial we will create a Udemy-like learning platform with [api.video](http://api.video) using Next.js, React, and Typescript. Udemy is an open online learning and teaching marketplace where you can have access to a variety of courses.

We’ll focus on how to easily add Udemy’s notes feature to your video with the help of [api.video’s player SDK](https://github.com/apivideo/api.video-player-sdk), which allows us to control and interact with our player. We’ll also see how to show a progress bar on the videos preview and resume a video where it was last paused.

You can see the demo [here](https://udemy-clone-next-typescript.vercel.app/) and the complete code [here](https://github.com/apivideo/udemy-clone-next-typescript).

video-note-demo.gif

## 1. Quick Setup

Let's start to build a new Next.js application using **Create Next App** and `--ts` for **Typescript**

Run these commands in the terminal:

Once inside our project, install api.video’s Node.js client and player SDK  with some style and icon packages:

Note: We'll use styled-components and react-icons to style our example application, but you can use any styling libraries you want. 

## 2. Video list preview

First, on our main page, we will display a list of our videos. You can follow the 3rd step, “How to fetch data,” in our [Youtube clone tutorial](https://api.video/blog/use-cases/rebuilding-youtube-with-api-video-next-js) to achieve that. 

After you fetch the videos data in `pages/index.tsx`, add a component that you’ll pass the `videos` result to.

## Video preview

Once we have our array of videos in a designated component, we want to create a simple video preview with a title and thumbnail.  

We’ll map the list, and in each video object, we can access the thumbnail CDN with `assets.thumbnail` and show the `title`. Pass it to your desired preview component, style it, and you can get a result like this:

large_videos-preview-empty.png

medium_videos-preview-empty.png

small_videos-preview-empty.png

thumbnail_videos-preview-empty.png

videos-preview-empty.png

## 3. Video page view

### Setting up the player SDK

I’ve created a `components/Video/index.tsx` component which will display the video on my `pages/video/[videoId]` page. Then let’s set up the player SDK in 2 simple steps:

**Step 1 - Get video details**

Create an API route in `pages/api/video.ts` for getting video details by Id with our [Node.js client](https://github.com/apivideo/api.video-nodejs-client).

Now in the front end, get the `videoId` from the query, send it to the API, and you will get a video object. 

**Step 2 - Create player SDK**

Now the fun part begins 😄 after we get the `videoId`, we can create our [api.video player SDK](https://github.com/apivideo/api.video-player-sdk#documentation). The SDK will help us to get a bunch of information from our video, and to control and customize the player as we want. 

After these 2 steps, our code should look like this:

Go to the [player SDK documentation](https://github.com/apivideo/api.video-player-sdk#documentation) to read more about the params `id, hideTitle, hidePoster` 

You’ll notice that we’re getting an element by id called `myVideo`. We need it to connect the SDK to the actual HTML5 player. So let’s create that iframe element in our render:

large_player-img.png

medium_player-img.png

small_player-img.png

thumbnail_player-img.png

player-img.png

Set the player SDK in the state, and once it’s added to the state for use, we want to add a few more features when the player is ready with `addEventListener('ready', callback)`. `ready` means the player is loaded and ready to play, so here we can customize the theme to Udemy’s player colors, and get the total duration of the video for the Overview tab display.

We can do that with the SDK’s `setTheme()` and `getDuration()` methods. I’ve put the methods in separate functions to keep the code clean.

Read more about the player SDK methods and event listeners [here](https://github.com/apivideo/api.video-player-sdk#methods).

The duration we get from the SDK is in seconds, so I’ve added a conversion to hours function in `utils/functions.ts`

large_duration-preview.png

medium_duration-preview.png

small_duration-preview.png

thumbnail_duration-preview.png

duration-preview.png

### Bookmarking a video - How to listen to a player’s timestamp?

In this part, we'll focus on how to add a note to a video’s specific timestamp! We can achieve that by using [api.video player SDK](https://github.com/apivideo/api.video-player-sdk) that we set in the previous step.

new-note-click.gif

To create a bookmark in a video, we need to constantly listen to the video’s playback. The idea is that once we click on ‘Add Note,’ the video will pause, and we can write and save a note on its timestamp. 

So our next step is to add a `timeupdate` event listener, then set it to the state called `currTimestamp`. Make it an object of `minutesFormat` and `seconds` because we want to have a formatted minutes display but also a seconds value for some of the player SDK methods.

Save the video’s timestamp in the localStorage to keep track of the video’s playback. We’re going to use it to show progress later.

I chose to format our seconds to `mm:ss` display, but you can choose whatever format you like, just add it in our `utils/functions.ts`

And we’re set! 👏  At this point, we have our `currTimestamp` in the state, and we can now create a note button that will pause the video when we click on it with `playerSdk.pause()` method, then open the Notes tab with an input on the current timestamp.

large_note-preview-filled.png

medium_note-preview-filled.png

small_note-preview-filled.png

thumbnail_note-preview-filled.png

note-preview-filled.png

*I’m saving the notes in an object state where the key is our formatted `mm:ss` timestamp, and the value is an object of `note` and `seconds`. For the simplicity of the demo, the notes are saved in the local state.*

Suppose you go straight to the Notes tab without deciding which timestamp you want or after saving a timestamp. In that case, Udemy has a ‘Create a new note at’ button at the top, which has a changing timestamp value corresponding with the player’s playback. 

This is easy to achieve since we’ve already set our `currTimestamp` in the state with a `minutesFormat` value. So when displayed in the button, it will change with the playback time, like this:

note-timestamp.gif

Now, after we have some saved notes, we want to be able to jump to the timestamp by clicking on the note’s timestamp button.

That’s going to be very simple - since we’re saving `seconds` in every note object we create, let’s map our `notesList` for display, then send `notesList[key].seconds` to our player SDK method `playerSdk.setCurrentTime(seconds)`. This will set the player’s playback time to our desired seconds.

jump-to-timestamp.gif

### Display video progress

Remember we saved the video’s timestamp in our localStorage? Now it’s time to use it for creating a progress bar like this:

large_filled-progress.png

medium_filled-progress.png

small_filled-progress.png

thumbnail_filled-progress.png

filled-progress.png

In our video preview component, create this function:

First, we’re calling [api.video](http://api.video) [GET video status API](https://docs.api.video/reference/get-video-status) from which we can extract the total duration of our video. 

Then we get the video’s last timestamp we saved in our localStorage with `videoId`. 

Once you have the total duration and paused seconds, all you’ve got left is to choose how you want to draw the progress on the preview. I used [Radix UI progress](https://www.radix-ui.com/docs/primitives/components/progress) which is very easy to customize. 

The same goes for when we click on a video and want to set it to the last paused timestamp. Extract the timestamp from the local storage, then use our player SDK `setCurrentTime(seconds)` method. 

And voila! 🥳 Now we can display a nice progress preview on our videos and set a video to its last timestamp.

## Conclusion

This tutorial taught us how to recreate a Udemy-like learning platform, focusing on their notes feature and video progress. 

We achieved amazing, functioning results with the power of api.video’s player SDK, and Node.js client. The entire code is available for you [here](https://github.com/apivideo/udemy-clone-next-typescript).

That’s it! 💪 [Start building](https://dashboard.api.video/register) now and don’t hesitate to ask questions or share your project with us on the [Community](https://community.api.video/)!

See you in our following tutorials 👋

### Part 2 is available: Add AI-generated summary, topics, and transcript to your videos using [symbl.ai](https://symbl.ai/blog/accessibility-automated-content-management-e-learning-platforms/)

large_udemy-preview-blog.png

medium_udemy-preview-blog.png

small_udemy-preview-blog.png

thumbnail_udemy-preview-blog.png

udemy-preview-blog.png

How to create a Udemy-like learning platform

Use cases

This tutorial will show how quick and straightforward it is to build a youtube clone with [api.video](https://api.video) and Next.js. By encapsulating the front-end and backend inside our Next app, we can rapidly develop and deploy as we need a backend to run *[@api.video/nodejs-client](https://github.com/apivideo/api.video-nodejs-client).*

YouTube’s core functionality is the video library, so today, we will focus on this crucial feature: listing videos. You will have all the steps to build a public catalog of videos for your product. The demo is available [here](https://api-video-youtube-demo.netlify.app) and the code [here](https://github.com/apivideo/youtube-clone-next).
Let's start 🎬

large_cover-youtube-clone.png

medium_cover-youtube-clone.png

small_cover-youtube-clone.png

thumbnail_cover-youtube-clone.png

cover-youtube-clone.png

## 1. Application setup

Let's quickly start to build a new Next.js application using **Create Next App**

Run these commands in the terminal:

*Note: We'll use [styled-components](https://styled-components.com) and [react-feather](https://feathericons.com) for icons to style our example application, but you can ignore these steps if you have another preference. *

Once inside our project, install these three packages:

## 2. Configuration

**Configuration styled-components**

Since 12.1, Next.js added support to the Next.js Compiler for [styled-components](https://nextjs.org/docs/advanced-features/compiler#styled-components), update your `next.config.js` file:

**Create a custom _document.js file**

To render our styled-components at the server-side, we need to override `_document.js.` For this, create a `_document.js` file under the pages folder and add the following content into it. We will use also use the google font [Roboto](https://fonts.google.com/specimen/Roboto).

### 3. How to fetch data

**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>`. It's all server-side. We set our API key in an environment variable in the `.env.development` file for security.

Now create a `pages/api/content.js`file. Inside this file, add the following code:

We can get videos in just a few lines of code by applying the method `list`. 

*[@api.video/nodejs-client](https://github.com/apivideo/api.video-nodejs-client)* allows us to filter by `title`,  `tags`, `metadata`, `description`, `pageSize,` full documentation is [here](https://github.com/apivideo/api.video-nodejs-client/blob/main/doc/api/VideosApi.md#list). Let's focus on `title` for now.

**Call API routes in the front-end.**

Go to `pages/index.js` and call the endpoint we just created on mounting. Save the result in the state videos.

search-gif-youtube-clone.gif

*[@api.video/nodejs-client](https://github.com/apivideo/api.video-nodejs-client)*  allows us to filter videos by name. We’re going to implement a simple field where we can enter a searchable value.

tags-gif-youtube-clone-gif.gif

### How to filter videos with tags

api.video provides many features. One of them allows you to a tag to a single video. This demo excellently showcases how to use it.

**1 ) Add a tag to the dashboard.**

The easiest way to add a tag is to go to [api.video dashboard](https://dashboard.api.video/), go to videos sections, click on a video, “see details” of a video and add a tag. The video [here](https://www.loom.com/share/9219a1fa532d4e41884a016a45efef0e) explains how to do it.

The next step is to apply the `filterTags` function to the videos, which: 

- Retrieves all of the tags
- Sorts by “the most used”
- Returns a clean tag array that we will store in a state

**2 ) Store tags in a state**

We call this util function each time we get videos. We store the array of values in a state. We also create another state, “active state, “ the current state. By default, it is “All”.  

**3 ) Display Tags component**

 The tag's value is in the `Chip` component. By default, the Chip “*All”* is displayed, and next, each tag is stored in the tag array. If you click on the chip, you update the value of the tag state. The props `isActive` shows a different style based on whether true or false.

**4 ) Filter videos by the activeTag**

Then let's apply to the videos array the `filterElement` function, which only displays videos whose tags are equal to the activeTag. This function applies only if the activeTag is different from `All`.

## 5. How to use the player from api.video

[api.video](https://api.video) provides a performant and fully customizable [player](https://docs.api.video/reference/get_players). As soon as you upload a video, it automatically creates a link to the api.video's player. You can, of course, customize your player directly in the [dashboard](https://dashboard.api.video). Then, let's encapsulate the player in an `iframe`. The props video corresponds to a video object.

# Conclusion

We recreated YouTube thanks to api.video’s features in just a few steps. We did not cover all the topics such as dynamic routing usage of react context to store the API key, but the entire code is available [here](https://github.com/apivideo/youtube-clone-next).

And we're done! To start building right now, check 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 easily you can  **display the video on hover**

hover-gif-youtube-clone.gif

Create a file to regroup our CSS logic in `style.js`. The trick is to display the video on hover instead of the image. A way to achieve it is to add the property `display: none` to the image and `display: block` to the video.

As shown below, we pass each video object as props to the Video component.

We don't need to format the answer in the child component Video. We can destructure the video object and access the image and video.

large_real-cover-youtube-clone.png

medium_real-cover-youtube-clone.png

small_real-cover-youtube-clone.png

thumbnail_real-cover-youtube-clone.png

real-cover-youtube-clone.png

Rebuilding YouTube with api.video and Next.js

medium_screen-shot-2021-01-26-at-11-48-47-am.jpg

small_screen-shot-2021-01-26-at-11-48-47-am.jpg

thumbnail_screen-shot-2021-01-26-at-11-48-47-am.jpg

screen-shot-2021-01-26-at-11-48-47-am.jpg

Erikka Innes

Today we'll learn how to grab video data from api.video, add it to a database, then use that information to create an infinite wall of videos that you can keep scrolling through.

large_infinitevideos.jpg

medium_infinitevideos.jpg

small_infinitevideos.jpg

thumbnail_infinitevideos.jpg

infinitevideos.jpg

For this project, we're going to also use Laravel 8. 

## Prerequisites

* api.video account - [Register here](https://dashboard.api.video/register)
* [Laravel 8](https://laravel.com/docs/8.x/installation) installed
* Project repository - [https://github.com/apivideo/api.video-php-client/tree/main/examples/laravel/infinite_scroll](https://github.com/apivideo/api.video-php-client/tree/main/examples/laravel/infinite_scroll)
* api.video [PHP client](https://github.com/apivideo/api.video-php-client) 
* Symfony HTTP client - `composer require symfony/http-client` 
* composer - [https://getcomposer.org/](https://getcomposer.org/)

## What you'll be doing
You have three tasks for this project: 
1. Retrieve your data from api.video
2. Add your data to your database
3. Set up your page to show the videos in an infinite scroll 

## Retrieve your data
You need to collect some data from api.video about the videos you're going to use. To keep it simple, for this walkthrough I'm just retrieving videos tagged 'holiday' and keeping the title, video ID, and MP4 link for each one. You can retain any information you might want to use or display, the most important thing is the MP4 link. 

For this part of the project, I didn't use Laravel 8, I just set up a php file with my code and used composer. 

After you run the code, you'll have a list of all videos from your account that you tagged **holiday** in a .csv file. Save the file, we'll use it for the next part of our project.

## Set up your project
Now it's time to set up our Laravel 8 project. We'll need this before we can do anything with our database. These instructions are for Macs.

1. Make a new project by opening a terminal in the place where you want to store your project by typing `laravel new holiday`. 

2. Install the api.video PHP client. `composer require api-video/php-api-client`

3. Install the Symfony HTTP client. `composer require symfony/http-client`

4. Go into your project and find the .env file. For the section that starts **DB_** delete every **DB_** item except for **DB_CONNECTION**. Set **DB_CONNECTION** to sqlite. `DB_CONNECTION=sqlite`

5. Create a database table for the .csv file we made. `php artisan make:migration create_holidays_table`

6. Go into your project in the database folder and open the migrations folder. There should be a .php file with a timestamp at the start followed by the name of the table you just created in the terminal. Open this file and paste in this code:

7. Migrate your new table. `php artisan:migrate` 

8. Now we're going to create two models. The first is for handling infinite scroll. `php artisan make:model Model/InfiniteScroll` 

9. After you've made this model, go find it in your project and paste in this code: 



10. The second model we're going to make is for setting up our Holidays table contents. `php artisan make:model Model/Holiday`

11. Navigate to your new Holiday model and paste in this code:



12. Let's create a seeder that we can use to populate our new table using our .csv file. `php artisan make:seeder HolidaySeeder` 

13. Take your .csv file and place in the data folder for your database. 

14. Go to the seeders folder and open your HolidaySeeder.php file. Paste in this code:

15. Now we can run our seeder! `php artisan db:seed --class=HolidaySeeder` This should populate your database with the information from your .csv file. We're ready to set up our page to display our video collection. 

## Display videos
In this section we'll set up routes, a controller, and the page that will display videos whose links are retrieved from our database. 

1. We're going to add a new route, but before we do that, navigate to RouteServiceProvider.php. Scroll down to the line that reads `protected $namespace = 'App\\Http\\Controllers';` - it's probably commented out. Remove the commenting so it is active again. 

2. Navigate to routes\web.php. Add a new route `
Route::get('/load-more-data', 'VideoController@InfiniteScroll' );`

3. Make a new controller. `php artisan make:controller VideoController` 

4. Navigate to Controllers and open your VideoController file. Paste in this code:

5. Now let's set up our blade file. Navigate to views and craete a new blade file called **holidayView.blade.php**. Open the new file and paste this in: 

6. If you don't have a **data.blade.php** file, create one in the same folder as your other blade files. Open **data.blade.php** and paste in this code: 

## Run your project

Open a terminal in your project and type `php artisan serve`. You should be able to see a list of scrolling videos! 

If you have any questions about this tutorial, or would like to share what you've built, please join our [community forum](https://community.api.video/). 

Create an infinite scrolling wall of holiday videos with Laravel 8

large_create-an-infinite-scrolling-wall-of-holiday-videos-with-laravel-8.jpg

medium_create-an-infinite-scrolling-wall-of-holiday-videos-with-laravel-8.jpg

small_create-an-infinite-scrolling-wall-of-holiday-videos-with-laravel-8.jpg

thumbnail_create-an-infinite-scrolling-wall-of-holiday-videos-with-laravel-8.jpg

create-an-infinite-scrolling-wall-of-holiday-videos-with-laravel-8.jpg

In our 3rd installment of helpful PHP scripts for bulk video uploads, we'll take a look at how to export all your video data to a .csv file. This script is part of a collection of scripts that help with bulk video uploads. All are available in our [Helpful PHP Scripts](https://github.com/apivideo/helpful-scripts) repository on GitHub. In each part of this series, we'll walk through how to set up one of them. The scripts you'll find include:

* [Ingest Videos from Google Drive](https://api.video/blog/tutorials/helpful-php-scripts-upload-videos-from-google-drive-to-api-video/) - You can transfer all your videos from a folder in Google Drive to your api.video account with this CLI script.
* [Ingest Videos from an FTP Server](https://api.video/blog/tutorials/helpful-php-scripts-pt-2-upload-videos-from-an-ftp-server/) - Transfer all your videos from the FTP server of your choice to your api.video account.
* [Export All Your Video Data to .csv](https://api.video/blog/tutorials/helpful-php-scripts-pt-3-export-all-your-video-details-to-a-csv/) - With this script you can grab details about each video in your api.video account and gather it in one .csv spreadsheet.
* [Update Metadata for api.video Videos Using CSV](https://api.video/blog/tutorials/helpful-php-scripts-pt-4-update-metadata-for-api-video-videos-using-csv/) - You can update your metadata in bulk with this script.
* [Update Video Settings in Bulk Without a CSV File](https://api.video/blog/tutorials/helpful-php-scripts-pt-5-bulk-update-without-a-csv-file/) - Update videos to all be public or private or offer an mp4 download or disable an mp4 download.

medium_pexels-negative-space-97077.jpg

small_pexels-negative-space-97077.jpg

thumbnail_pexels-negative-space-97077.jpg

pexels-negative-space-97077.jpg

We'll be talking about Export All Your Video Data to .csv today! You'll be able to see: 
* **videoId** - the unique identifier for referencing the video in API calls
* **title** - the title of the video
* **publishedAt** - when a video was published, in ISO-8601 format
* **iframe code** - the code for embedding your video as an iframe 
* **thumbnail** - the thumbnail image for the video if one was set 
* **mp4Support** - the URL for the mp4 of the video if one is available
* **metadata** - all key value pairs you set to describe the video (if you didn't set any you won't have them) 

You can check out the API reference documentation for listing videos, which is what we'll use to export our content to a .csv file. The API reference content is here: [List all videos](https://docs.api.video/reference/list-videos) 

You can use the videoId to associate the video with a custom player you created. 

Now that you know what kind of data you'll receive, let's get started! 

## Prerequisites

For this project you'll need:

* PHP 5.4 or greater with the command-line interface (CLI) and JSON extension installed
* The [Composer](https://getcomposer.org/) dependency management tool (or another way to manage your dependency management). See the Composer website for installation options.
* A GitHub account
* An api.video [account](https://dashboard.api.video/register)
* Your API key for either production or sandbox 

## Installation 

1. Navigate to the [Helpful PHP Scripts](https://github.com/apivideo/helpful-scripts) repository. 
2. Click **Code** and from the drop-down click **Download ZIP**. (You can also install from the CLI if you prefer.)
3. Put the contents of your new .zip file in a folder you want to work from.
4. Navigate to the folder containing the contents of your zip file in the terminal.
5. In the terminal, type: ```composer require api-video/php-sdk```

## Try the Script

1. In the terminal, type ```php create_csv.php```
2. You're asked what environment you want to use, prod or sandbox. For our walkthrough, choose **prod**. NOTE: You should choose the environment you have videos for. If you choose one of these environments and don't have videos stored there, you won't get any data to review.
3. Provide your API key. You can get this by navigating to [my.api.video](https://dashboard.api.video) and copying the appropriate key.
4. Your .csv file will build and be output to **project_details.csv**. 

You can also view the documentation for listing all videos in our API reference content here: [List all videos](https://docs.api.video/reference/list-videos)
Thanks for checking out our latest installment of Helpful PHP scripts! If you have any question or suggestions, please share them on our [community forum](https://community.api.video/). 


<a href="https://www.pexels.com/photo/office-working-app-computer-97077/">Photo by Negative Space from Pexels</a>

Helpful PHP scripts Pt. 3 - Export all your video details to a .csv file

doug.jpg

twitter-brands.svg

Doug Twitter

Doug Sillars

Video trends

Apps like Snapchat and Instagram have "video stories" where the videos are visible for 24 hours, and then disappear.  Stories are a great way to keep engagement, and have users regularly check in (so they do not miss a story).

In this post, we'll walk through a demo application that mimics the "story" framework.  You'll see how you can easily implement a feature like stories with [api.video](https://api.video).

Our sample code is on [Github](https://github.com/dougsillars/storyifyAVideo) - and you can launch youer own with just an api.video API token.



## storyify.a.video

We've build a demo application at [storyify.a.video](https://storyify.a.video) that will display videos that fit our "Story" parameters.

To start, we need to identify the videos we want to appear in our story timeline.  In your app, you'd probably ID this by a username or groupname, either from your [dyanamic metadata](https://api.video/blog/tutorials/dynamic-metadata) or perhaps with a [tag](https://api.video/blog/video-trends/video-tags-can-make-your-app-awesome-here-s-how-to-use-them). If you want to see the API reference content for this project, you can view the [List all videos](https://docs.api.video/reference/list-videos) endpoint documentation.

In the demo app, I have 3 groups of videos that will appear:

1. Saved videos from [watch.a.video/broadcast](https://watch.a.video/broadcast) livestream.
2. Saved videos from [livestream.a.video](https://livestream.a.video) stream.
3. The Tutorial videos from [a.video](https://a.video). All of these tutorials are tagged with the "avideo" tag.

In practice, you're most likely to use a tagging method to sort your stories. However, we don't publish a new tutorial video daily, so it does not work well with the demo (on the other hand, the livestreams almost always have one or more video saved a day).

You can also set the period for the story. Like Instagram and Snapchat, we've set this value to 24 hours.

large_screenshot-2021-01-21-at-12-06-34.png

medium_screenshot-2021-01-21-at-12-06-34.png

small_screenshot-2021-01-21-at-12-06-34.png

thumbnail_screenshot-2021-01-21-at-12-06-34.png

screenshot-2021-01-21-at-12-06-34.png


## Determining the videos to display

On submittal of this form, the data appears on the NodeJS backend.  This code is available on [Github](https://github.com/dougsillars/storyifyAVideo)

```
	var currentTime = new Date();
	
	//get the values from the form to figure out which stream, and for how far backwards 
	if(req.query.hours){
		hours = req.query.hours;
	}
	if(req.query.chooseStory){
		videoStream = req.query.chooseStory;
	}
	//we need to convert hours to ms, 3600s in an hour, 1000ms in a sec
	var hoursInMs = hours*3600*1000
	var earliestTime = new Date(currentTime - hoursInMs);
```

First we retrieve the current time on the server (currentTime).  We then extract the number of hours, and the story chosen from the form.

Since time is measured in ms since 1970, we convert the hours our story will stay live to milliseconds, and then do a difference from the currentTime to find the beginning time for our story timeframe.

## Search for videos

Now we can search for videos that fit these parameters. Our sample apps backend is Node, so we can use the [NodeJS SDK](https://docs.api.video/docs/nodejs-sdk) video search.  We'll modify the search parameters based on the story type selected by the user on the form

```
const client = new apiVideo.Client({ apiKey: apiVideoKey });
if (videoStream==="piLivestream"){
		// pi livestream saved videos
		 searchParameters = {currentPage: 1, pageSize: 25, sortBy: 'publishedAt', sortOrder: 'desc', liveStreamId: 'liEJzHaTzuWTSWilgL0MSJ9'};
	}
	else if (videoStream==="foreheads"){
		// livestream a video saved videos
		//"foreheads" is a joke - most of the thumbnails are of someone's forehead
		searchParameters = {currentPage: 1, pageSize: 25, sortBy: 'publishedAt', sortOrder: 'desc', liveStreamId: 'li400mYKSgQ6xs7taUeSaEKr'};

	}else if (videoStream==="tutorials"){
		//these are video tutorials for a.video
		//tagged 'avideo'
		searchParameters= {currentPage: 1, pageSize: 25, sortBy: 'publishedAt', sortOrder: 'desc', tags: ['avideo']};

	}
```

The search parameters is a JSON list of the parameters to search over:
1. We cannot search by timeframe, so I am making a guess that there will not be over 25 stories in the timeframe.
2. Videos are sorted by publishedAt, with newest videos first.
3. we use either the liveStreamId, or tags attribute to refine the videos to the ones we want.

Now we are ready to make our query:

```
let result =client.videos.search(searchParameters);	
	result.then(function(videoList){
		//25 most recent stories
		console.log(videoList);
		
		//let's get the ones that fit inside the "story lifetime"
		var validStories=[];
		for (var i=0;i<videoList.length;i++){
			var publishDate = new Date(videoList[i].publishedAt);
			//console.log("published", publishDate);
			if(publishDate > earliestTime){
				//any videos that match this are valid to display
				//grab the title and the iframe url
				console.log("published", publishDate);
				var iframe = "iframe src=\""+videoList[i].assets.player+"\" width=\"50%\" height=\"25%\" frameborder=\"0\" scrolling=\"no\" allowfullscreen=\true\"";
				var name = videoList[i].title;

				var data = {
					"name": name, 
					"iframe":iframe,
					"published":publishDate
				};
				validStories.push(data);
			}
		}
		//ow we have all the videos
		//send them to the webpage
		console.log(validStories);
		return res.render('story', {hours, validStories});

		
		}).catch((err) => {
			console.log(err);
		});

```

The videoList array will have the most recent 25 videos that fit our filters.  We can then loop through this list, and only look for videos where the publishedAt date is greater than the earliestTime (the earliest allowed story).

For all videos that meet the story timeline criteria, we create an iframe to display the video, the created time and the title of the video.  We return this array to the webpage, where the videos are listed (with their name and created date.

Here is a screenshot from my park livestream "stories"



large_screenshot-2021-01-28-at-14-33-36.jpg

medium_screenshot-2021-01-28-at-14-33-36.jpg

small_screenshot-2021-01-28-at-14-33-36.jpg

thumbnail_screenshot-2021-01-28-at-14-33-36.jpg

screenshot-2021-01-28-at-14-33-36.jpg

In the last 24 hours, there were 9 videos posted to the park livestream.

## Conclusion

The idea of videos that "expire" after a certain amount of time, much like video stories in Instagram or Snapchat, can easily be enabled in your api.video based application.  Using the example at [storyify.a.video](https://storyify.a.video), and the sample code on [Github](https://github.com/dougsillars/storyifyAVideo), can help you get started with your video story plan.

Have you implemented something similar?  Drop a link in our [community forum](https://community.api.video).  We've love to see what you came up with, and if you had any challenges.

medium_24hoursneonsign-7436556656.jpg

small_24hoursneonsign-7436556656.jpg

thumbnail_24hoursneonsign-7436556656.jpg

24hoursneonsign-7436556656.jpg

Creating video "stories"

Live stream status

With your api.video livestream you can have video streaming out to the internet in no time. (If you don't have an api.video livestream yet, here's how to [create a livestream](https://api.video/blog/tutorials/live-stream-tutorial).)[](https://) We have demos on how to stream with your [browser](https://api.video/blog/tutorials/live-stream-tutorial/), [Zoom](https://api.video/blog/video-trends/start-remote-work-with-online-video-and-zoom-us), [OBS](https://api.video/blog/tutorials/live-stream-tutorial), with a [Raspberry Pi](https://api.video/blog/tutorials/video-streaming-with-a-raspberry-pi), and you can expect more tutorials in the future!  Every stream that you create has a player that can be embeded on any webpage.  

In this post, we'll create a very simple webpage to host your livestream using NodeJS. This page will show the current livestream (if it is broadcasting), and a few recent recordings from the stream.



## Is the Stream Broadcasting?

When you request the [live stream status](https://docs.api.video/reference#get_live-streams-livestreamid) API endpoint, you'll receive a JSON response with a lot of details about your stream.

Here the response from the live stream:

```json
{
  liveStreamId: 'li400mYKSgQ6xs7taUeSaE',
  streamKey: '30087931-229e-42cf-b5f9',
  name: 'Live Stream',
  record: true,
  broadcasting: false,
  assets: {
    iframe: '<iframe src="https://embed.api.video/live/li400mYKSgQ6xs7taUeSaE" width="100%" height="100%" frameborder="0" scrolling="no" allowfullscreen="true"></iframe>',
    player: 'https://embed.api.video/live/li400mYKSgQ6xs7taUeSaE',
    hls: 'https://live.api.video/li400mYKSgQ6xs7taUeSaE.m3u8',
    thumbnail: 'https://cdn.api.video/live/li400mYKSgQ6xs7taUeSaE/thumbnail.jpg'
  }
}
```


You'll notice the broadcasting parameter.  If this value is true - the stream is live! At the moment I made this request, the livestream was not active.

Our Node application calls the live status, and if the stream is broadcasting, the site is served an iframe with the video, and if not, we serve the thumbnail image:

```
		if(broadcasting){
			liveResult = "Here is your Live Video:";
			videoIframe = "iframe src=\""+liveStream.assets.player+"#autoplay\" width=\"100%\" height=\"50%\" frameborder=\"0\" scrolling=\"no\" allowfullscreen=\true\"";
		}else{
			videoIframe = "img src ="+liveStream.assets.thumbnail +" width=\"100%\"";
		}

```

If you look closely, I don't use the exact iframe returned in the response. I build an iframe with the player url, and I add '#autoplay' to the end of the url. This tells the player to autoplay the video as soon as it loads.

## Video recordings

In the JSON response above, we also can make user of the "record" attribute.  If this parameter is set to true, the video is re-encoded as video on demand (VOD) when the livestream ends. These videos have a 'liveStreamId' parameter linking them back to the original livestream.

If we request the [video search](https://docs.api.video/reference#list-videos) endpoint with the livestreamId, we get a list of all the videos that have been saved from the stream.  In the below code, we sort by newest videos first, and save the first 5 (most recent) videos into an array. This array is used by Pug and Express to create a list of the videos.

```
	//Now we can get the most recent VOD from the stream.
		    let videoList = client.videos.search({'liveStreamId': liveStreamId, sortOrder: 'desc', sortBy: 'publishedAt'});
			videoList.then(function(liveStreamList){
				//console.log(liveStreamList);

				//loop through all the videos, we'll show 5, and if there are more than 20 - delete them
				
				for(i=0; i< liveStreamList.length; i++){
					if(i<5){
						var iframe = "iframe src=\""+liveStreamList[i].assets.player+"\" width=\"50%\" height=\"25%\" frameborder=\"0\" scrolling=\"no\" allowfullscreen=\true\"";
						var name = liveStreamList[i].title;
						var data = {
							"name": name, 
							"iframe":iframe
						};
						recordedVideos.push(data);
					}else if(i>20){
						//delete the videos...
						var videoId = liveStreamList[i].videoId;
						let deleteVid = client.videos.delete(videoId);
						deleteVid.then(function(statusCode) {
		  					console.log(videoId, "deleted");
		  					console.log(statusCode);
						}).catch(function(error) {
		  					console.error(error);
						});	
					}


				}
				//now we have an array with all the videos to show:
				console.log(recordedVideos);
				return res.render('live', {liveResult, videoIframe, recordedVideos});
			}).catch((err) => {
				console.log(err);
			});
```

NB the second part of this if/else.  If there are over 20 videos, we delete all of the oldest videos (ensuring there are never more than 20 stored in my account). This is my *super simplistic* approach to remove older recordings from my account, but is not unlike security systems that delete all videos over X days old.

That's it! Thank you for reading. 

How are you using live video in your projects?  We'd love to know - leave a note over on our [community forum](https://community.api.video). If you haven't created your api.video account yet, you can do that in just a few seconds [here](https://dashboard.api.video/register). 