diff --git a/README.md b/README.md index 3eb70a31..41a4342e 100644 --- a/README.md +++ b/README.md @@ -5,17 +5,14 @@ meta: description: Cloud-based video hosting and live streaming platform with analytics. Mobile and web SDKs for VOD, live streaming, and player for NodeJS, Javascript, Typescript, Python, Go, PHP, C#, iOS Swift, Android Kotlin. --- -
+
-# api.video *documentation* -
+### New to api.video? +## Get started [here](/get-started/start-building.md)! -
-
+
- ### New to api.video? - ## Get started [here](/get-started/start-building.md)!
Welcome to the developer documentation of api.video! Our platform empowers developers and businesses to seamlessly integrate video functionality into their applications and services. Whether you're looking to offer video on demand, live streaming, or leverage our player and analytics features, the api.video API is designed to simplify the process. @@ -38,7 +35,7 @@ api.video provides you with the possibility to embed live streaming into your ap {% endcapture %} -{% capture player-analytics-description %} +{% capture delivery-analytics-description %} api.video lets you customize a large part of the delivery, whether it's the player's branding or adding captions, chapters, and watermarks. @@ -48,73 +45,63 @@ api.video lets you customize a large part of the delivery, whether it's the play {% include "_partials/product-card.md" product: "Video", subheading: "on demand", description: vod-description, link: "/vod/README.md" %} {% include "_partials/product-card.md" product: "Live", subheading: "streaming", description: live-stream-description, link: "/live-streaming/README.md" %} -{% include "_partials/product-card.md" product: "Player", subheading: "& analytics", description: player-analytics-description, link: "/delivery-analytics/README.md" %} +{% include "_partials/product-card.md" product: "Delivery", subheading: "& analytics", description: delivery-analytics-description, link: "/delivery-analytics/README.md" %}
-
- ### Section header - ## Quick links -
+
+### Section header + +## Quick links +
{% capture get-started-links %} -{% include "_partials/quick-link.md" icon: "/_assets/icons/js.svg", label: "Start working with api.video", link: "/" %} -{% include "_partials/quick-link.md" icon: "/_assets/icons/js.svg", label: "Video quickstart", link: "/" %} -{% include "_partials/quick-link.md" icon: "/_assets/icons/js.svg", label: "Live streaming quickstart", link: "/" %} +{% include "_partials/quick-link.md" icon: "/_assets/icons/setup-checklist.svg", label: "Start building with api.video", link: "/get-started/start-building" %} +{% include "_partials/quick-link.md" icon: "/_assets/icons/vod-quickstart.svg", label: "VOD quickstart", link: "/vod/get-started-in-5-minutes" %} +{% include "_partials/quick-link.md" icon: "/_assets/icons/livestream-quickstart.svg", label: "Live streaming quickstart", link: "/live-streaming/create-a-live-stream" %} {% endcapture %} -{% capture sdks-and-plugins %} -{% include "_partials/quick-link.md" icon: "/_assets/icons/github.svg", label: "SDK", link: "/" %} -{% include "_partials/quick-link.md" icon: "/_assets/icons/js.svg", label: "SDK", link: "/" %} -{% include "_partials/quick-link.md" icon: "/_assets/icons/js.svg", label: "SDK", link: "/" %} +{% capture libraries-sdks %} +{% include "_partials/quick-link.md" icon: "/_assets/icons/github.svg", label: "API clients", link: "/sdks/api-clients" %} +{% include "_partials/quick-link.md" icon: "/_assets/icons/videos-sdks.svg", label: "Video libraries & SDKs", link: "/sdks/vod" %} +{% include "_partials/quick-link.md" icon: "/_assets/icons/livestream-sdks.svg", label: "Live streaming libraries & SDKs", link: "/sdks/livestream" %} +{% include "_partials/quick-link.md" icon: "/_assets/icons/player-sdks.svg", label: "Delivery & analytics SDKs", link: "/sdks/player" %} +{% include "_partials/quick-link.md" icon: "/_assets/icons/no-code.svg", label: "No-code solutions", link: "/sdks/nocode" %} {% endcapture %} {% capture understand-api-video %} -{% include "_partials/quick-link.md" icon: "/_assets/icons/js.svg", label: "SDK", link: "/" %} -{% include "_partials/quick-link.md" icon: "/_assets/icons/js.svg", label: "SDK", link: "/" %} -{% include "_partials/quick-link.md" icon: "/_assets/icons/js.svg", label: "SDK", link: "/" %} +{% include "_partials/quick-link.md" icon: "/_assets/icons/setup-checklist.svg", label: "Help Center and FAQs", link: "https://help.api.video/en/" %} +{% include "_partials/quick-link.md" icon: "/_assets/icons/js.svg", label: "API reference", link: "/reference" %} +{% include "_partials/quick-link.md" icon: "/_assets/icons/js.svg", label: "Blog", link: "https://api.video/blog/" %} +{% include "_partials/quick-link.md" icon: "/_assets/icons/js.svg", label: "Changelog", link: "https://api.video/changelog/" %} {% endcapture %} {% include "_partials/quick-links-container.md" name: "getting-started", title: "Get Started", content: get-started-links %} -{% include "_partials/quick-links-container.md" name: "sdks", title: "SDKs and plugins", content: sdks-and-plugins %} +{% include "_partials/quick-links-container.md" name: "sdks", title: "Libraries & SDKs", content: libraries-sdks %} {% include "_partials/quick-links-container.md" name: "understand", title: "Understand api.video", content: understand-api-video %}
-
- - ### Section header - ## Need help? -
- -
-{% include "_partials/support-card.md" label: "Browse help center", icon: "/_assets/icons/videos-sdks.svg", link: "/" %} -{% include "_partials/support-card.md" label: "Talk to Customer Care team", icon: "/_assets/icons/vod-quickstart.svg", link: "/" %} -
+
+### Section header -
-
+## Need help? - ### Section header - ## Content cards
- -
-{% include "_partials/content-card.md" label: "Browse help center", icon: "/_assets/icons/solutions-demos.svg", description: "This is a placeholder for a paragraph that guides users to our solutions & demos", link: "/" %} -{% include "_partials/content-card.md" label: "Browse help center", icon: "/_assets/icons/annotations.svg", description: "This is a placeholder for a paragraph that guides users to our solutions & demos. This is a placeholder for a paragraph that guides users to our solutions & demos", link: "/" %} -{% include "_partials/content-card.md" label: "Browse help center", icon: "/_assets/icons/no-code.svg", description: "This is a placeholder for a paragraph that guides users to our solutions & demos", link: "/" %} -{% include "_partials/content-card.md" label: "Browse help center", icon: "/_assets/icons/github.svg", description: "This is a placeholder for a paragraph that guides users to our solutions & demos", link: "/" %} +
+{% include "_partials/support-card.md" label: "Browse Help Center", icon: "/_assets/icons/js.svg", link: "https://help.api.video/en/" %} +{% include "_partials/support-card.md" label: "Ask the Community", icon: "/_assets/icons/js.svg", link: "https://community.api.video/" %}
\ No newline at end of file diff --git a/_assets/css/components/product-card.css b/_assets/css/components/product-card.css index 93464fac..0f02d0b4 100644 --- a/_assets/css/components/product-card.css +++ b/_assets/css/components/product-card.css @@ -49,7 +49,7 @@ ); } -.product-grid-item-header.Player { +.product-grid-item-header.Delivery { background: var( --AV_BG_Gradient, radial-gradient( diff --git a/_partials/content-card.md b/_partials/content-card.md index f5c1a9c1..a924db9e 100644 --- a/_partials/content-card.md +++ b/_partials/content-card.md @@ -7,6 +7,6 @@

{{description}}

-Learn mode +Learn more
\ No newline at end of file diff --git a/delivery-analytics/README.md b/delivery-analytics/README.md index 6f875a6a..0434aebc 100644 --- a/delivery-analytics/README.md +++ b/delivery-analytics/README.md @@ -26,31 +26,22 @@ meta:

+
+
-### (TODO: quick link cards should list the nav elements of the Player & analytics section) +## Start delivering with api.video -## Start working with api.video +
+
+{% include "_partials/content-card.md" label: "Best practices for delivery", icon: "/_assets/icons/js.svg", description: "Learn how to make the most of your delivery.", link: "/delivery-analytics/player-best-practices" %} +{% include "_partials/content-card.md" label: "Analytics", icon: "/_assets/icons/analytics.svg", description: "Start collecting delivery event data about your videos and live streams.", link: "/delivery-analytics/analytics" %} +{% include "_partials/content-card.md" label: "Using custom domains", icon: "/_assets/icons/custom-domains.svg", description: "Maintain your company branding by delivering through custom domains", link: "/delivery-analytics/using-custom-domains" %} +{% include "_partials/content-card.md" label: "Domain referrer restrictions", icon: "/_assets/icons/js.svg", description: "Make sure that your videos and live streams are delivered securely, and only through your domains", link: "/delivery-analytics/domain-referrer" %} +{% include "_partials/content-card.md" label: "In-stream ads", icon: "/_assets/icons/js.svg", description: "Implement in-stream ads to monetize your videos and live streams conveniently.", link: "/delivery-analytics/ads" %} +{% include "_partials/content-card.md" label: "Private videos", icon: "/_assets/icons/js.svg", description: "Learn how you can secure and manage access to your videos.", link: "/delivery-analytics/private-video-get-started" %} +{% include "_partials/content-card.md" label: "Player SDKs", icon: "/_assets/icons/player-sdks.svg", description: "Check out api.video's dedicated video player libraries and SDKs.", link: "/sdks/player#player-sdks" %} +{% include "_partials/content-card.md" label: "Analytics SDKs", icon: "/_assets/icons/analytics.svg", description: "Check out api.video's dedicated libraries and SDKs for delivery analytics.", link: "/sdks/player#player-analytics-sdks" %} +
-
-{% capture vod-quickstart-description %} - -Enable your users to upload and store videos, which can be easily delivered and shared across various platforms. - -
- -{% endcapture %} - -{% capture live-stream-quickstart-description %} - -api.video provides you with the possibility to embed live streaming into your application or project seamlessly. - -
- -{% endcapture %} - -{% include "_partials/vod-quickstart-link-card.md" product: "VOD quickstart", description: vod-quickstart-description, link: "/vod/get-started-in-5-minutes.md" %} -{% include "_partials/live-stream-quickstart-link-card.md" product: "Live stream quickstart", description: live-stream-quickstart-description, link: "/live-streaming/create-a-live-stream.md" %} - -
\ No newline at end of file diff --git a/delivery-analytics/hlsjs-analytics-plugin.md b/delivery-analytics/hlsjs-analytics-plugin.md deleted file mode 100644 index 9507856a..00000000 --- a/delivery-analytics/hlsjs-analytics-plugin.md +++ /dev/null @@ -1,92 +0,0 @@ ---- -title: "Hls.js analytics plugin" -excerpt: "Analytics module for hls.js based video players, to call the api.video analytics collector." -hidden: false -metadata: - title: "hls.js analytics plugin • api.video Documentation" - description: "Analytics module for hls.js based video players, to call the api.video analytics collector." ---- - -# Hlsjs Analytics Plugin - -[api.video](https://api.video) is the video infrastructure for product builders. Lightning fast video APIs for integrating, scaling, and managing on-demand & low latency live streaming features in your app. - -## Project description - -hls.js module to call the api.video analytics collector. - -## Getting started - -### Setup - -Include `https://unpkg.com/@api.video/hlsjs-player-analytics` in your web page. - -```html - -``` - -### Code sample - -Include the module in your HTML file like so: - -```html - - - - - - - - - - - -``` - -## Documentation - -### Module instanciation - -Then, before having instanciated `Hls`, instanciate a `HlsJsApiVideoAnalytics` object. - -The `HlsJsApiVideoAnalytics` constructor take the following parameters: - -| Parameter name | Mandatory | Type | Description | -| -------------: | --------- | ------------------------------------------- | ------------------- | -| hls | **yes** | `Hls` instance | the instance of Hls | -| options | no | `HlsJsApiVideoAnalyticsOptions` (see below) | optional options | - -Available options (`HlsJsApiVideoAnalyticsOptions`): - -| Option name | Mandatory | Type | Description | -| -----------: | --------- | --------------------------------- | ------------------------------------------------------------------------------------------------------------ | -| userMetadata | no | `{ [name: string]: string }[]` | object containing [metadata](https://api.video/blog/tutorials/dynamic-metadata) (see **Full example** below) | -| sequence | no | `{start: number; end?: number;} ` | if only a sequence of the video is going to be played | - -### Instanciation example - -```javascript -var hls = new Hls(); - -new HlsJsApiVideoAnalytics(hls, { - sequence: { - start: 10, - end: 50, - }, - userMetadata: { - gender: "male", - }, -}); -``` - diff --git a/delivery-analytics/navigation.yaml b/delivery-analytics/navigation.yaml index 7ed556bc..864a7118 100644 --- a/delivery-analytics/navigation.yaml +++ b/delivery-analytics/navigation.yaml @@ -18,6 +18,8 @@ href: /delivery-analytics/video-privacy-access-management.md collapsed: true items: + - label: Get started with private videos + href: /delivery-analytics/private-video-get-started.md - label: Delivery with api.video players href: /delivery-analytics/private-video-delivery-web-browser.md - label: Delivery with hls or external players @@ -51,6 +53,4 @@ collapsed: true items: - label: How to - analytics with api.video Player SDK - href: /delivery-analytics/how-to-player-sdk-analytics.md - - label: Using video metadata for analytics - href: /delivery-analytics/using-video-metadata.md \ No newline at end of file + href: /delivery-analytics/how-to-player-sdk-analytics.md \ No newline at end of file diff --git a/delivery-analytics/player-analytics.md b/delivery-analytics/player-analytics.md deleted file mode 100644 index dda66fa4..00000000 --- a/delivery-analytics/player-analytics.md +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: "Player analytics" -slug: "player-analytics" -metadata: - title: "Player analytics • api.video Documentation" - description: "TBA" ---- - -Player analytics -========== - -TBA \ No newline at end of file diff --git a/delivery-analytics/private-video-get-started.md b/delivery-analytics/private-video-get-started.md new file mode 100644 index 00000000..405bbbc2 --- /dev/null +++ b/delivery-analytics/private-video-get-started.md @@ -0,0 +1,262 @@ +--- +title: "Get started with private videos" +--- + +Get started with private videos +=========================================================== + +This article explains how to secure and limit access to videos. + +## Secure & manage access to your videos 🔒 + +Maybe you are asking yourself: “ok, but how does _video privacy_ help me?”. There are quite a few use cases for private videos, and we’ve discussed the hassle of securing the videos yourself. + +- On-demand videos behind a paywall +- Content Protection +- Video NFTs +- Video for internal use only +- Private video messaging +- Disposable one-time videos + +And pretty much any video where you want to limit or restrict access! 🔒 + +## What are private videos? ❓ + +A private video is a video object secured by a private token and can be consumed only once. After the private token is consumed, the video is only available once you have another private token assigned to it. So, even if your user has the video URL, sharing it with anyone else is useless. + +We tried to make it as simple as possible to secure your videos: + +- Create a video container with a `public: false` flag, which will make the video (surprise 🥳) private! +- Private videos will generate a new private token each time a request is made for that video id. +- Each private token is usable only once. + +If you like to get into nitty gritty details, feel free to check out our docs about [Private Videos](/delivery-analytics/video-privacy-access-management.md). + +## How to deliver private videos to your audience 📥 + +After you learn how private video works and what it’s good for, we can now talk about the delivery part, which is the most important part. + +To reiterate the private video concept, here’s a visual representation of how the whole thing works: + +![](/_assets/private-videos.png) + +Knowing that now we can finally start building stuff! + +It’s that simple! (if you want the advanced stuff, scroll down to “Time to roll up our sleeves!”) + +Let’s try to deliver one video in HTML with our own (amazing!) [api.video](http://api.video) player. + +Suppose you already have a cool video uploaded. Go to the dashboard and get make the video private (if it’s not already private) + + + + +Now that the video is private, we can deliver it to users. Here’s a quick snippet in HTML that you can use to play your video in the browser. Just copy the code snippet and replace the URL with your private video URL. You can find the video URLs in the Assets section of the Video Details: + +![](/_assets/link-to-video.png) + + + +```html + + + + + + + +``` + + + +We played the video once with a browser. Now, open another browser tab in incognito mode and play the same video. You can see that it’s gone! no more video! don’t worry; even though the video still exists, the token changes once you consume it. If you refresh the video details page, you’ll notice that the private token has changed. If you paste the URL with the new private token in the `src` you will be able to play the video again in a new tab, but already with a different private token. Cool right? 🙂 + +## Let’s get programmable 🖥️ + +The concept works the same for API requests. You can request the API and fetch the video by id; if it’s a private video the response will give you the URLs with the private tokens (the `XYZ` in the URLs stands for the private token): + +```curl +curl --request GET \ + --url https://ws.api.video/videos/ABC \ + --header 'accept: application/json' \ + --user 'your_api_key:' +``` + + + +```json +{ + "videoId": "ABC", + "title": "test video", + "description": "something that I wanted to share", + "public": false, + "panoramic": false, + "mp4Support": true, + "publishedAt": "2023-01-19T10:19:19+00:00", + "createdAt": "2023-01-19T10:19:19+00:00", + "updatedAt": "2023-01-26T16:55:41+00:00", + "tags": [], + "metadata": [], + "source": { + "type": "upload", + "uri": "/videos/ABC/source" + }, + "assets": { + "iframe": "", + "player": "https://embed.api.video/vod/ABC?token=XYZ", + "hls": "https://vod.api.video/vod/ABC/token/XYZ/hls/manifest.m3u8", + "thumbnail": "https://vod.api.video/vod/ABC/token/XYZ/thumbnail.jpg", + "mp4": "https://vod.api.video/vod/ABC/token/XYZ/mp4/source.mp4" + } +} +``` + + + +## Assets? what assets? 🏠 + +Notice that JSON above has a field called `assets`. We’ll refer to assets later, but it’s important to know what they are. Assets include the URLs for the video thumbnail, iframe with the [api.video](http://api.video) player for embedding directly into the HTML, and several other video formats like `mp4` and `hls`. Now you know! 💡 + +## How to create a sample app with private videos + +Now that we know the privacy setting concepts, it’s time to write some example apps that will give us a small glimpse into what powerful tool we are dealing with here. + +Let’s assume that we want to build an app that will display all the private video thumbnails on our website and make them clickable so it will open a video once it’s clicked. Something like that: + + + + +On the backend, we will have to do some magic. While with public videos it’s pretty simple as just returning the videos, for private videos we will need to get the session first. Let’s look at the HTML code: + +![](/_assets/avh-parameter.png) + +Notice the `avh` parameter in the query string? The `avh` parameter is where you will pass the session token... oh wait, what's a session token?! + +## Session token & session management 💼 + +Session Tokens are designed to retain the same session for a user. Let’s take an example - a user opened a tab with the private video and would like to refresh the tab, or the video didn’t work with our player for whatever reason. Hence, you redirect the user to an mp4 version of that video (different asset). For these cases, we’ve created the session tokens. + +There are two types of tokens for private videos: + +- **Private token** (which we already discussed): generated every time you pull a private video from the API. +- **Session token**: This token is used to retain the private video session with the same private token. + +At a very high level, to request different assets for the same private video, more than having the private token is required; you also need to retain the session. For that, we have the session token. In the flowchart below, you can see that for each private video, we are using a session token + the private token: + +![](/_assets/vod/demo-private-video/52f1d35-Private_videos_post_-_15FEB23.png "Private videos post - 15FEB23.png") + + + +So let’s get a bit technical here. To start the session, you will need to request the `/session` endpoint, get the session token, add it to the first asset you request, and then add it to every following asset you request. In the example above, we will request the `/session` endpoint, then add the session token to the query string of the private video thumbnail → request an embedded video asset with the session token in the query string → request a private video asset in mp4 format with the session token, and so on, you got the idea 😄 + +In other words: + +Get the session token: +``` +GET https://vod.api.video/vod/{videoId}/token/{private token}/session +``` + +Response: +``` +{"session_token": "111-222-333"} +``` + +Now we can request the private video thumbnail asset → embedded video → mp4: + +``` +GET https://vod.api.video/vod/{video id}/token/{private token}/thumbnail.jpg?avh={session token} +``` + +``` +GET https://embed.api.video/vod/{video id}?token={private token}&avh={session token} +``` + +``` +GET https://vod.api.video/vod/{video id}/token/{private token}/mp4/source.mp4?avh={session token} +``` + +Check out a sample runnable code of the above app in Node.js using [Replit](https://replit.com/@ArtemApiVideo/privatevideosexample). + +Let’s do a step-by-step review of what we are doing here. + +1. We are creating a server that will serve HTML on port 3000 with Node.js +2. To make it easy on ourselves, we create a wrapper that will make an HTTP request to [api.video](http://api.video) with api key already embedded in HTTP header. That’s the `apiVideoReq` function. +3. We will get a raw response from the apiVideoReq, so need to create a parser that will parse the JSON response if the request is successful (200). That’s going to be the `getJsonResponse` +4. Then we need to create a function that will get the list of our videos. That’s pretty simple with the wrapper function we have, so let’s reuse the `apiVideoReq` and make a request to `[https://ws.api.video/videos](https://ws.api.video/videos)` endpoint. You can find more info about the `/videos` endpoint here: . The response we'll get is an array of objects of the following format: + +```json +{ + "data": [ + { + "videoId": "XXYYZZ", + "title": "test", + "description": "", + "public": true, + "panoramic": false, + "mp4Support": true, + "publishedAt": "2023-01-17T10:41:51+00:00", + "createdAt": "2023-01-17T10:41:51+00:00", + "updatedAt": "2023-01-17T10:41:51+00:00", + "tags": [], + "metadata": [], + "source": { + "type": "upload", + "uri": "/videos/XXYYZZ/source" + }, + "assets": { + "iframe": "", + "player": "https://embed.api.video/vod/XXYYZZ", + "hls": "https://vod.api.video/vod/XXYYZZ/hls/manifest.m3u8", + "thumbnail": "https://vod.api.video/vod/XXYYZZ/thumbnail.jpg", + "mp4": "https://vod.api.video/vod/XXYYZZ/mp4/source.mp4" + } + }, + { + "videoId": "AABBCC", + "title": "test video", + "description": "something that I wanted to share", + "public": false, + "panoramic": false, + "mp4Support": true, + "publishedAt": "2023-01-19T10:14:05+00:00", + "createdAt": "2023-01-19T10:14:05+00:00", + "updatedAt": "2023-02-09T18:27:06+00:00", + "tags": [], + "metadata": [], + "source": { + "type": "upload", + "uri": "/videos/AABBCC/source" + }, + "assets": { + "iframe": "", + "player": "https://embed.api.video/vod/AABBCC?token=c77d7bf3-4e2f-4a85-9e15-5c35992c11fc", + "hls": "https://vod.api.video/vod/AABBCC/token/c77d7bf3-4e2f-4a85-9e15-5c35992c11fc/hls/manifest.m3u8", + "thumbnail": "https://vod.api.video/vod/AABBCC/token/c77d7bf3-4e2f-4a85-9e15-5c35992c11fc/thumbnail.jpg", + "mp4": "https://vod.api.video/vod/AABBCC/token/c77d7bf3-4e2f-4a85-9e15-5c35992c11fc/mp4/source.mp4" + } + }, + ] +} +``` + +Notice that the second object has a property `public` which is set to `false` , which means that the video is private; hence we need to get all of these videos. + +1. Extract all the private videos from the list by creating an iterator that will run through the array of objects and get each video with the flag `public` set to `false` pushing only the assets and video id into a new array. +2. If you remember, we need to get the session token by requesting the /session endpoint. The endpoint accepts the video id and private token; however, if you notice the private token is only in the URL. So let’s extract it! we can use this simple regex to extract it from the embedded URL `(?<=token=).*$` +3. We first extract the private token from the URL and map it to the asset objects (with the video URL, video id, etc.) +4. Then we request the /session endpoint passing in the video id and private token, and we get the session_token. Now we can also map to the same asset object. +{% raw %} +5. We’re almost done; hang in there! now let’s get generate `` tags with the src as the asset thumbnails and add the session token in the query string as an `avh` parameter, i.e: `` . Then in the same line generate the `` tag that will lead us to the actual video, and as you understood already, it too has to include the session token, i.e: `` +{% endraw %} +6. And lastly, generate the HTML `` and `` while encapsulating the `` we’ve already created, and…. DONE! + +Now you have clickable thumbnails of your private videos which you can secure behind user credentials for example 🙂 + +Let’s summarize what we’ve learned here: + +- We’ve understood how private videos work and the purpose of private videos with real-life use cases. +- We’ve also built a small app to leverage private videos to create clickable thumbnails with minimal code. + +If you have any questions or feedback about this article, do not hesitate to contact our support. You can also find the docs for private videos [here](/delivery-analytics/video-privacy-access-management.md). diff --git a/delivery-analytics/using-video-metadata.md b/delivery-analytics/using-video-metadata.md deleted file mode 100644 index 855f25b0..00000000 --- a/delivery-analytics/using-video-metadata.md +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: "Using video metadata for analytics" -slug: "using-video-metadata" -metadata: - title: "Using video metadata for analytics • api.video Documentation" - description: "TBA" ---- - -Using video metadata for analytics -========== - -TBA \ No newline at end of file diff --git a/delivery-analytics/videojs-analytics-plugin.md b/delivery-analytics/videojs-analytics-plugin.md deleted file mode 100644 index 5c477d36..00000000 --- a/delivery-analytics/videojs-analytics-plugin.md +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: "Video.js analytics plugin" -excerpt: "Analytics module for Video.js based video players, to call the api.video analytics collector." -metadata: - title: "Video.js analytics plugin • api.video Documentation" - description: "Analytics module for Video.js based video players, to call the api.video analytics collector." ---- - -Videojs Analytics Plugin -======================== - -[api.video](https://api.video) is the video infrastructure for product builders. Lightning fast video APIs for integrating, scaling, and managing on-demand & low latency live streaming features in your app. - -## Project description - -video.js plugin to call the api.video analytics collector. - -## Getting started - -### Installation - -#### Method #1: requirejs - -If you use requirejs you can add the plugin as a dependency to your project with - -```sh -$ npm install --save @api.video/videojs-player-analytics -``` - -You can then use the plugin in your script: - -```javascript -var videojs = require('video.js'); -var { VideoJsApiVideoAnalytics } = require('@api.video/videojs-player-analytics'); - -videojs.registerPlugin('apiVideoAnalytics', VideoJsApiVideoAnalytics); -const player = videojs('my-video'); -player.apiVideoAnalytics(); -``` - -#### Method #2: typescript - -If you use Typescript you can add the plugin as a dependency to your project with - -```sh -$ npm install --save @api.video/videojs-player-analytics -``` - -You can then use the plugin in your script: - -```typescript -import videojs from 'video.js'; -import { VideoJsApiVideoAnalytics } from '@api.video/videojs-player-analytics'; - -videojs.registerPlugin('apiVideoAnalytics', VideoJsApiVideoAnalytics); -const player = videojs('my-video'); -player.apiVideoAnalytics(); - - -``` - -#### Method #3: simple include in a javascript project - -Include the plugin in your HTML file like so: - -```html - - - - - - - - - - - - - - -``` diff --git a/get-started/start-building.md b/get-started/start-building.md index 7c013739..4a5e3a5e 100644 --- a/get-started/start-building.md +++ b/get-started/start-building.md @@ -18,26 +18,15 @@ Within this section, you can find essential insights into building with api.vide api.video is a cloud-based video hosting and live streaming platform that provides developers and businesses with an easy-to-use API to handle all video-related tasks. The platform offers a range of features to help developers and businesses manage video content, including video hosting, transcoding, player customization, live streaming, and analytics. -### (TODO: quick link cards should list the nav elements of the Get started section) +
-
-{% capture vod-quickstart-description %} +
-Enable your users to upload and store videos, which can be easily delivered and shared across various platforms. +## Start building with api.video -
- -{% endcapture %} - -{% capture live-stream-quickstart-description %} - -api.video provides you with the possibility to embed live streaming into your application or project seamlessly. - -
- -{% endcapture %} - -{% include "_partials/vod-quickstart-link-card.md" product: "VOD quickstart", description: vod-quickstart-description, link: "/vod/get-started-in-5-minutes.md" %} -{% include "_partials/live-stream-quickstart-link-card.md" product: "Live stream quickstart", description: live-stream-quickstart-description, link: "/live-streaming/create-a-live-stream.md" %} +
+
+{% include "_partials/content-card.md" label: "VOD quickstart", icon: "/_assets/icons/vod-quickstart.svg", description: "Get up to speed about the concept of VOD through building a video uploader and a video listing service in this quickstart guide.", link: "/vod/get-started-in-5-minutes" %} +{% include "_partials/content-card.md" label: "Live streaming quickstart", icon: "/_assets/icons/livestream-quickstart.svg", description: "api.video enables you to embed live streaming into your application or project seamlessly. Start building now!", link: "/live-streaming/create-a-live-stream" %}
\ No newline at end of file diff --git a/live-streaming/README.md b/live-streaming/README.md index fb6a5cee..8b7f926b 100644 --- a/live-streaming/README.md +++ b/live-streaming/README.md @@ -24,31 +24,17 @@ meta:

+
+
-### (TODO: quick link cards should list the nav elements of the Live stream section) +## Start streaming with api.video -## Start working with api.video - - -
-{% capture vod-quickstart-description %} - -Enable your users to upload and store videos, which can be easily delivered and shared across various platforms. - -
- -{% endcapture %} - -{% capture live-stream-quickstart-description %} - -api.video provides you with the possibility to embed live streaming into your application or project seamlessly. - -
- -{% endcapture %} - -{% include "_partials/vod-quickstart-link-card.md" product: "VOD quickstart", description: vod-quickstart-description, link: "/vod/get-started-in-5-minutes.md" %} -{% include "_partials/live-stream-quickstart-link-card.md" product: "Live stream quickstart", description: live-stream-quickstart-description, link: "/live-streaming/create-a-live-stream.md" %} +
+
+{% include "_partials/content-card.md" label: "Live streaming quickstart", icon: "/_assets/icons/livestream-quickstart.svg", description: "api.video enables you to embed live streaming into your application or project seamlessly. Start building now!", link: "/live-streaming/create-a-live-stream" %} +{% include "_partials/content-card.md" label: "Working with live streams", icon: "/_assets/icons/livestream-management.svg", description: "Learn about the different operations you can use to manage your live streams.", link: "/live-streaming/working-with-live-streams" %} +{% include "_partials/content-card.md" label: "Live streaming SDKs", icon: "/_assets/icons/livestream-sdks.svg", description: "Check out api.video's dedicated libraries and SDKs for live streaming.", link: "/sdks/livestream" %} +{% include "_partials/content-card.md" label: "No-code solutions for live streaming", icon: "/_assets/icons/no-code.svg", description: "Build your solution without code using api.video's supported no-code plugins.", link: "/sdks/nocode" %}
\ No newline at end of file diff --git a/live-streaming/live-stream-management.md b/live-streaming/live-stream-management.md deleted file mode 100644 index b4a73589..00000000 --- a/live-streaming/live-stream-management.md +++ /dev/null @@ -1,17 +0,0 @@ -

- - What is - - live streaming - ? -

-

- -

- api.video's live streaming service enables you to stream live video content to any device in real time. - You can create custom video players with api.video's player customization feature, - which empowers you to change the appearance and functionality of the player to suit your needs. -
-

diff --git a/reference/README.md b/reference/README.md index b3ee15c6..10f90aa1 100644 --- a/reference/README.md +++ b/reference/README.md @@ -1,6 +1,25 @@ -# Introduction - -This page will describe how to authenticate, setup and securely implement api.video with your product. +--- +title: "API reference" +slug: "reference" +hide_side_table_of_contents: true +meta: + description: The API reference serves as a practical developers' documentation about api.video's solutions for video on demand, live streaming, and delivery. +--- + +

+ + api.video + + API reference +

+

+ +

+ This page describes how to authenticate, set up, and securely implement the api.video API solutions with your product. +
+

api.video API is built with the [REST API](https://en.wikipedia.org/wiki/Representational_state_transfer) standard, the most common standard used today. diff --git a/sdks/README.md b/sdks/README.md index de142e5d..dbfec3e1 100644 --- a/sdks/README.md +++ b/sdks/README.md @@ -5,54 +5,33 @@ meta: description: Cloud-based video hosting and live streaming platform with analytics. Mobile and web SDKs for VOD, live streaming, and player for NodeJS, Javascript, Typescript, Python, Go, PHP, C#, Swift, and Kotlin. --- -
+

+ + api.video + + Libraries & SDKs +

+

-## Welcome to the **api.video** SDK catalog +

+ api.video simplifies complex video infrastructure processes and provides the basis for creating fast, reliable, and scalable custom video experiences. api.video offers simple and transparent APIs for integrating, scaling, and managing on-demand & low latency live streaming features in your applications. +
+

-api.video simplifies complex video infrastructure processes and provides the basis for creating fast, reliable, and scalable custom video experiences. api.video offers simple and transparent APIs for integrating, scaling, and managing on-demand & low latency live streaming features in your applications. +
-
- -api.video offers these library & SDK families: - -
- -{% capture api-client-sdks-description %} - -Seamlessly integrate video on demand or live streaming into your current tech stack. - -
- -{% endcapture %} - -{% capture vod-sdks-description %} - -Enable your users to upload and store videos, which can be easily delivered and shared across various platforms. - -
+
-{% endcapture %} +## Start implementing with api.video -{% capture live-stream-sdks-description %} - -api.video provides you with the possibility to embed live streaming into your application or project seamlessly. - -
- -{% endcapture %} - -{% capture player-analytics-sdks-description %} - -api.video lets you customize a large part of the delivery, whether it's the player's branding or adding captions, chapters, and watermarks. - -
- -{% endcapture %} - - -{% include "_partials/api-client-sdks-card.md" product: "API client SDKs", description: api-client-sdks-description, link: "/sdks/api-clients/README.md" %} -{% include "_partials/vod-sdks-card.md" product: "VOD SDKs", description: vod-sdks-description, link: "/sdks/vod/README.md" %} -{% include "_partials/live-stream-sdks-card.md" product: "Live streaming SDKs", description: live-stream-sdks-description, link: "/sdks/livestream/README.md" %} -{% include "_partials/player-analytics-sdks-card.md" product: "Player & analytics SDKs", description: player-analytics-sdks-description, link: "/sdks/player/README.md" %} +
+
+{% include "_partials/content-card.md" label: "API client SDKs", icon: "/_assets/icons/github.svg", description: "Seamlessly integrate video on demand or live streaming into your current tech stack.", link: "/sdks/api-clients" %} +{% include "_partials/content-card.md" label: "VOD SDKs", icon: "/_assets/icons/videos-sdks.svg", description: "Enable your users to upload and store videos, which can be easily delivered and shared across various platforms.", link: "/sdks/vod" %} +{% include "_partials/content-card.md" label: "Live streaming SDKs", icon: "/_assets/icons/livestream-sdks.svg", description: "api.video provides you with the possibility to embed live streaming into your application or project seamlessly.", link: "/sdks/livestream" %} +{% include "_partials/content-card.md" label: "Delivery & analytics SDKs", icon: "/_assets/icons/player-sdks.svg", description: "api.video lets you customize a large part of the delivery, whether it's the player's branding or adding captions, chapters, and watermarks.", link: "/sdks/player" %} +{% include "_partials/content-card.md" label: "No-code solutions", icon: "/_assets/icons/no-code.svg", description: "Build your solution without code using api.video's supported no-code plugins.", link: "/sdks/nocode" %}
\ No newline at end of file diff --git a/vod/README.md b/vod/README.md index 876d7d09..4313de5d 100644 --- a/vod/README.md +++ b/vod/README.md @@ -23,31 +23,21 @@ api.video's transcoding and delivery is one of the fastest in the market.

+
- -### (TODO: quick link cards should list the nav elements of the VOD section) +
## Start working with api.video - -
-{% capture vod-quickstart-description %} - -Enable your users to upload and store videos, which can be easily delivered and shared across various platforms. - -
- -{% endcapture %} - -{% capture live-stream-quickstart-description %} - -api.video provides you with the possibility to embed live streaming into your application or project seamlessly. - -
- -{% endcapture %} - -{% include "_partials/vod-quickstart-link-card.md" product: "VOD quickstart", description: vod-quickstart-description, link: "/vod/get-started-in-5-minutes.md" %} -{% include "_partials/live-stream-quickstart-link-card.md" product: "Live stream quickstart", description: live-stream-quickstart-description, link: "/live-streaming/create-a-live-stream.md" %} - +
+ +
+{% include "_partials/content-card.md" label: "What is a video object?", icon: "/_assets/icons/video-object.svg", description: "Learn about the basic building block of api.video's VOD solution.", link: "/vod/video-object" %} +{% include "_partials/content-card.md" label: "VOD quickstart", icon: "/_assets/icons/vod-quickstart.svg", description: "Get up to speed about the concept of VOD through building a video uploader and a video listing service in this quickstart guide.", link: "/vod/get-started-in-5-minutes" %} +{% include "_partials/content-card.md" label: "Templates & demos", icon: "/_assets/icons/solutions-demos.svg", description: "Try api.video's interactive VOD demos, and build your own app with our free repository templates.", link: "/vod/demos-template-overview" %} +{% include "_partials/content-card.md" label: "Video upload", icon: "/_assets/icons/video-ingestion.svg", description: "Understand the different way you can manage video ingestion using api.video.", link: "/vod/upload-a-video-regular-upload" %} +{% include "_partials/content-card.md" label: "Using tokens", icon: "/_assets/icons/tokens.svg", description: "Learn about how api.video offers different authentication methods for video upload using tokens.", link: "/vod/using-tokens" %} +{% include "_partials/content-card.md" label: "Video management basics", icon: "/_assets/icons/video-object-management.svg", description: "Check out this guide to understand the different operations you can use in api.video's solutions for VOD.", link: "/vod/upload-a-video-regular-upload" %} +{% include "_partials/content-card.md" label: "VOD SDKs", icon: "/_assets/icons/videos-sdks.svg", description: "Check out api.video's dedicated libraries and SDKs for video on demand.", link: "/sdks/vod" %} +{% include "_partials/content-card.md" label: "No-code solutions for VOD", icon: "/_assets/icons/no-code.svg", description: "Build your solution without code using api.video's supported no-code plugins.", link: "/sdks/nocode" %}
\ No newline at end of file