Skip to content

Commit

Permalink
Merge pull request #293 from apivideo/Add-missing-image-alt-tags
Browse files Browse the repository at this point in the history
Add missing image alt tags
  • Loading branch information
szekelyzol authored Oct 10, 2023
2 parents f680819 + 189a234 commit 564d8f0
Show file tree
Hide file tree
Showing 31 changed files with 68 additions and 68 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -205,7 +205,7 @@ $playerTheme = $client->playerThemes()->create($playerThemeCreationPayload);

The following code will give us this effect:

![](/_assets/delivery-analytics/delivery-quickstart/delivery-quickstart-player-purple.png)
![Showing customized player UI](/_assets/delivery-analytics/delivery-quickstart/delivery-quickstart-player-purple.png)

The response that you should expect will contain the `playerId` that we will use in the next step.

Expand Down Expand Up @@ -372,7 +372,7 @@ func main() {

After you've added the image, it will look similar to this:

![](/_assets/delivery-analytics/delivery-quickstart/player-logo.png)
![Showing a custom logo in the api.video player](/_assets/delivery-analytics/delivery-quickstart/player-logo.png)


### Assign the theme to a video
Expand Down
4 changes: 2 additions & 2 deletions templates/documentation/delivery-analytics/domain-referrer.md
Original file line number Diff line number Diff line change
Expand Up @@ -26,11 +26,11 @@ Leveraging the [referer header](https://developer.mozilla.org/en-US/docs/Web/HTT

For example, you've requested to allow list: `https://some.domain.com` and the video is hosted in that domain:

![](/_assets/domain-referrer-fig-1.png)
![Showing website domain referrer via inspector tool](/_assets/domain-referrer-fig-1.png)

What happens if the same video is embedded in a different website? In this case, the video will return a `403` error, as the referrer header is different from what was allowed:

![](/_assets/domain-referrer-fig-2.png)
![Showing website domain referrer via inspector tool](/_assets/domain-referrer-fig-2.png)

## Domain referrer restriction with videos on native mobile players

Expand Down
20 changes: 10 additions & 10 deletions templates/documentation/delivery-analytics/player-customization.md
Original file line number Diff line number Diff line change
Expand Up @@ -35,16 +35,16 @@ You can add a clickable custom company logo to your videos.
| Parameter Name | Description | Type | Default |
|------------------|------------------------------------------------------|---------|--------------------------|
| `name` | The name of the player theme | string | |
| `text` | RGBA color for timer text. ![](/_assets/delivery-analytics/player-customization/fac4eaf-Screenshot_2023-03-13_at_10.49.30.png) | string | rgba(255, 255, 255, 1) |
| `link` | RGBA color for all controls. ![](/_assets/delivery-analytics/player-customization/12127f5-Screenshot_2023-03-13_at_10.53.12.png) | string | rgba(255, 255, 255, 1) |
| `linkHover` | RGBA color for controls when hovering over. ![](/_assets/delivery-analytics/player-customization/e72c530-Screenshot_2023-03-13_at_10.58.17.png) | string | rgba(255, 255, 255, 1) |
| `linkActive` | RGBA color for the play button when hovered. ![](/_assets/delivery-analytics/player-customization/cb636b9-Screenshot_2023-03-13_at_11.02.36.png) | string | rgba(255, 255, 255, 1) |
| `trackPlayed` | RGBA color playback bar: played content. ![](/_assets/delivery-analytics/player-customization/bea91e5-Screenshot_2023-03-13_at_11.07.45.png) | string | rgba(88, 131, 255, .95) |
| `trackUnplayed` | RGBA color playback bar: downloaded but unplayed (buffered) content. ![](/_assets/delivery-analytics/player-customization/fabe2f3-Screenshot_2023-03-13_at_11.13.49.png) | string | rgba(255, 255, 255, .35) |
| `trackBackground`| RGBA color playback bar: background. ![](/_assets/delivery-analytics/player-customization/255d36f-Screenshot_2023-03-13_at_11.16.25.png) | string | rgba(255, 255, 255, .2) |
| `backgroundTop` | RGBA color: top 50% of background. ![](/_assets/delivery-analytics/player-customization/5a5e240-Screenshot_2023-03-13_at_11.20.17.png) | string | rgba(0, 0, 0, .7) |
| `backgroundBottom`| RGBA color: bottom 50% of background. ![](/_assets/delivery-analytics/player-customization/554522c-Screenshot_2023-03-13_at_11.23.41.png) | string | rgba(0, 0, 0, .7) |
| `backgroundText` | RGBA color for title text. ![](/_assets/delivery-analytics/player-customization/8ef21b7-Screenshot_2023-03-13_at_11.26.03.png) | string | rgba(255, 255, 255, 1) |
| `text` | RGBA color for timer text. ![Setting the timer text color](/_assets/delivery-analytics/player-customization/fac4eaf-Screenshot_2023-03-13_at_10.49.30.png) | string | rgba(255, 255, 255, 1) |
| `link` | RGBA color for all controls. ![Setting the player control color](/_assets/delivery-analytics/player-customization/12127f5-Screenshot_2023-03-13_at_10.53.12.png) | string | rgba(255, 255, 255, 1) |
| `linkHover` | RGBA color for controls when hovering over. ![Setting the player control hover color](/_assets/delivery-analytics/player-customization/e72c530-Screenshot_2023-03-13_at_10.58.17.png) | string | rgba(255, 255, 255, 1) |
| `linkActive` | RGBA color for the play button when hovered. ![Setting the play button hover color](/_assets/delivery-analytics/player-customization/cb636b9-Screenshot_2023-03-13_at_11.02.36.png) | string | rgba(255, 255, 255, 1) |
| `trackPlayed` | RGBA color playback bar: played content. ![Setting the playback bar color for already played section](/_assets/delivery-analytics/player-customization/bea91e5-Screenshot_2023-03-13_at_11.07.45.png) | string | rgba(88, 131, 255, .95) |
| `trackUnplayed` | RGBA color playback bar: downloaded but unplayed (buffered) content. ![Setting the playback bar color for unplayed, buffered section](/_assets/delivery-analytics/player-customization/fabe2f3-Screenshot_2023-03-13_at_11.13.49.png) | string | rgba(255, 255, 255, .35) |
| `trackBackground`| RGBA color playback bar: background. ![Setting the playback bar background color](/_assets/delivery-analytics/player-customization/255d36f-Screenshot_2023-03-13_at_11.16.25.png) | string | rgba(255, 255, 255, .2) |
| `backgroundTop` | RGBA color: top 50% of background. ![Setting the player's top 50% background color](/_assets/delivery-analytics/player-customization/5a5e240-Screenshot_2023-03-13_at_11.20.17.png) | string | rgba(0, 0, 0, .7) |
| `backgroundBottom`| RGBA color: bottom 50% of background. ![Setting the player's lower 50% background color](/_assets/delivery-analytics/player-customization/554522c-Screenshot_2023-03-13_at_11.23.41.png) | string | rgba(0, 0, 0, .7) |
| `backgroundText` | RGBA color for title text. ![Setting the title text color](/_assets/delivery-analytics/player-customization/8ef21b7-Screenshot_2023-03-13_at_11.26.03.png) | string | rgba(255, 255, 255, 1) |
| `enableControls` | Enabled or disabled player controls. | boolean | True |
| `enableApi` | Enable/disable player SDK access. | boolean | True |
| `forceAutoplay` | Enable/disable player autoplay. | boolean | False |
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ Suppose you already have a cool video uploaded. Go to the dashboard and get make

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)
![Showing the link assets in the Video details screen on the Dashboard](/_assets/link-to-video.png)



Expand Down Expand Up @@ -130,7 +130,7 @@ Let’s assume that we want to build an app that will display all the private vi

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)
![Grabbing the avh parameter for a private video](/_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?!

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@ Video will play to end and automatically restart. This example will autoplay and

If your video has captions, you can make them appear by default by adding the #show-subtitles url parameter to the player url:

![](/_assets/show-captions.png)
![Showing video captions in the api.video player](/_assets/show-captions.png)

### 8. Download

Expand Down
20 changes: 10 additions & 10 deletions templates/documentation/get-started/azure-migration.md
Original file line number Diff line number Diff line change
Expand Up @@ -34,15 +34,15 @@ To enable the Video Import Tool access to the videos in your Azure Blob Storage

1. Navigate to your storage account and click on "Shared Access Signature":

![](/_assets/get-started/azure-migration/azure-4.png)
![Generating a Shared Access Signature](/_assets/get-started/azure-migration/azure-4.png)

2. Enable the required parameters:

![](/_assets/get-started/azure-migration/azure-storage-doc-11.png)
![Enabling required parameters](/_assets/get-started/azure-migration/azure-storage-doc-11.png)

3. Ensure that you generate the Shared Access Signature. Once you have the links, copy the Blob Service SAS URL.

![](/_assets/get-started/azure-migration/azure-6.png)
![Copying the Blob service SAS URL](/_assets/get-started/azure-migration/azure-6.png)

4. Finally, paste the URL into the "SAS URL" field of the Import Tool.

Expand Down Expand Up @@ -134,7 +134,7 @@ let mediaServicesClient: AzureMediaServices;

let remoteSasUrl: string = process.env.REMOTESTORAGEACCOUNTSAS as string;
```
![](/_assets/get-started/azure-migration/azure-1.png)
![Selecting the api.video media service on Azure](/_assets/get-started/azure-migration/azure-1.png)
{% capture content %}
Note that in the previous step, you will also need to update the .env file and grab the parameters from Azure. In order to do that, navigate to your Azure Media Service, and select the directory that you would like to migrate.
{% endcapture %}
Expand All @@ -143,25 +143,25 @@ Note that in the previous step, you will also need to update the .env file and g

5. Select API keys and copy over the parameters presented in the `.ENV` pane (you can select either User Authentication or Service principal authentication)

![](/_assets/get-started/azure-migration/azure-2.png)
![Selecting API Access for media services](/_assets/get-started/azure-migration/azure-2.png)

![](/_assets/get-started/azure-migration/azure-3.png)
![Selecting the .ENV credentials pane](/_assets/get-started/azure-migration/azure-3.png)

6. To get access to the storage, navigate to the Azure Storage Account → Shared access signature:

![](/_assets/get-started/azure-migration/azure-4.png)
![Generating Shared Access Signature](/_assets/get-started/azure-migration/azure-4.png)

7. Allow the following:

![](/_assets/get-started/azure-migration/azure-5.png)
![Enabling required parameters](/_assets/get-started/azure-migration/azure-5.png)

![](/_assets/get-started/azure-migration/azure-6.png)
![Copying the Blob service SAS URL](/_assets/get-started/azure-migration/azure-6.png)

Make sure that you generate the Shared access signature and once you have the links, copy the Blob service SAS URL link to the `.env` file. The parameter you are looking for is `REMOTESTORAGEACCOUNTSAS`

8. Add the api.video API key to the .env file by navigating to the [api.video dashboard](https://dashboard.api.video/overview) and copy the API key value

![](/_assets/get-started/azure-migration/azure-7.png)
![Copying the api.video API key](/_assets/get-started/azure-migration/azure-7.png)

9. Now, `run npm install` in the terminal in order to install all of the node modules
10. Run `npm run build`
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -177,7 +177,7 @@ If you don't want to retrieve details about a live stream programmatically, you

4. When you click on a container title, you'll get a pop-up with some quick details about the live stream container. If you want full details, click **See details**. This will bring up all information about the live stream container you wanted to review.

![](/_assets/show-livestream.png)
![Showing the live stream details](/_assets/show-livestream.png)

## Update a live stream

Expand Down Expand Up @@ -299,7 +299,7 @@ You can update live stream details from your dashboard if you don't want to retr

4. Click **See details** to open a display of complete information about your live stream.

![](/_assets/show-livestream.png)
![Showing the live stream details](/_assets/show-livestream.png)

5. You can change the title of your live stream, upload a thumbnail, and associate a player ID on this screen. When you're done, click **Save**.

Expand Down
2 changes: 1 addition & 1 deletion templates/documentation/reference/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ There are two environments that you can utilize right now. Before you upgrade yo

Once you've upgraded you can switch between sandbox and production by toggling the button on the [overview page](https://dashboard.api.video/overview) on the api.video dashboard.

![](/_assets/reference/a3713b2-Screenshot_2023-02-23_at_18.29.00.png "Screenshot 2023-02-23 at 18.29.00.png")
![Switching to the sandbox environment in the Dashboard](/_assets/reference/a3713b2-Screenshot_2023-02-23_at_18.29.00.png "Screenshot 2023-02-23 at 18.29.00.png")

{% capture content %}
**The sandbox mode has these limitations**
Expand Down
2 changes: 1 addition & 1 deletion templates/documentation/reference/authentication-guide.md
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ You'll need your API key to get started. You can sign up for one here: [Get your
3. You will always be able to choose to use your Sandbox API key. If you want to use the Production API key instead, select a plan and enter your credit card information.
4. Grab the key you want, and you're ready to get started!

![](/_assets/retrieve-api-key.png)
![Managing the API keys in the Dashboard](/_assets/retrieve-api-key.png)

## Basic Authentication

Expand Down
2 changes: 1 addition & 1 deletion templates/documentation/reference/basic-authentication.md
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ There are separate API keys for Sandbox and Production [environment](/reference/

In production, you can also manage multiple API keys from your dashboard, for different applications.

![](/_assets/production-api-key.png)
![Managing the API keys on the dashboard](/_assets/production-api-key.png)

### Basic Auth Request 🔒

Expand Down
4 changes: 2 additions & 2 deletions templates/documentation/reference/postman-collection.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,11 @@ The official Postman collection for api.video (coming soon!)
1. Click the button above
2. Add your [API key](https://dashboard.api.video/apikeys) to the Variables

![](/_assets/postman-1.png)
![Adding api.video API keys as Postman variables](/_assets/postman-1.png)

3. Add the API Key variable to Authorization

![](/_assets/postman-2.png)
![Adding the API key as a variable for Postman authorization](/_assets/postman-2.png)

## Switching environments

Expand Down
18 changes: 9 additions & 9 deletions templates/documentation/sdks/nocode/bubbleio-api-calls.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ In order to use the API, you have to put your api.video private API key in the d

To do this, go to the "Plugins" tab on the left, select "Api.video" and paste the value of your api key into the "Api key" field:

![](/_assets/bubbleio_2.png)
![Pasting the api.video API key](/_assets/bubbleio_2.png)

## Action API calls

Expand All @@ -31,12 +31,12 @@ Let's imagine you'd like to delete a specific video when a user clicks on a butt
- first, create a new button element, go in its properties, and click on "Start/edit workflow":


![](/_assets/bubbleio_9.png)
![Defining an action for a button](/_assets/bubbleio_9.png)

- in the workflow page, click on "Click here to add an action" and select "authenticate - delete a video" in the "Plugins" tab:


![](/_assets/bubbleio_10.png)
![Selecting an api.video plugin action](/_assets/bubbleio_10.png)

- the properties popup of the action appears, enter the video id you want to delete in the "(path) videoId" field, and you're all done.

Expand All @@ -63,27 +63,27 @@ For example, you can create an upload token for each user of your application. T
In the workflow action that sign the users up, click on the "Change another field" button:


![](/_assets/bubbleio_11.png)
![Adding an action to the user creation flow](/_assets/bubbleio_11.png)

Then, select "create a new field", and create a field called "uploadtoken", with the type "text":


![](/_assets/bubbleio_12.png)
![Showing the Create a new field modal](/_assets/bubbleio_12.png)

Click on the link to associate a value to the field and select "Get data from an external API":


![](/_assets/bubbleio_13.png)
![Associating a value with the new field](/_assets/bubbleio_13.png)

Then, select "authenticate - generate upload token" in the API provider field and clear the "TTL" field to have a token that will never expire:



![](/_assets/bubbleio_14.png)
![Setting up token expiration](/_assets/bubbleio_14.png)

Finally, close the "authenticate - generate upload token" popup and select "'s token" to use the "token" attribute from the API response:

![](/_assets/bubbleio_15.png)
![Selecting the token attribute from the API response](/_assets/bubbleio_15.png)

By doing this, you assign a unique upload token to each user that you can use in the uploader element. This can be considered a good practice because if one of your users abuses the token (if he uploads more than you would like), you'll be able to delete this token from api.video without any impact on your other users.

Expand All @@ -94,7 +94,7 @@ This API call will return the status of a given video. For more details about vi
In response to this call, one value is beneficial: the "playable" value. It indicates whether your video is ready to be played or not yet. For example, you can display a video player only when the video is ready to be played:


![](/_assets/bubbleio_16.png)
![Setting up a conditional action](/_assets/bubbleio_16.png)

### List all videos

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,12 +11,12 @@ Bubble.io Player Element
## Basic usage

To add a video player to a page of your site, click on the "api.video player" item of the Visual elements list.
![](/_assets/bubbleio_4.png)
![Adding the api.video player element](/_assets/bubbleio_4.png)
Then, draw the player on your page using your mouse, like you do we any other Visual component. Once done, double-click on the player to open the window for editing its properties.

You should see something like that:

![](/_assets/bubbleio_5.png)
![Editing the properties of the api.video player element](/_assets/bubbleio_5.png)
As you can see, there is a list of specific attributes that you can use to customize your player:


Expand All @@ -32,7 +32,7 @@ As you can see, there is a list of specific attributes that you can use to custo
| loop | no (default: false) | boolean | once the video is finished, it automatically starts again |

Once you've entered a videoId, you can click on "preview" to see your player in action.
![](/_assets/bubbleio_6.png)
![Previewing the api.video player element](/_assets/bubbleio_6.png)

## Events

Expand All @@ -55,7 +55,7 @@ Here is the list of all events triggered by the player:

To perform an action when an event occurs, go to the workflow tab, create a new workflow, and as a trigger condition, select "Elements -> A api.video player ..." :

![](/_assets/bubbleio_7.png)
![Defining an event and a trigger condition](/_assets/bubbleio_7.png)

## Exposed state

Expand Down
4 changes: 2 additions & 2 deletions templates/documentation/sdks/nocode/bubbleio-plugin.md
Original file line number Diff line number Diff line change
Expand Up @@ -27,12 +27,12 @@ To benefit from all this, the first step is to install the plugin in your applic
To install the api.video plugin, when you are on the editing interface of your application, you must go to the "Plugins" tab and click on "Add plugins," as described in the following screenshot.


![](/_assets/bubbleio_1.jpg)
![Adding bubble.io plugins](/_assets/bubbleio_1.jpg)


After that, search for the term "api.video" in the window that has just appeared. You should have only one result. Click on the "Install" button.


![](/_assets/bubbleio_3.png)
![Installing api.video's bubble.io plugin](/_assets/bubbleio_3.png)

Now you are ready to use the plugin!
2 changes: 1 addition & 1 deletion templates/documentation/sdks/nocode/bubbleio-uploader.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ It comes as a customizable button that opens a file selector when clicked. Once
To add an uploader element on a page, click on the "api.video uploader" item of the Input form elements list.


![](/_assets/bubbleio_8.png)
![Adding the api.video uploader element](/_assets/bubbleio_8.png)

Then, draw the uploader on your page using your mouse, like you do we any other Visual component. You can change the style of the element as you usually do. Once done, double-click on the player to open the window for editing its properties.

Expand Down
Loading

0 comments on commit 564d8f0

Please sign in to comment.