Skip to Main Content

The Oz Player

The Oz Player is an “overlay” that replaces the standard HTML5 media elements with accessible buttons and controls supporting keyboard access and use by assistive technologies. The Oz Player meets WCAG 2.0, Level AA requirements and supports the playback of local media content as well as YouTube and Vimeo Pro videos. The Oz Player files can be sourced from a college’s web server or the player content-delivery network (CDN). The Oz Player will also support audio descriptions, but that is not covered in the following examples.

The CCC Accessibility Center has acquired a license for California Community Colleges to use at no cost for college and district websites and affiliated projects.

Oz Player with YouTube Video

Video Transcript
 

 

This version of the Oz Player is using video streamed from YouTube, but with the captions sourced from the college’s web server. This version of the Oz Player has the “CC” button present allowing the user to show or hide the captions. Although you can add captions to YouTube videos, there is no simple option to show or hide those captions as streamed from YouTube due to limitations in YouTube's video API. At this time, the recommendation is to add captions to both the YouTube video as well as reference these caption files for the Oz Player.

Implementation

The Oz Player is a set of JavaScript and CSS files that overlay the standard HTML5 media elements (e.g., <video>, <audio>, etc.) with the accessible buttons and controls. These JavaScript and CSS files may be referenced from a college’s local web server or loaded from the Oz Player’s CDN via URLs in the page code. The instructions below focus on captioning, although audio descriptions are also supported by the Oz Player.

College domains must be whitelisted before they will function with the CDN solution.

Getting Started

  1. Register your college domain.
  2. Visit the Oz Player Code Generator.
  3. Enter the video’s URL and select the video type (i.e., YouTube or MP4).
  4. Add the URL to the video poster image (optional). If using YouTube as the source, leave blank.

Screenshot of basic options for Code Generator.

 

Options

  1. Select the preferred color of the buttons for your version of the Oz Player.
  2. If the captions are in English, leave the Language field as “en”.
  3. If there will be more than one video per page, provide a unique value in the Video ID field (e.g., videoName_date, etc.).

Screenshot of Options for Code Generator.

Captions

  1. Provide the URL to the caption file. This is often easiest to upload your caption file to the server and then determine the full URL to the file. This must be a .VTT file.
  2. If you choose, you can also provide a URL to the Transcript Extras which is a separate file that can be used to describe visual details, such as text shown on the screen, and to transcribe the spoken text of audio descriptions. This file will also have to be a .VTT file and synchronized with the original video.

Screenshot of Caption fields for Code Generator.

Most captioning vendors and conversion tools will export the WebVTT file format (.VTT extension). One strategy for obtaining a caption file in the WebVTT format is to create captions using YouTube and then export out the .VTT file. 

 

Final Code

The Oz Player Code Generator will take the values you entered and return code to be copied and pasted into your page. If using a website template, one strategy may be to place the first and last code sections into your website template to simplify the inclusion of the Oz Player into your website.

This first section is required only once per page, before any videos appear. If possible, place this code in the <head> region of your web page or in the website template.

The second section of code identifies the specific video. The width, height, and data-controls values may be manipulated as necessary. If data-controls="stack" then the player bar will be superimposed over the bottom region of the video and disappear after four seconds. If data-controls="row" then the player bar will remain visible below the video region.

While the Video Transcript window is recommended, there may be times it does not work for your page or site. To remove the Video Transcript window, delete the following code:
<details class="ozplayer-expander" open="open">
<summary>Video Transcript</summary>
<div id="ozplayer-1-transcript" class="ozplayer-transcript"></div>
</details>

The last section of code is to be added only once per page, but after all the video content. This code should be placed at end of the page.

 

Hosting the Oz Player Locally

The Oz Player is also available to colleges who prefer to host the JavaScript and CSS files on their local webserver. The advantage to hosting the JavaScript and CSS files on the local server is that colleges can modify the presentation of the Oz Player as it best serves their needs. Additionally, college domains do not have to be whitelisted with Accessibility Oz when using the files hosted from the local server.

Similar to CDN solution, there are specific files that must be placed in the HEAD region of the web page as well as the footer region. The Oz Player Code Generator may then be used to create the appropriate code as demonstrated in Part 2 and inserted into the web page.

To obtain the Oz Player code and documentation, please contact the CCC Accessibility Center.