Analytics

Normal

large_logo_avatar.webp

medium_logo_avatar.webp

small_logo_avatar.webp

thumbnail_logo_avatar.webp

logo_avatar.webp

api.video

large_api-video-blog-tutorials.png

medium_api-video-blog-tutorials.png

small_api-video-blog-tutorials.png

thumbnail_api-video-blog-tutorials.png

api-video-blog-tutorials.png

Tutorials

JavaScript

Understanding your audience is key to successful video and live stream content delivery. Whether you deliver your own content, or develop a mobile app which enables creatives to deliver their own, leveraging data and analytics can help you. With api.video's [Analytics solution](https://docs.api.video/analytics/overview), you gain vital insights into the viewers’ preferences and behaviors, enabling you or your users to make data-informed decisions in content creation, and engage better with the audience.

&nbsp;

**In this tutorial, we’ll go through two methods that you can use to retrieve analytics data for your videos and live streams.**

## What data?

The mainspring of api.video’s Analytics solution are **viewer events**. Metrics are generated every time a member of your audience engages with your video or live stream.

&nbsp;

There is a wide selection of available **metrics**, enabling you to measure user interaction in a variety of dimensions. Metrics can help you count: 

&nbsp;

- `play`: the number of times your content has been played,
- `impression`: the number of times your content has been loaded and was ready for playback,
- `play-total`: the total number of times a specific content has been played,
- `play-rate`: the ratio that calculates the number of plays your content receives divided by its impressions,
- `start`: the number of times playback was started,
- `end`: the number of times playback has ended with the content watch until the end,
- `impression-time`: the time in milliseconds that your content was loading for until the first video frame is displayed,
- `watch-time`: the cumulative time in seconds that the user has spent watching your content.

&nbsp;

You can define the way you want to see these metrics, using aggregations like `count`, `total`, `average`, and `sum`.

&nbsp;

Depending on the data you are viewing, api.video’s analytics solution can help you group interaction data by these **dimensions**:

&nbsp; 

- the date and time of the viewer event,
- the ID of a specific video or live stream that generated events
- the countries where your viewers are based,
- the device type your viewers are using, like `phone` or `computer`
- the browser your viewers are using, like `Chrome` or `Firefox`
- the operating system that your users are running, like `iOS` or `Windows`
- the [tags](https://docs.api.video/vod/tags-metadata) used on a video.

&nbsp;
 
api.video helps you read and filter this data, enabling you to segment and understand your audience better.

## Requirements

Before we discuss the two methods, let’s talk about some requirements. api.video can only generate analytics data when you meet these simple requirements:

&nbsp;

1. You have already uploaded a video or are broadcasting a live streams.
2. These videos or live streams already had viewers that create interaction events.
3. You use the api.video player to deliver your content. You will meet this requirement when you integrate one of [api.video’s Player SDKs](https://docs.api.video/sdks/player), or embed the video or the live stream into a website, or simply share the video or live stream URL with your viewers.

large_Blog_illustration_analytics.png

medium_Blog_illustration_analytics.png

small_Blog_illustration_analytics.png

thumbnail_Blog_illustration_analytics.png

Blog_illustration_analytics.png

You can also use a different player solution, however, you will need to integrate api.video’s [analytics plug-ins](https://docs.api.video/sdks/player#player-analytics-sdks), which are available for [hls.js](https://github.com/apivideo/api.video-hlsjs-analytics), [video.js,](https://github.com/apivideo/api.video-videojs-analytics) [Android](https://github.com/apivideo/api.video-android-player-analytics), and [iOS](https://github.com/apivideo/api.video-swift-player-analytics).

&nbsp;

Once you fulfill these requirements, you’ll immediately be able to retrieve analytics using both methods discussed in this tutorial.

&nbsp;

*Note that when using api.video’s **Sandbox environment**, the extent of data that you can retrieve is limited to the last 24 hours.*

## The no-code way

By far the easiest method to get analytics for your videos and live streams is through the [Analytics page in the api.video dashboard](https://dashboard.api.video/analytics). The dashboard shows the number of play events grouped by some of the most useful dimensions that can help you answer questions like:

&nbsp;

- Which videos or live streams are the most popular this week?
- What time of the day is your content most engaging?
- Which country are most of your viewers based in?
- Which devices, browsers, and operating systems are viewers using the most?

## The integrated way

For those that prefer a more hands-on approach, we’ll dive into how you can leverage our API to retrieve analytics data and build out some typical Analytics use cases.

&nbsp;

api.video offers 3 dedicated API endpoints that you can use to programmatically retrieve data about your content:

&nbsp;

- [`/data/metrics/{metric}/{aggregation}`](https://docs.api.video/reference/api/Analytics#retrieve-aggregated-metrics) to retrieve aggregated metrics,
- [`/data/buckets/{metric}/{breakdown}`](https://docs.api.video/reference/api/Analytics#retrieve-metrics-in-a-breakdown-of-dimensions) to retrieve metrics in a breakdown of dimensions,
- [`/data/timeseries/{metric}`](https://docs.api.video/reference/api/Analytics#retrieve-metrics-over-time) to retrieve metrics over time.

&nbsp;

Visit the **[API reference](https://docs.api.video/reference/api/Analytics)** for details about the Analytics API, including request parameters and sample responses.

### 1. Set up the **api.video client**

Let's initialize the [api.video client SDK](https://docs.api.video/sdks/api-clients) in your environment, using an example **in Node.js**:

### 2. Create a request

The client SDK will require your API key, which you can find [in the dashboard](https://dashboard.api.video/project-settings/api-keys). Check out the [Authentication guide](https://docs.api.video/reference/authentication-guide) if you want to understand the different authentication methods you can use with api.video.

&nbsp;

Let’s say you want to know **the number of plays your French audience members have created over 5 days.**

&nbsp;

To get this data, use the [`/data/buckets/{metric}/{breakdown}`](https://docs.api.video/reference/api/Analytics#retrieve-metrics-in-a-breakdown-of-dimensions) endpoint.

Notice that we’re passing the `from` and `to` parameters to define a timeframe. We set the `play` metric to see the number of times your content has been played. We’re also using the `country` dimension, which groups data based on countries your viewers are from. We can then filter the data set using the `filterBy` parameter, with the specific country you are interested in: `FR`.

&nbsp;

Here’s an example response payload for this request:

In the response, `metricValue` shows the value we wanted to see, and `dimensionValue` shows the country we filtered for.

&nbsp;

Now let’s try a different approach. Maybe you updated your app to speed things up. Let's see some functional performance and retrieve **the average time in milliseconds that your content was loading for until the first video frame is displayed**.

&nbsp;

To get this data, use the [`/data/metrics/{metric}/{aggregation}`](https://docs.api.video/reference/api/Analytics#retrieve-aggregated-metrics) endpoint.

Again, we’re passing the `from` and `to` parameters to define a timeframe. One month should be enough. We set the `impression-time` metric to see the load times, with the `average` aggregation.

&nbsp;

Here’s an example response payload for this request:

Check out the **complete list of dimensions** and **example response payloads** for both success and error cases in [the API reference](https://docs.api.video/reference/api/Analytics).

### 3. How to use this data?

When building an application or website where you serve videos or live streams, you can find some creative ways to leverage analytics data:

&nbsp;

- Create **data visualizations** for your users. This could include graphs and charts showing views over time, peak viewing periods, or geographic distribution of the audience.
-  **Localize Content.** Use geographic data from play events to tailor content to specific regions, accommodating regional preferences or languages.
- **Create recommendations**. Find the most popular, or even the least popular videos and show them as recommended videos for your viewers.

## Conclusion

With api.video’s Analytics solution, you're not only delivering content; you're unlocking a world of data that helps you connect more meaningfully with your audience. Whether you're aiming to expand your reach, tailor content to specific regions, or simply understand your audience better, api.video’s Analytics is your gateway to smarter content strategy.

&nbsp;

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

How api.video’s Analytics can help you enhance your content strategy

api.video Analytics helps you enhance your content strategy

small_Blog_Analytics.png

thumbnail_Blog_Analytics.png

Blog_Analytics.png

If you want to advertise on a budget, it's easier when you know where your content is already succeeding. With api.video's analytics, you can see what cities and countries viewers are visiting your site from. This kind of information can give you a general sense of where you might want to spend (or not spend) your advertising dollars. 

You could view your data in a list, but it might be faster if you represented the data visually with something like a map that shows viewer density per city. Today, we're going to use OpenLayers, Observable, and api.video's data analytics for a demo account to retrieve what we need to plot all the cities viewers watch live streams from on a map. We'll represent how many sessions (viewers) there are per city with a circle that has a bigger circumference if there's more viewers, and a smaller one if there's less viewers. We won't fill in the circles so we can see markers for all overlapping cities. 

Let's start mapping! 

A map showing viewer density per city using api.video data, Observable, Geocoding, and Open Layers

apivideomapmarkerslivestream.jpg

## Prerequisites 
For this tutorial, you'll need: 

* api.video account - [Sign up for api.video here](https://api.video).
* Observable account
* OpenCage Geocoding API account 
* requests, csv, pycountry, opencage, and pandas libraries for Python 

If you don't know JavaScript, or the version of it that Observable's using, you don't have to. This tutorial will explain how to configure your map in a way where you don't have to know the JavaScript. If there's interest in having the JavaScript content explained more, let us know in our [community forum](https://community.api.video)! We can explain everything in a future post. 

## Build Your Data File 
In this section, we'll create the data file we want to use with our map. The code sample will: 

* Authenticate with the api.video API.
* Retrieve a list of all our live streams.
* Retrieve all sessions for each live stream and for each session, create a dictionary containing the live stream title, the session ID for the session, the city, the country, and we'll also add the latitude and longitude coordinates using the OpenCage Geocoding API.
* Write each dictionary to a line in a csv file that we can then use in a pandas dataframe. 

Here's the code:

In the code we choose to use 'open with' to open the csv file we'll write to, because this method will close the file for us when it's done writing everything. We also use the dictionary writing feature of the csv module for Python. This allows us to create a header row listing all the columns we want. We can then create a dictionary where every key matches a column title. Whatever we set as the value will be written to the csv file as a row. 

We add latitude and longitude for every city in our file, and then we output to the file ls_session_data.csv. The next step is to add our CSV file to a pandas dataframe. 

## Create a Dataframe With Your CSV File 
We convert our brand new CSV file to pandas so we can manipulate the data. There are other ways you can do this, but once you have the hang of pandas, you can do a lot with it. 

Here's the code for moving our csv file to pandas, grouping everything and then outputting it back to a csv file we call 'country_lat_lon.csv:

Now we're ready to build our map. 

## Configure Observable 
In this section, we walk through how to get your map set up on Observable. If you haven't done so, sign up for an Observable account. Then do the following: 

1. Navigate to our Observable notebook [Where api.video Live Streams Are Watched](https://observablehq.com/@erikkai/where-api-video-live-streams-are-watched). 
2. Click the three dots in the upper right corner. A menu opens. 
3. From the menu, choose **Fork**. Now you have your own copy of the map to edit and play around with. 
4. Click the three dots in the upper right corner again and choose **File attachments**. 
5. Delete the existing copy of **country_lat_lon.csv** and upload your copy. Don't try to upload expecting an overwrite - it will add a 1 at the end of your file. Then you will have to tweak the file name in the code. (Where you do that is explained in the Observable notebook if you decide to go that route instead.) 
6. Make sure your data is loaded. You can check if anything needs an update by looking for a solid blue triangle in the upper right corner of the cells on this page. Click any you see. 
7. Your map should display, showing viewer density by city through the size of the circle used as a marker.

## Tweaking Observable and OpenLayers
You can tweak this map lots of different ways, or go back to the one it's forked from and tweak that instead. Some suggestions for areas to try changing things: 

1. Go to the Set the Center section. The array listed shows a pair of coordinates that are longitude, then latitude. If you change these, you can change the center the map starts out with. 
2. Go to the Define vectorSource, Programmatically Add Markers section. In the block of code that starts **data.forEach** you can change how big or small the circles are by changing what you multiply Count by. This creates the radius of your circle. 
3. Go to the Add Your Data section. If you click the three dots to the left of **data = Array(45)** you'll be able to see the import code. If you want you can use a different file name, or change the code to upload a different kind of file for use in the project (though that might have more effects on the rest of the code). 
4. You can see different types of markers you can add by looking at another user's post about using OpenLayers - [Fork of Openlayers to put some markers/features on](https://observablehq.com/@chonghorizons/fork-of-openlayers-to-put-some-markers-features-on). 

If you try a map, be sure to share it with us in our community forum! We'd love to see what you do with your data. 

Use api.video Analytics to mark viewer density with Observable

medium_apivideomapmarkerslivestream.jpg

small_apivideomapmarkerslivestream.jpg

thumbnail_apivideomapmarkerslivestream.jpg

Api.video Analytics: Add markers representing viewer density per city to a map with Observable

A great way to see at a glance how many viewers you have per country is with a choropleth map. It probably sounds like I'm talking about some weird kind of plant you've never heard of, but chances are you've looked at lots of choropleths before. It's a map that's used to represent statistical data by shading different geographical areas with different colors that represent a certain number of people, items, or whatever else. If you're still a little confused by that explanation, a picture is worth a thousand words, so here's an example of a choropleth map: 

examplechoroplethapivideo.jpg

The map we're displaying here shows you population density per square mile in the U.S. The value of a choropleth map, is you can quickly understand data. If you had to look at a list of density numbers by state, you might take extra time to scan and find the biggest numbers. With this example map you can see that the darker colors represent higher densities and the lighter colors represent lower densities. Armed with that knowledge you can easily see which states have the highest population densities by color. 

We can create the same kind of map for api.video! In this tutorial, we'll talk about grabbing the data you'll need, and then how to use it with Observable to turn it into a map. 

## Prerequisites
For this tutorial, you'll need:
* api.video - [Sign up here](https://api.video).
* Observable account - [Sign up here](https://observablehq.com).
* requests, csv, pycountry, and pandas libraries for Python 

Let's start coding! 

## Retrieving Analytics Data
There are lots of ways to retrieve analytics data, so while we'll post a code sample here, you may want to change it for your data. Some tips to keep in mind are: 

* Take a look at a JSON response for analytics before building anything to grab the data. You can see responses here - [Tips for Working with api.video Analytics Data](https://api.video/blog/tutorials/tips-for-working-with-api-video-analytics-data/). You can also figure out how you want to design everything. 
* For Python samples, if you know you have a lot of videos, livestreams, and/or sessions, you will need to handle pagination yourself. 
* If you know what you want to do to start with, you can retrieve just that data. We added a few extra things for reference, but otherwise pared down the available data.
* Decide how often you want to update your data. 

To keep things simple, this time we're just pulling the data and writing it to a CSV file. In future tutorials, we'll learn how to create a database that periodically updates itself with your analytics data. 

Here's the code we used to: 

* Get all the analytics data and flatten the JSON. Flattening JSON means taking it out of its nested structure, so each set of information about a video, livestream or a session fits into one row of data. 
* Add the three letter country code for every country. If one can't be retrieved because the country is unknown, add '---.' 
* If the city or country isn't known, put 'unknown.'
* Add the title to a video or live stream for our reference when reviewing the csv
* Add the assetID and sessionID for our reference when reviewing the csv
* Write a row to a csv file for each session

If you don't like what we choose to extract, you can add or remove by tweaking the code. 

We will be using the file we generate to create the choropleth.

After you run the code sample, you should have a csv file that contains details about all of your video and live stream sessions. It takes awhile to run if you have a lot of data, so if it seems like it's stuck, it's not. It can take upwards of 15 minutes if you have lots of data to crunch through. Take a break or work on something else while everything is retrieved. 

## Add Your CSV to a Pandas DataFrame
The next step is to take your CSV file and convert it into a pandas dataframe. Pandas is a software library used for data science activities. It makes it easier to do a lot of time consuming, repetitive tasks you need to do with data like cleansing, performing mathematical operations on columns, filling information in, removing data, inspecting it, and lots more. It also has a steep learning curve, but don't worry if you've never used it, we're providing a code snippet for working with it. 

In this code snippet, we create a dataframe in pandas. Then we drop everything and grooup information so we get a table in CSV format with two columns: ISO_A3 and Count. That's all we need for our map! If you need to get the data back, it's still in your CSV file and you can use it in pandas to group information however you want. 

We're going to use this new csv file- 'choro.csv'- to build our choropleth. 

## Configure Your Choropleth in Observable
Here's where we walk through using Observable. We're going to switch over to using something similar to JavaScript. Most of it's set up for you, and the sample map we've created will show you where your data goes. 

1. Navigate to Observable and log in (or sign up if you didn't already). 
2. Navigate to my [sample choropleth](https://observablehq.com/@erikkai/viewers-of-my-videos-and-live-streams-around-the-world) (built from Mike Bostock's cool [Hospital Beds](https://observablehq.com/@mbostock/hospital-beds) choropleth).



choropleth, apivide, api.video, data analytics

choroplethapivideo.jpg

3. Get the final CSV file generated with the instructions (for Python) - 'choro.csv'
4. Click the three dots in the upper right corner. Click **Fork**. You want to do it this way, so you get this version of the file and not the original hospital beds map. We've tweaked a couple of things, and if you don't want to do tweaks yourself and instead see everything work as described, you want to fork this project.
5. Click the three dots again. Click **File attachments**. You'll open an upload panel.
6. Click **Upload**.
7. Browse for your copy of '**choro.csv**' and upload it.
8. Run everything, it should work and show you a map. Based on how many viewers you have, this implementation will automatically divide everything into colors on the scale displayed at the top.

You can make your own version of the map and then publish a notebook that you can share anywhere, showing off a beautiful map of where you have the most viewers! 

 Build a Choropleth Map with api.video Analytics

medium_choroplethapivideo.jpg

small_choroplethapivideo.jpg

thumbnail_choroplethapivideo.jpg

Api.video Analytics: Build a Choropleth Map (and find out what one is)

Video analytics can tell you a lot about how people are watching your video, especially if you decide to dig into player sessions. With api.video's [analytics endpoint](https://docs.api.video/reference/api/Analytics) you can figure out details like where people fast forward, or rewind your video. This information can be used to help you determine things like:
* Whether something is confusing or boring
* Whether something is interesting or entertaining

...and more! 

For this article, I decided to pull analytics for a popular api.video demo called [Upload a video to Discord](https://a.video/works/upload-a-video-to-discord). 

## Pull Analytics Data for a Video
If you know what video you want to pull analytics for, it's pretty easy to grab this information: 

1. Open your dashboard by clicking **Login** on the [api.video](https://api.video) homepage and logging in if you are not logged in to api.video. 
2. Navigate to [your dashboard](https://dashboard.api.video/).
3. Click on the video you want analytics data for. 
4. On the video's page, there's a copy link section that will contain a video link. It will look something like: `https://embed.api.video/vod/vi5PBib80QrC8q73AekJqNDH`. Get the videoId, which is the part that comes after **vod/**. 

NOTE: You could also collect this information programmatically. To do that, you'd send a request to the [videos](https://docs.api.video/reference/api/Videos#list-all-video-objects) endpoint. You'd look through the list returned, pull the videoId for the one you wanted, and continue on. 

5. After you have your videoId, you're going to want to retrieve an exhaustive list of player sessions for your video. The code for that is: 

For our data file, for each row we list the sessionID, what type of action was taken, when the session with the video first started (emitted at), and then three columns - at, from, and to. Some of the action types don't use some of these last three columns.

## Get Familiar with Your Data
Now that you have your csv file containing all the sessions for the video you selected, it's time to start thinking about how to analyze it. You can see a lot of interesting information: 
* pause - when someone pauses a video 
* resume - when someone resumes a video
* ready - when the video is at the start position
* play - when someone starts the video
* end - when someone watches to the end of the video
* seek.backward - when the video winds backward
* seek.forward - when the video winds forward

In our table, a sample row for each will look like: 

pause
`-sessionID-, pause, 2021-02-25T09:57:14+00:00, 45, not, not` 

What we can see from this sample row, is that someone paused their video 45 seconds in. If the row right after pause isn't resume, we can check if the sessionID is different. If it is, we can be sure that whoever was watching the video, stopped watching at 45 seconds. Who would do such a thing? There's an extra 5 seconds of video after that! As it turns out, if you watch the video here: [https://a.video/works/upload-a-video-to-discord](https://a.video/works/upload-a-video-to-discord) you can see that by 45 seconds, Doug successfully completed the task he's teaching with the demo. The video runs on Discord. If you were satisfied with the demo, you might pause the video and then leave, or close the tab (which would count as a pause to api.video's analytics). 

resume
`-sessionID-, resume, 2021-02-25T18:10:28+00:00, 25, not, not` 

The resume action will usually occur right after pause, or after a seek.forward or seek.backward action. This action is anytime the video is stopped, and you press play. If your video is at the very start, clicking play doesn't register as a resume. 

ready
`-sessionID-, ready, 2021-02-25T14:48:49+00:00, 0, not, not` 

Ready appears when you open the video and you haven't started playing it yet. If you see ready and then you see a different sessionID, you know the user reached the video, then decided for some reason not to play it. You will need other contextual data to guess why that might be.

play
`-sessionID-, play, 2021-02-25T18:10:20+00:00, 0, not, not`

The play action occurs at the start of the video, when the user presses play. This can be a useful event to check for since if you don't find it in a session, you can be sure the user didn't start the video. 

end 
`-sessionID-, end, 2021-02-27T17:30:18+00:00, 50, not, not`

The end action indicates that the user watched the video to the very end. This can be useful if you want to filter through sessions to see what percentage of sessions reach the very end of the video. 

seek.backward
`-sessionID-, seek.backward, 2021-02-27T14:53:02+00:00, not, 35, 29`

Something to watch for is where users wind back. If you're teaching them something, they might be winding back because they don't understand a concept, or they can't clearly see something in the video. They could also wind something back because it's interesting, or they weren't paying attention and need to rewatch it. 

seek.forward
`-sessionID-, seek.forward, 2021-02-26T09:52:56+00:00, not, 29, 38`

Seeking forward can mean a lot of things. If you've made an instructional video, a user could seek forward to surf through the video and see if they can find the information they need more quickly. They could seek forward because a concept was well explained, and they're ready for the next concept or step. It could also be because they feel bored. It will depend on the video and your analysis of the content vs. the behavior. 

## Grooming the Data
To do find patterns in your data, you can start trying to filter it to see if you find something. Here's a few ideas I started with: 

* See if there's anything repetitive that stands out when I scroll through the csv that gives me ideas. 
* See if there's anything weird that stands out. 

NOTE: Obviously looking at a table of data when there's tons of entries isn't the best way to review your information. It's a starting point that acquaints you with what it looks like and what you have. You should always make sure to come up with questions to investigate where you can filter content to answer them or visualize your content. 

* Come up with ways to filter things that might display a pattern. This would be where you ask questions like, how often do people seek backwards or forwards? What do they seek backwards and forwards across the most? 
* Come up with ways to count things that might yield interesting information. For example, how many sessions are there where people watch the video all the way to the end? 

### Browsing the Data
As luck would have it, when I started browsing the data I did notice something I thought was odd. There were a lot of instances where it looked like a user wound the video back from the very end to the very beginning. The lines of data looked something like this: 

`-sessionID-, seek.backward, 2021-02-28T15:49:44+00:00, not, 50, 0`

Why, I wondered, would a user want to rewind all the way to the beginning? Examining the data, I noticed something else- the seek.backward like this happened after the end event in the same session.

`-sessionID-, end, 2021-02-28T15:48:42+00:00, 50, not, not`

I checked and discovered the player for this project is set on loop. I didn't know before, but now know that if your player is looping, the loop is shown as two events - first, end. Second, seek.backward to 0. Instances where I found this in the data were spots where someone left the video running and it just looped around again. 

### Filtering the Data
To filter the data, I decided to start with an easy question. Out of the total number of sessions I pulled, how many sessions did a user watch the video all the way to the end? 

NOTE: You need to have pandas installed in your Python environment.

videoanalyticsapivideo.png

From this data, we get answers to questions I have not asked yet! Starting with the first question, what percentage of users watch all the way to the end? To answer this, we must figure out how many sessions we have total. That's easy - we know that 'ready' only occurs once per session, and indicates that a video is ready to be played. From our chart, we can see we have 725 instances of ready. So that means 

Answer: 25.5% of users! That's great. Especially because in an instructional video, people often learn the concept, and leave immediately. The end of this video is an interesting shot of bells chiming in a church, which 25% of viewers liked enough to stay for, even though it could be argued that you learn everything you need about this demo by about the 42 second mark - where you see the video successfully play on Discord. I would interpret this statistic as an indication that the content is educational and entertaining. 

We also learn something that might seem a little strange, we have 725 sessions, but of those 725 sessions, people only played the video 582 times. That means about 80.28% of users watch the video, but about 19.72% don't. That might seem weird - who goes to a page to see a demo then says nope nevermind? A possible answer lies in the page the video is shown on. Here's an image for you: 


discorddemoapivideo.png

So we can see the video here, but check out the choices we offer below the video - Blog Post and Github. As you may know, some developers don't want to read blog posts or watch videos. They just want a code sample. So a possibility is they come here for the demo, then they see we offer the code, decide that's what they prefer, and away they go! 

What I could maybe be looking at here is the answer to the question 'What percentage of developers prefer a code sample to a written tutorial or demo?' (specifically for our company, don't quote me on this one). I could pull more of api.video's demo analytics and see if the percentage stays consistent across the demos. With a tool like HotJar, I could figure out if we have a lot of users that immediately click on that GitHub link or not, and start building a case for my hypothesis, or disproving it.

Because we're creating educational content, I could maybe use the ~20% statistic to make a case for always including code samples for our demos on github. You could use this information other ways too. If your video was a movie or a short film for example, you might want more people to watch the video than 80%. Maybe it would lead you to test other page designs, or changing the thumbnail for your video to make it more interesting to everyone. 

Okay well this was fun. Let's try some more filtering and a little bit of visualizing. 

### Visualizing the Data
There are lots of ways to visualize your data. For this post, I decided to keep it simple, and use a graph you can create with plotly. But before we get to the tools, how about the question? I decided to plot all instances where somebody is seeking forward or backward. 

For my first try, I thought, why not use the index to plot each instance of winding forward and backward, and I'll use colors. I narrowed my data down to just rows that contained seek.forward or seek.backward. Here was my code:

In the sample, I take all the master file with all my sessions for this video, and then I choose only rows that contain seek in the type. I output this into a new file 'discord_seek_sessions.csv'. 

Now it's time to try making some kind of chart. I went with something simple. I thought maybe I can use the index to represent separate events. Each event gets its own index marker. It came out like this: 

bekindrewindapivideo.png

There's a lot going on. There's so many entries, they scroll off the top and bottom right side of the page. If it's not clear, the legend on the right represents the time interval in seconds someone used seek.forward or seek.backward. The line represents the color that will be displayed in the graph. On the graph, across the bottom you can see the time in seconds. Up the left side, is the index that went with the event displayed. 

Let's make this better. The first thing I tried, was regrouping everything. I gave a unique index to anything with the same session ID and seek direction. That way each session would have two bands where you could see the lines. It didn't improve the chart's clarity, but the code for it is neat and will help us later, so I'm going to share that for you here: 

If you ever need to assign an index value based on a group, this code will help you! But it didn't help with our situation. That led me to the next idea, what if I split the sessions into separate dataframes? or csv files, depending on how you prefer to do things? 

This yielded a bit more clarity. Also I chose to put the data into separate csv files, this is the code for that:

Checking out the different files in my chart, I used the groupby trick I just told you about. Because there is only one type of action per chart, it places every instance of a particular seeking action on one line. A little less busy, but not a big improvement. 

The next thing I thought of was going back and counting how popular it was to wind either forward or backward at any point in the video. The code for that is pretty simple, and I decided to use it for winding forward: 

Now it's getting interesting. What if I make a chart of the most popular place to forward.seek from? It looks like it's about 33 seconds into the video. (See?) 

forwardseekapivideo.png

Let's make the chart now! We can reuse some code from earlier, and filter for instances when from = 33. 

cleanedupdata.png

Why is seeking forward so popular here? If you watch the video, you'll note that this is the part where Doug walks through using Discord. If you are using the tutorial because you like Discord, it's possible some users are really familiar with Discord already. So during this section, they seek forward to find out what comes next. When it gets to where the video plays, 25% watch the video, everyone else says aha! I've learned how to do this now I will go implement what I've learned etc. 

You can repeat this process with other areas in your video. For example, in this video, there's high seek forward rates from around 15 seconds through to 22 seconds. In the video, this is the part where you wait for an upload to complete. If you were trying to optimize the video or edit it, you might make a case that part of this section could be edited out. 

While we're applying this to an educational demo, you could easily apply this kind of simple research to short films and movies. Find out where people fast forward to learn if a section of the film isn't working the way you planned. If someone keeps winding a section back to rewatch it, maybe it's because it's an incredible scene, and you can make sure to do more things a similar way in the future. 

Hope this was a fun start to analyzing your content! See you next time.

Using analytics to analyze where to edit a video

large_bekindrewindapivideo.png

medium_bekindrewindapivideo.png

small_bekindrewindapivideo.png

thumbnail_bekindrewindapivideo.png

Leverage api.video’s Analytics to enhance your content strategy

next.js

video api

api video plugin

large_img_8063-min-1.jpg

medium_img_8063-min-1.jpg

small_img_8063-min-1.jpg

thumbnail_img_8063-min-1.jpg

img_8063-min-1.jpg

github-brands.svg

GitHub Yohann

5a22d420c9a5a7-416105621512231968826.png

LinkedIn Yohann

Yohann Martzolff

Typescript

Next.js

React

No doubt, Next.js is one of the best React framework for full-stack web applications.

What if you want to create your own video application? A Next.js boilerplate with all [api.video](https://api.video) features is ready for you to begin your journey 🧑‍💻 

## What’s a boilerplate 🤔

A boilerplate is a unit of writing that can be reused without change. The idea is sometimes applied to reusable programming, and that’s the case here: our Next.js boilerplate is a starter pack containing all [api.video](https://api.video) features that anybody can use, without having to change anything in it to start a new project. 

Of course, you are free to modify anything once your application is running!

## What can I achieve with this boilerplate 🥇

After the boilerplate has been bootstrapped, you can run your brand-new application and enjoy [api.video](https://api.video) features!

Upload videos, display them as a list, and play any video in a fully customizable player.

[api.video](https://api.video) proposes many more endpoints to manage and create a complete video application.
Check [our documentation](https://docs.api.video/) to learn about this.

## Get started 🏁

Find out about ***[how to use our boilerplate](https://github.com/vercel/next.js/tree/canary/examples/with-apivideo)*** on the README file, or follow the guide bellow 👇 

1. Create a new Next.js application by running one of the following commands in a new terminal and following the command prompts.

2. Rename the `.env.local.example` file with `.env`.
3. Find your API key in the [api.video](https://api.video) dashboard [API keys section](https://dashboard.api.video/project-settings/api-keys) and add its value to the API_KEY environment variable in the `.env` file.

💡 If you don’t already have an api.video account, create a free one [here](https://dashboard.api.video/register).

4. Start your application by running `yarn dev` in your terminal, and voilà!

You should be able to see a basic sample app from where you can upload videos and see them as a list.

large_screenshot-2023-01-31-at-17-24-04.png

medium_screenshot-2023-01-31-at-17-24-04.png

small_screenshot-2023-01-31-at-17-24-04.png

thumbnail_screenshot-2023-01-31-at-17-24-04.png

api-video-next-js-boilerplate-preview.png

Everything in this application is set up to build a complete video application, from Next.js to api.video, enjoy coding! 

Find the full boilerplate in the official Next.js repository [right here](https://github.com/vercel/next.js/tree/canary/examples/with-apivideo).

Start your video project with api.video Next.js boilerplate

large_NextjsBoilerplate.png

medium_NextjsBoilerplate.png

small_NextjsBoilerplate.png

thumbnail_NextjsBoilerplate.png

NextjsBoilerplate.png

api.video Next.js boilerplate: start your video project the easy way

strapi

Github Mathieu Thiry

linkedin_logo_initials.png

LinkedIn Mathieu Thiry

Mathieu Thiry

[Strapi](https://strapi.io/) is a headless CMS used to develop websites, mobile applications, eCommerce sites, and APIs. Strapi allows you to create an API without knowing anything about backend development or databases. 

Today, we're pleased to announce our new plugin on the Strapi marketplace 🎊. A powerful, easy, and secure way to bring video content to your websites and applications using the Strapi interface. 

In this tutorial, we will focus on how to use the [api.video](https://api.video) plugin, and provide a basic example on how to integrate the api.video plugin into your project. 

## Install the api.video plugin for Strapi

Take a look at the following video which goes through the following:

* How to install the api.video uploader on your Strapi CMS with a few simple steps.
* How to add your api.video key to the Strapi CMS to connect your accounts.




You will need to have your instance of Strapi installed. If you haven’t installed a Strapi project yet follow this [guide](https://docs.strapi.io/dev-docs/quick-start). 

We are going to install the [api.video uploader](https://www.npmjs.com/package/@api.video/strapi-uploader-plugin) Strapi plugin in this step. Run the following command from within the project root of Strapi.

🎉 Congrats, the *api-video-uploader* plugin should appear in the **Plugins** section of Strapi sidebar after you run app again.

## Connect your api.video API Key

Before getting started, you will need to obtain an **API Key** which can be generated from the [api.video dashboard.](https://dashboard.api.video/)

On your Strapi dashboard, you will see the api.video uploader on the left side. Click on the api.video uploader and you will see the *Go to settings* button. Enter your API Key you have obtained on your api.video dashboard and copy it here. 

Now you are all set to upload your videos 🎖️

large_api-video-uploader-strapi.png

medium_api-video-uploader-strapi.png

small_api-video-uploader-strapi.png

thumbnail_api-video-uploader-strapi.png

api-video-uploader-strapi.png

## Manage and integrate your videos 

Take a look at the following video which goes through the following:

* How to add, update, and delete your videos on the api.video uploader in your Strapi CMS.
* How to integrate your videos into your application using the Postman application for testing.



## Upload your first video

As you can see, you have two options to add a video. Click any of the buttons, and a pop-up window will appear.

large_api-video-uploader-strapi-1.png

medium_api-video-uploader-strapi-1.png

small_api-video-uploader-strapi-1.png

thumbnail_api-video-uploader-strapi-1.png

api-video-uploader-strapi-1.png

You can choose to upload your video file by either clicking on the Select a video box or drag and drop your video file into the boxed area. As you can see, the video must have a title. Once you select a video and enter a title, you can go ahead and click the Upload button. Wow! You have just uploaded your first video 🎈

large_api-video-uploader-strapi-2.png

medium_api-video-uploader-strapi-2.png

small_api-video-uploader-strapi-2.png

thumbnail_api-video-uploader-strapi-2.png

api-video-uploader-strapi-2.png

Before clicking the *Upload* button, you can also add several video attributes that would help you or your business to organize and rank your videos in a more efficient way. You can write a description of the video, list a number of tags to categorize your video, and add metadata. 

By default, the metadata sends the value Strapi as upload source and can’t be deleted. However, you can add as many other metadata as needed.

medium_api-video-uploader-strapi-3.png

small_api-video-uploader-strapi-3.png

thumbnail_api-video-uploader-strapi-3.png

api-video-uploader-strapi-3.png

It’s worth mentioning that behind the scenes, it uses our home made [`typescript uploader`](https://github.com/apivideo/api.video-typescript-uploader) for fast uploading.

### Edit or delete your videos

You can edit and update your videos at any time. The information modified will be applied and visible on the Strapi dashboard. The delete option is available on the thumbnail.

### Configure the external resources**

large_api-video-uploader-strapi-4.png

medium_api-video-uploader-strapi-4.png

small_api-video-uploader-strapi-4.png

thumbnail_api-video-uploader-strapi-4.png

api-video-uploader-strapi-4.png

If you encounter an issue in visualising the thumbnail and the video like the image above, please add those 2 external resources `embed.api.video` and `cdn.api.video`. Modify the `middlewares.js` file like below:

## Permissions

With the Community Edition of [Strapi](https://strapi.io/), any user with the role of super administrator can configure and use the plugin.

With *Strapi Enterprise* the permissions can be fine tuned according to the role of the users. This is done in the **Roles** view in the **Administration Panel**.

large_api-video-uploader-strapi-5.png

medium_api-video-uploader-strapi-5.png

small_api-video-uploader-strapi-5.png

thumbnail_api-video-uploader-strapi-5.png

api-video-uploader-strapi-5.png

## Integrate the api.video uploader with your application

The `api-video-asset` collection type gives users a way of easily integrate [api.video](https://api.video) assets in their front-end application thanks to custom api call. 

The info that is stored on the `api-video-asset` collection type is the following: 


large_graphic_strapi.png

medium_graphic_strapi.png

small_graphic_strapi.png

thumbnail_graphic_strapi.png

graphic_strapi.png


The endpoint is protected, so you need a token to authenticate. Go to the *Settings* section on your Strapi dashboard and then select *API Tokens*. Click on Create new *API Token*. Select *Custom*  as your *Token type* and then scroll down to *Api-video-uploader* and choose what type of permission you want.

large_api-video-uploader-strapi-6.png

medium_api-video-uploader-strapi-6.png

small_api-video-uploader-strapi-6.png

thumbnail_api-video-uploader-strapi-6.png

api-video-uploader-strapi-6.png

After clicking on the Save button, copy the bearer token published. We are going to test it on Postman. Copy the following URL address ```http://localhost:1337/api/api-video-uploader/api-video-asset``` and paste it next to your request type. Go to Authorization, select the Type Bearer and paste the copied token. Click send and you will get your videos details! 

medium_api-video-uploader-strapi-7.png

small_api-video-uploader-strapi-7.png

thumbnail_api-video-uploader-strapi-7.png

api-video-uploader-strapi-7.png

## Final thoughts

We're super excited to see what folks will build with the api.video and Strapi 🤩 

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 Strapi Plugin: Add videos to your headless CMS

large_api-video-strapi-plugin.png

medium_api-video-strapi-plugin.png

small_api-video-strapi-plugin.png

thumbnail_api-video-strapi-plugin.png

api-video-strapi-plugin.png

api-video-blog-product-updates.png

Product updates

As we all know, WordPress is an excellent platform to use for building your own website because it is easy to you. The variety of plugins at your disposal is a game-changer, especially if you do not code. 

We're pleased to announce our new WordPress integration on the [Wordpress plugins directory](https://wordpress.org/plugins/api-video/). 
If you have a WordPress website or blog, our plugin will allow you in a few clicks to:
* embed any of your videos in your WordPress content using our HTML5 video player
* manage your videos from your WordPress admin interface: list all your videos, upload a new one, and edit existing ones

All you need is: 

1. A WordPress website 🤓
2. An api.video API key (get a free sandbox key [here](https://dashboard.api.video/register))


## Installing the api.video WordPress plugin

### Adding the plugin from the plugins library

The easiest way to install the plugin is to use the plugin search. Log in to your WordPress administration area, and go to the **Plugins » Add New** page. 

Plugin installation from the plugins directory

plugin-installation-from-directory.jpg

You'll see a screen like the one above. In the top-right search area, type "api.video". You should see the api.video plugin appear. 

Click on the **Install now** button on the api.video plugin card. After a few seconds (or minutes, depending on your connection), the **Install now** button changes to **Activate**. Click on **Activate** to activate the plugin. That's it; the plugin is installed!

### Setting up the plugin

There is one last step before using the plugin: you have to enter your api.video API key in the plugin settings.

A new entry called **api.video** automatically appeared in your administration menu after you installed the plugin. Go to the **api.video » Settings** page.

Enter your API key in the plugin settings

plugin-installation-api-key.jpg

Copy your API key from your [api.video dashboard](https://dashboard.api.video) and paste it in the dedicated field, as shown in the above screenshot. Finally, click on the Save button. If an error message appears, double-check your API key. 

## Usage

### Uploading a video

To upload a new video, go to the **api.video » Add new** page. From here, you'll be able to select the video file you want to upload by clicking on the **Select files** button.

plugin-add-new-video.jpg

Once the video file has been selected, the upload starts automatically. Once the upload is complete, a link is provided to the video editing page ("Watch the video here" link). By clicking on this link, you'll be redirected to the video editing page (see bellow [Editing a video](#editing-a-video)). 

### Listing your videos

You can find the list of all the videos you have uploaded to your api.video account by clicking on **api.video » Library**. For each of your videos, you will see the associated thumbnail and its title.

plugin-videos-list.jpg

If you want to integrate one of the videos into an article and then modify it, click on the associated thumbnail. You will be redirected to the **video editing page**. 

### Editing a video

You can access the video editing page right after uploading a video or selecting an entry in the videos list.

plugin-edit-video.jpg

From here, you'll be able:
- to update the video title, description, and tags
- to decide whether the video is private or not, panoramic or not, and downloadable or not 

Don't forget to click on the **Save** button after making your changes!

Another essential element on this page is the **"shortcode"**. This is what will allow you to embed the video on your website.

### Embedding a video in a post/page

The first step is to copy the **shortcode** associated with the video you want to embed. This shortcode can be found on the [video editing page](#editing-a-video). 

Once you have copied this shortcode, go to the editing page of the article where you want to embed the video. 

At the spot where you want the video to appear, insert a "shortcode" block into your article. One way to do that is to show the **block inserter** by clicking on the big **+** at the top left of the page. Then type "shortcode" in the search input and click on the **Shortcode** element. 

plugin-shortcode.jpg

Once the block has been added in your article, you now have to paste the value you copied in the video editing page (it should look like **[api.video video_id=123456789]**).

Paste the shortcut value into the dedicated input

plugin-shortcode-paste.jpg

In most cases (but it depends on your WordPress theme), you will get a better result if you transform the block to "Columns." To do so, click on the first icon above the block and select **Columns**.

plugin-shortcode-columns.jpg

And that's it! Once your article is saved, you will see the video appear where you inserted it. 

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

JavaScript