Creating an accessible Player

Written by Stuart Auld

Last published at: June 26th, 2020

Viostream Players include a number of features designed to achieve WCAG 2.0 compliance. When used in conjunction with our other accessibility features, an accessible player ensures that vision or hearing-impaired viewers are able to access your media assets.

This guide will step you through the process of creating an accessible Player and using it to distribute your content.

Create a Player

This step is optional; if you wish to use an existing Player please navigate to that Player and proceed to the next step.

To create a new player in your Viostream account, please follow the steps below.

  1. Navigate to the Players tab.
  2. In the top right of the screen, click on the + New player button.
  3. On the pop-up window, enter a name for the player.
  4. Click the Create button.


You will then be taken to the Player page where you can customise the settings.

‍   

Apply accessibility settings

In order to make your Player accessible, simply toggle on the Closed captions, Keyboard controls and Transcript download settings, and click the Save button.


Now that you have created an accessible Player, there are three main ways you can use it to distribute your content.

Set the Player as your account default

New Viostream accounts use a default Viostream Player with some standard settings. You can set a custom Player to be your account default Player. This will impact all links and embed for assets across the account, unless a specific player is specified on a per-embed basis.

  1. Navigate to the Players tab.
  2. Select the Title of the Player you wish to make default.
  3. Click the Set as default player toggle.
  4. Click OK to confirm.
  5. You can confirm on the Players tab that the correct default has been set.



‍ 

Use a Player-specific embed code

Viostream allows you to select a specific Player every time you embed a media asset or a Channel.

To choose the Player in your embed, simply add the playerKey attribute to your script or iframe embed.

Script example

<script src="https://publish.viostream.com/player/nz6rphenhea7xp?playerKey=s-nhj15se"></script>

Iframe example

<iframe style="width:640px; height:360px; border:none; overflow: hidden" src="https://publish.viostream.com/player/iframe/nz6rphenhea7xp?playerKey=s-nhj15se" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

You can also copy the Player-specific embed codes for a media asset or Channel from within Viostream. Simply navigate to the relevant Distribution page, select your preferred player and copy the embed code.


‍ 

Apply the Player to a Site


Updating the Player used on a Site is a simple process:

  1. Navigate to the Sites tab.
  2. Select the Title of the Site you wish to update.
  3. Select the Player you wish to use.
  4. Press the Save button.
  5. Click the Launch Editor link. This will open in a new tab.
  6. Click the Publish tab, and click the blue Publish button to confirm.