Analytics

Normal

large_logo_avatar.jpg

medium_logo_avatar.jpg

small_logo_avatar.jpg

thumbnail_logo_avatar.jpg

logo_avatar.jpg

api.video

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/delivery-analytics/analytics), 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 is **play event data**. Play events determine the number of times your video or live stream had viewer engagement. 
&nbsp;
 
api.video’s solution analyzes and groups play event data by these dimensions:

&nbsp;
 

- the date and time of the play event,
- the ID of a specific video or live stream that generated play 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`
&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 videos or broadcasted live streams.
2. These videos or live streams already had viewers that create play events.
3. You used 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.

&nbsp;
    
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-ios-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.

### 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/apikeys). 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 **which one of your videos performed the best in the last week**:

Notice that we’re passing in `from` and `to`, which determine the time interval that you want to analyze. We’re also adding `videoID` as the dimension, which will give you result for every `videoID` available in your project.
&nbsp;
 

Here’s an example response payload for this request:

In the response, `value` shows values for the `dimension` we set in our request. In this case, since we requested `dimension=videoId`, each `value` field in the response returns a video ID.
&nbsp;
 
`plays` returns the number of play events.
&nbsp;
 

Now let’s try a different dimension: let’s see **how a specific video performs across different countries** where your viewers are based.

Notice that we’re passing `from`, which determines the starting time of the data analysis. We’re adding `country` as the dimension, which will give you results for every country where you had viewer engagement. We’re also adding a video’s ID value as the `filter`, which will filter results in the response payload and only shows analytics for the specific video that the ID belongs to.
&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.

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

large_Blog_illustration_analytics.png

medium_Blog_illustration_analytics.png

small_Blog_illustration_analytics.png

thumbnail_Blog_illustration_analytics.png

Blog_illustration_analytics.png

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

Erikka Innes

Python

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.apivideo)! 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 [https://go.api.video/](https://go.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

small_alexw.png

thumbnail_alexw.png

alexw.png

5a22d420c9a5a7-416105621512231968826.png

linkedin Alex W

Alexandre Willot

Product updates

Getting the best quality of videos without worrying about cost hikes and compliance issues that come with storing those videos is not easy. We at api.video understand that. 

&nbsp;

So, in response to your needs and in our ongoing effort to improve your experience, we're proud to introduce a new video storage option in the United States of America (USA). This expansion complements our existing services in the European Union (EU) and offers you even greater flexibility in choosing the optimal storage location for your videos. 

## What does this update mean for you?
With this upgrade in our infrastructure, you decide where you want your videos to be stored – in the USA or in the EU. This translates to: 

### 1) More control over your video storage location to comply with laws

Select the storage location that best suits your needs, whether for compliance with local laws or based on personal or customer preference. This will ensure that your video content adheres to all relevant legal standards for you or your customers. 

### 2) Diversification of your user base with multi-region storage

If you are working on a project in Europe and one project in the US, you can benefit from multi-region storage. Each project you create in your account will have a unique API key and its own distinct settings, including the video storage location. This means that you can link each project to a single region based on your customer's video storage preferences.

### 3) Faster video playback

On top of the new storage in the US, we have opened new delivery servers in North America, and improved our CDN services in the region. Both initiatives now guarantee faster, more efficient video delivery within North America. This means that your American users will experience faster and higher quality video playback than ever before.

&nbsp;

 In addition to this flexibility of choosing your storage location, api.video also offers improved video performance, [reduced costs](https://api.video/blog/product-updates/video-encoding-pricing-update/), [greener carbon footprint](https://api.video/blog/company/asics-based-video-encoding/) and enhanced [flexibility ](https://api.video/blog/product-updates/white-labeling-api-video/)for expanding your video functions. These advantages stem from our complete ownership of the video infrastructure.

## Conclusion
In a nutshell, this expansion of our video storage and delivery capabilities is a step towards better serving your video infrastructure needs, locally and globally. We're grateful for your trust, and we can't wait to see what you'll create.

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


New video storage capabilities in the US: Introducing multi-region video hosting

small_multi_region_A.png

thumbnail_multi_region_A.png

multi_region_A.png

video api

Video stream

Neda.jpg

Neda Ashrafi Amiri

2022 is coming to an end, but for us, it’s just the beginning of a new era 🦋

It has been a year full of innovations and growth for the api.video team. We did everything to make video streaming simpler and easier than ever before! Adding videos to your products is our mission and our everyday mantra 🧘‍♀️

In this article, we would like to celebrate 🎉 and look back on some of the major highlights of 2022 together 🥂 

## **All-in-one infrastructure 🎈**

We built an infrastructure that is strong and independent. api.video offers an all-in-one dedicated encoding machines and CDN setup. We have observed 100% availability of our services this year, with no downtimes. What does this mean for you? We ensure that you have stability and control over all your videos. We also monitor and track important data to improve performance and provide a flawless playback experience for your viewers.

## **Ecosystem designed for you** 🔌

You 🫵 yes you. You were our main focus this year! And you will always be our main focus. Whether you are a content enthusiast looking to add videos to your Content Management System (CMS), or a developer wanting to skip the hassles of developing applications for multiple operating systems, we created the right tools for you.

We have a growing ecosystem with many new plugins, clients, libraries, and other no-code tools. Now you can easily add videos to your favorite applications with just a few clicks!

Here is a list of some of the tools we designed for you this year 🧩

- [Plugin for WordPress](https://api.video/blog/product-updates/wordpress-plugin/)  - A plugin to embed and manage your videos into your WordPress website or blog.
- [iOS client](https://api.video/blog/product-updates/new-ios-api-client/) - A client that removes the iOS SDK to simplify api.video usage and deployment with advanced upload features.
- [React upload button](https://api.video/blog/tutorials/how-to-upload-a-video-with-react-and-nodejs/) - a fully customizable button in your application that you can implement in a few minutes.
- [Plugin for Strapi](https://api.video/blog/tutorials/api-video-strapi-plugin-add-videos-to-your-headless-cms/) - a powerful, easy, and secure plugin to bring video content to your websites and applications using the Strapi headless CMS.
- [Player for Flutter](https://api.video/blog/tutorials/api-video-player-for-flutter-playback-videos-on-your-apps/) - an api.video customizable player for Flutter built natively for Android, iOS, and the web.
- Players for [Android](https://api.video/blog/tutorials/how-to-add-an-api-video-player-to-your-android-application/) and [iOS](https://api.video/blog/tutorials/how-to-add-an-api-video-swift-player-to-your-ios-application/) applications- api.video players that help you include your videos in your Android or iOS applications easily and quickly.
- [Fully accessible player](https://api.video/player/) - with ARIA attributes present; the player is fully accessible to all screen reader users.
- [Next.js boilerplate](https://github.com/vercel/next.js/tree/canary/examples/with-apivideo) - a simple way to start implementing api.video with Next.js.

We are introducing a lot of exciting new tools in 2023 🎊  Don’t miss out! Follow us on [LinkedIn](https://www.linkedin.com/company/api-video/) and [Twitter](https://twitter.com/api_video) to receive the latest updates! 

## **New features inspired by you 🗣️**

We believe that the only way to grow is by listening to our customers! We listened, and here are some of the features that you requested ⚙️

- [Workspaces](https://api.video/blog/product-updates/workspace/) - Anyone can share their api.video dashboard with a colleague or a client. It's a great way to involve stakeholders in your projects.
- [Watermark feature](https://api.video/blog/tutorials/how-to-add-watermarks-to-your-videos/) - You can now add customized watermarks to your new or old videos
- [Clipping feature](https://api.video/blog/tutorials/how-to-create-a-video-clip/) - With the clipping feature, you can trim your video by selecting the exact duration you desire right inside the api.video dashboard. No more going back and forth and using other tools for clipping your videos!

We have been continuously improving our product with new features and updates. However, we are just getting started! Join us on our journey to becoming better, and post your [feedback](https://api.video/contact)! 

## **New business opportunities 🌱**

We are in the video business, and the video industry is BIG! We know that there are a lot of business opportunities you can harness by using the api.video tools. Our experts worked on putting together a few demos for you to see how easy it is to create those opportunities with our tools. Here are some of the use cases designed for you 💡

- [Build a YouTube-like site with no code](https://api.video/blog/no-code/bubble-io-api-video-build-a-youtube-like-site-with-no-code/)
- [Build your own TikTok](https://api.video/blog/tutorials/rebuilding-tiktok-with-api-video/)
- [Create a Udemy-like learning platform](https://api.video/blog/tutorials/how-to-create-a-udemy-like-learning-platform/)
- [Build a Loom-like app with just a few lines of code](https://api.video/blog/tutorials/build-a-loom-like-app-with-just-a-few-lines-of-code/)

It sounds very BIG to create YouTube, but we make it so simple. Go BIG by keeping it simple and try out some of these demos for yourself. You may be the next BIG founder 🚀 It’s [free to try](https://dashboard.api.video/register)!

You can also find more use cases on our [blog](https://api.video/blog/)!

## **$12M Series A funding** 💰

We are very happy to share the news that api.video raised $12M in [Series A funding](https://api.video/blog/product-updates/we-raised-12-millions-to-let-you-join-our-video-first-world/). As I said, this is the beginning of a new era for us! An era of growth. But we don’t want to grow alone. We want to grow with you 🤝

We hope that you enjoyed reading the highlights of 2022. We, at api.video love our community and want to make sure that you know how much your support means to us. Let us know how to be better by posting your feedback and any ideas you may have on our [community forum](https://community.api.video/) 🫶 

On behalf of the [api.video](http://api.video) team we would like to wish you a happy holiday season and here is a video 🎬 we made just for you 🎄




All-in-one infrastructure & growing ecosystem

Highlights of 2022: all-in-one infrastructure & growing ecosystem

large_20dec22.png

medium_20dec22.png

small_20dec22.png

thumbnail_20dec22.png

20dec22.png

t02cw29ka-u04jtt0jcg3-549047173ac2-512.jpeg

Artem Matinian

It’s natural that one will think about integrating videos into their project. There are so many use cases for a video that we cannot even start to count. From user-generated content like Youtube, TikTok, Instagram, and the likes, through e-learning apps, personal trainers, e-shopping, and the list goes on and on, there’s no limit to what you can do with moving images that zoom across the fiber optics as digital signals from one place to another. 

&nbsp;
 

Is there are catch, though? How easy is it to implement videos into your project, app, or website? in this article, we will look at the options, challenges, and solutions for getting video infrastructure up and running.

## The Casual Cloud Vendor ☁️

Probably, the first thought of every developer (with a mainstream line of thinking) is AWS. It comes naturally, as most of the existing infrastructure is probably set up on AWS, Azure, or the like. Who can blame you? it’s convenient, easily scalable, and…. can get quite expensive. Not only that, it might be difficult to implement as well; think about:

&nbsp;
 

- Having DevOps that specialize not only in AWS but also in the video area
- If you don’t have such a team, then you’ll need to hire people for that.
- Time-consuming setup
- High price

So-you-wanted-to-use-AWS-to-save-costs.png

Here’s the implementation list of all the different services to deploy and setup to have video-on-demand with AWS:

AWS-requirements.png

That’s not all; you’ll also have to build the client that uploads the videos yourself and plus all of the front-end. You can already understand the costs and time involved with this project. 

&nbsp;

“Alright”, you say, now what? isn’t it better to just build the whole architecture myself? what’s the point of using AWS if it’s costly, complex, and resource intensive?

##The DIY solution 🛠️

Let’s go with this simple idea. You want to create an upload button where users upload their videos to your app or website. You already have quite a few users and you know that the feature will be adopted quite quickly, right?

&nbsp;
 
The minimum requirements are:

&nbsp;
 

- Rent a server for $120/month (i.e Cloudflare, DigitalOcean and the likes) with the following available resources (vCPU: 4, 16GB of memory, 250GB HDD)
- Install a web server like Apache, Nginx
- Create a hosting logic on your server
- Find a third-party video player
- Create your application and add an upload button to allow your users to send their videos created with their last smartphone model.
- Allow the user to play their videos freshly uploaded with the video player
- Deploy your application on the server

&nbsp;
 

It does sound easier than AWS, right? why is the AWS solution so complex? why all of these services?

&nbsp;
 
You launch the service, and it seems to run smoothly for a few hours, and then you start to get some emails from customers, like:
&nbsp;
 

MichaelScott777 says:
```
💡 My playback is really choppy, and it takes forever for the video to load! why are you so slow (that’s what she said 😀)
```
TheShrute909 exclaims:

```
💡  Why is the video is so slow?!?!?!??!!?!? it takes the video 5 hours to show! help!!1
```

&nbsp;
 
Your users are calling out that the playback experience is poor. There is a lot of buffering before the video starts to play.

&nbsp;
 

So you start Googling around, and you discover that you can’t just upload the video; you need to encode it with different qualities, plus if you want to stream the videos, you also need to implement some specific protocols, and you start going down the rabbit hole: HLS, DASH, H.264, HEVC, AV1 and etc. “WHAT THE HELL IS ALL OF THIS?” you ask.

&nbsp;
 

Then you stumble upon something that seems like salvation: [FFmpeg](https://ffmpeg.org/)! a video processing “Swiss knife” you hail in victory and pound yourself on the chest. You’ve made it. After several weeks of sleepless nights and 59.7 coffee cups later, it’s installed, it’s running, and magically does the job (you don’t really understand how completely, but it works).

solution.png

Everything seems to run smoothly, but you are afraid to touch anything as you focus on your main product, and if you start messing around with the video monster again, you might sink more time into it. But then your users start to ask for more features around video:

&nbsp;
 

CryptoKing001 is asking for this feature:

```
💡 Heellooo!, how can I know how many people watched my videos? <3 <3 <3
```


You grab your head in fear, and the anxiety builds up. You can’t sink in more resources into that video thing, and that 3rd party video player I’ve used doesn’t provide analytics (!!!!). So, you decide to outsource the whole thing, although you did have a limited budget setup for this project, so you go over budget.

&nbsp;
 

The app seems to be running fine for a few weeks, and many users upload their videos daily. You check your monitors and discover that you are running out of disk space! the product is minutes from being down because of all of this video thing; eventually, it goes down, and you generate some bs message to your users about vertical scalability that they have no idea what you are talking about. Eventually, you rent more servers and add more disk space; the product is up again, but, again, you are way over budget already with that analytics stuff; now you have to pay more for space (argh!). At least you’ve evaded a disaster, but you get a new complaint:

&nbsp;
 

obee1kanobeeeeeeeeeeeee writes:
```
💡 why the videos don’t play after I upload them???? I have to wait for 5 minutes before it plays. MY VIEWERS ARE COMPLAINING!!! FIX IT!!!
```

Your head is already missing half of the hair it used to have before you started the project, and now this?! 

&nbsp;
 

You start investigating and find out that you have 100% CPU utilization on the video server; remember that magical salvation that you installed on the server: FFmpeg? now it gobbles up most of the CPU to encode the videos. So, you write another bs message to your users about encoding and some stuff you don’t even know about (and your users don’t even care), and you start sinking more money into the project. You buy more CPU and start scaling again.

&nbsp;
 
Few months past. You don’t need to buy shampoo anymore (at least that’s a good thing, you can save some money), most of your attention has shifted into scaling these wretched video servers, you are now an expert in video encoding and delivery, but you are losing users as they have no interest in your product, as all of your investment and resources went into this video project black hole.  You’ve hired more engineers that are dedicated to doing the video project, and the budget for the video project already went out of control a long time ago.

I-know-kungfu.png

You look back and think, how did I end up here? what could I have done better? would it be better to go with AWS? or maybe there are other solutions I could have considered?

## The Perfect Solution

Like with any other service, reinventing the wheel would probably lead to huge financial implications, but as we’ve seen AWS is not perfect as well. However, there are APIs that can solve this problem by providing you with a scalable and easy-to-use service, like api.video.

&nbsp;
 

- With api.video creating an upload scenario and even more is a matter of minutes.
- api.video has a far lower cost than AWS (check the cost calculator [here](https://api.video/pricing/aws/)) or DIY
- api.video has a strong infrastructure that is scalable and reliable
- api.video gives you the ability to select the storage location of yoru videos in the US or in the EU. This will ensure that your video content adheres to all relevant legal standards for you or your customers. 

&nbsp;
 

Check out the [get started guide](https://docs.api.video/vod/get-started-in-5-minutes) to get started in 5 minutes or create a [sandbox account ](https://dashboard.api.video/login?_gl=1*cr3fzu*_ga*MjQwNjA0MDAxLjE2ODgwNDYxNjI.*_ga_PSYKRMEWL4*MTcwMDA1NjMwNy4xNjMuMS4xNzAwMDU3NTY1LjAuMC4w) for free to explore api.video on your own!

Should I build my video infrastructure from scratch?

Image should I build my video infrastructure from scratch

large_should I build my video infrastructure from scratch.png

medium_should I build my video infrastructure from scratch.png

small_should I build my video infrastructure from scratch.png

thumbnail_should I build my video infrastructure from scratch.png

should-I-build-my-video-infrastructure-from-scratch.png

Should I build my video infrastructure from scratch? Challenge accepted

captions

Captions increase your video's audience. Viewers spend more time watching captioned videos, many people watch videos with the sound off, and you can draw viewers who don't speak the spoken language of your video if you include subtitles. See ["Why You Should Caption Your Videos, Whether They're Classes, Speeches, or Entertainment"](https://api.video/blog/video-trends/why-you-should-caption-your-videos-whether-they-re-classes-speeches-or-entertainm/) if you want all the details and statistics for why you should consider captions for your video content. Another great reason to add captions, is it's easy to do with api.video and Maestra! Let's get started. 

## Prerequisites

* [api.video account](https://dashboard.api.video/register)
* Maestra account (click the blue **Get Started Free** button)
* Sample video with spoken audio (we used one of Doug for this - https://www.youtube.com/watch?v=O3C7_kgwrPY, but any video is fine as long as it has clear audio) 

Maestra, auto captions, subtitles, caption a video, subtitle a video

maestra1.png

1. Click **New Subtitle** to bring up the upload panel.
2. On the upload panel under Upload your files, click **My Device**. 
3. For the Select audio language section, we choose **English** because the video is in English. The drop-down offers a 'Most Used Languages' section and an 'All Languages' section. 
4. You can choose different settings. For this walkthrough, we choose **Translate captions to another language** and then for the target language, choose **Spanish**. If you want different settings you can put those instead. 
5. Click **Submit**. 
6. Your video will start transcribing. Once it's complete, click on the title of your video. You can see how well your transcription came out. In this case, it came out pretty well.

maestra3.png

7. The next step is to export a copy of the file with the captions we want. Click the **Export** button in the upper right corner. You'll get a screen listing various choices, including downloading a video with all your captions included. We just want to get a WebVTT file for this walkthrough.
8. Make sure you are on the **Subtitle** tab. 
9. Under Languages, check the **English** and the **Spanish** box. 
10. Click **WebVTT** to download your caption file. The first time you click it, it will say **Ready**. The second time, it downloads a **.zip** file with your information in it. 
11. When you open the **.zip** file, you'll see a caption file in English and one in Spanish. Save these. 

## Add the Video to api.video
We need to add our video to api.video before we can caption it. You have a few choices available to you: 

* [Delegated Uploads for Videos Large and Small](https://api.video/blog/tutorials/delegated-uploads-for-videos-large-and-small-python/) - This tutorial shows you how to use a delegated token to upload a large or small file using Python.
* [Upload a Video From Your Computer] - Upload a video under 128 MB from your computer using Python. 
* [Upload a Video with the api.video API Using a Public URL](https://api.video/blog/tutorials/upload-a-video-with-the-api-video-api-using-a-public-url-python/) - Transfer a video from a public URL to api.video

You can also use a no-code method:

1. Open the api.video dashboard.
2. Click **My videos**.
3. Click **Upload**. 
4. Add your video. 

## Use the Captions Endpoint to Add Captions to Your Video
We can now take the files Maestra generated for us and add them to our video. Here's the code sample we're going to use to do it: 

The code sample hard codes the videoId - but if you want you can retrieve it programmatically. A design where a VTT file's title somehow matches the video's title and then you grab the videoId might be a good way to go. 

In our demo, everything is set up to try to handle a situation where you have multiple caption files. We assume a naming convention like this: 
```title_language tag.vtt``` 

So samples of this would be: doug_en-GB for English from Great Britain and doug_es-ES for Spanish from Spain. 

The language tag in each case is a BCP 47 tag. The appropriate tag is at the end of each file so that it can be sliced from the file name and used in the caption upload. Using Python's regex and os modules we search for every file in the current directory that ends with '.vtt'. If it ends with this, we then retrieve the language tag from the end of the title, open the file in binary, then append the tag and file to a POST request to add a caption. We also modify the URL - it needs to include the videoId and the language tag for the language we want to add. You can see how that's built in the sample.

We have two caption files, so we loop through our .vtt files and send each one to be added. For each successful addition of a caption file, we get a response that looks similar to this: 

```
{
	'uri': '/videos/vi6FZib80ZrC8q73AekJqNDH/captions/es', 
	'src': 'https://cdn.api.video/vod/vi6FZib80ZrC8q73AekJqNDH/captions/es.vtt', 
	'srclang': 'es', 
	'default': False
}
```

* uri - the unique link that you add to https://ws.api.video to reach the video caption file (you must authenticate to view this, so you can't paste it into a browser to see it) 
* src - the location URL of the file
* srclang - what language you're using, written shorthand (instead of es-ES it would be es) 
* default - whether this is the default language for the video 

If you want to make a particular language the default caption, you can specify the language by updating a caption. 

## Check Your Work
You can retrieve details about your captions, but an easy way to check is to look in your dashboard: 

1. Go into your Videos section and click your video.


screen-shot-2021-03-22-at-11-42-19-pm.png

2. Click the **Captions** icon directly under the X. You'll see that you can add English or Spanish captions. Give it a try on your own video! 

screen-shot-2021-03-22-at-11-45-06-pm.png

Maestra does fairly well with captions, as long as the audio is clear. They offer a free trial for up to 30 minutes of video, so try them out yourself. Maestra lets you automatically create a variety of caption files, but api.video uses the WebVTT format, so you'll want that for any projects on our platform. 

If you want to create your own WebVTT file from scratch, Doug wrote a great post about how to do this here: [How to Add Captions to your Videos](https://api.video/blog/tutorials/how-to-add-captions-to-your-videos/)

## Show a Caption
You can see if a caption was already added with this code: 

## Show All Captions
If you want to see every caption for a video, you can do this: 

## Delete a Caption 
A caption can be removed with the following code: 

## Update a Video Caption
You can update a video caption to make it the default. The code for that would be: 

This is all the basics for using captions. Thanks for tuning in today! 
[Start builind now](https://dashboard.api.video/register)!

Add Captions to Your Video with Maestra and api.video

medium_screen-shot-2021-03-22-at-11-54-24-pm.png

small_screen-shot-2021-03-22-at-11-54-24-pm.png

thumbnail_screen-shot-2021-03-22-at-11-54-24-pm.png

screen-shot-2021-03-22-at-11-54-24-pm.png

Player SDK

Player

Player update

thumbnail_thibault_rond.png

thibault_rond.png

Thibault Beyou

No-code

Dart

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

&nbsp;

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

&nbsp;

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

&nbsp;

Check out these plaftorms:

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

&nbsp;

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

&nbsp;

The api.video mobile player SDKs support both VOD and live streaming, private videos, and player notifications. They also handle the dirty work for you:

&nbsp;

- take the [video ID](https://docs.api.video/vod/video-object#video-id) as input
- generate analytics events for [api.video analytics](https://api.video/product/video-analytics/)
- play back HLS using the best quality that fits actual network conditions
- fall back to MP4 when there is an issue with HLS

&nbsp;

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

&nbsp;

The api.video players are open source. Feel free to fork and modify them as you want! We are happy to review your pull requests!

## Usage

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

&nbsp;

In a typical use case, you should follow this workflow:

&nbsp;

1. Add the player package to your project
2. Create a `VideoOptions` instance with the video ID of the video you want to serve 
3. Create a player controller and pass it the `VideoOptions` instance
4. Create the player view and pass the player controller to the player view.

&nbsp;

Check out this example for **Flutter**:

&nbsp;

Run this in your command line:

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

## Quickstarts

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

&nbsp;

- **Flutter**:

[api.video player for Flutter: playback videos on your apps](https://api.video/blog/tutorials/api-video-player-for-flutter-playback-videos-on-your-apps/)

&nbsp;

- **Android**:

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

&nbsp;

- **Swift (iOS):**

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

## Customization

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

&nbsp;

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

## Using custom players

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

&nbsp;

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

- **Android**:

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

- **iOS**:

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

&nbsp;

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

&nbsp;

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

&nbsp;

We can recommend these players in case you decide not to use the api.video player SDKs:

&nbsp;

- Flutter: `chewie` and `video_player`
- Android: `ExoPlayer`
- iOS: `AVPlayer`

&nbsp;

_Need help, or have questions? Join the [api.video community](https://community.api.video/) and start a discussion. Or simply create a sandbox account on [api.video](https://dashboard.api.video/login?_gl=1*13c9i22*_ga*MjQwNjA0MDAxLjE2ODgwNDYxNjI.*_ga_PSYKRMEWL4*MTcwMDIyOTIzOC4xNjguMS4xNzAwMjMwMTQzLjAuMC4w) and check out the features for yourself._

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

large_Blog_MobilePlayer.png

medium_Blog_MobilePlayer.png

small_Blog_MobilePlayer.png

thumbnail_Blog_MobilePlayer.png

Blog_MobilePlayer.png

doug.jpg

Doug Twitter

Doug Sillars

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

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

&nbsp;


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

&nbsp;


A video describing the new api.video player, inside the new api.video player!

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

## Captions and chapters  

[Captions](https://apivideo.github.io/2020/03/06/@api.video-how-to-add-captions-to-your-videos-19eba225a4f8.html) and [Chapters](https://apivideo.github.io/2020/04/03/@api.video-restful-api-explained-e28c0e157c23.html) were supported in the last player, and continue to be supported by the api.video player.

## Chromecast

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

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

## Responsiveness

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

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

&nbsp;

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


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

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

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

&nbsp;

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

&nbsp;

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

Announcing our new video player

large_1595521905-player.png

medium_1595521905-player.png

small_1595521905-player.png

thumbnail_1595521905-player.png

1595521905-player.png

swift

api-video-romain-petit.png

Romain Petit

Swift

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

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

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

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

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

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

## Upload video

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

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

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

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

## Add the api.video Swift player

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

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

2. Cocoapods
    
    add the following to your Podfile

Replace X.X.X with the latest version.

3. UIKit
    
    a. Import the package

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

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

c. To get all player events (optional)

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

4. SwiftUI
    
    a. Import the `ApiVideoPlayer` package

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

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

If you want to play private videos:

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

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

If you're looking for an easy way to integrate video into your application, check out our **[docs](https://docs.api.video/)** and **[sign up for a free account](https://dashboard.api.video/register).**

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

large_api-video-swift-player.png

medium_api-video-swift-player.png

small_api-video-swift-player.png

thumbnail_api-video-swift-player.png

api-video-swift-player.png

img_8063-min-1.jpg

GitHub Yohann

LinkedIn Yohann

Yohann Martzolff

Flutter

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

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

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

## A single video player for all platforms

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

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

Continue reading this article for a full tutorial 👀

## Upload a video to display it

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

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

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

screenshot-2022-11-28-at-15-20-26.png

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

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

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

### Option 1

Run the following command at the root of your project:

### Option 2

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

## For web usage

If your application is or will be used as a web app, you need to add the api.video PlayerSdk script to the `web/index.html` file of your project.

## For iOS usage

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

Video on demand

Live streaming

Analytics

Video infrastructure

See all features

Online learning

Short-form videos

Marketplace & E-commerce

Video messaging and recording

Quickstart guides

Documentation

Ecosystem catalog

Clients & SDKs

Community

Blog

Demos

Help center

Blog

Huge pricing update! Introducing video encoding at zero cost