Institute of Educational Technology

Architecture

Mainstreaming videoaccessibility

Visual design

<script src="jquery.js"></script><script src="mediaelement-and-player.min.js"></script><link rel="stylesheet" href="mediaelementplayer.css" /><video src="myvideo.mp4"></video><script> // Initialize MediaElement.js-powered player. $('video, audio').mediaelementplayer(/* Options */);

// HTML5 standard media events. $('video, audio').on('play pause', function () { // Do something ... });</script>

<!-- Generated HTML: ... <div class="mejs-button mejs-playpause-button mejs-play">

<button type="button" aria-controls="mep_1" title="Play" aria-label="Play"></button>

</div>-->

A consumer web siteeg. OpenLearn

OU Media Player<iframe>

MediaElements.jsopen source Javascript

framework

HTML 5<audio><video>,

WAI–ARIA, JavaScriptoEmbed Organisational

brand guidelines�

RSS Feeds

Audio/visual contenteg. university

podcasts

Visual design problem –Reduce the height of the existing media player. Ensure player meets best practice for accessibility and usability needs.

QA –Quality assurance is essential – usability/accessibility evaluation, cross-device testing, automated testing, integration testing ... It builds confidence!

Visual design solution –The re-designed player is created in close collaboration between developer and designer. The appearance of the player is designed around the functionality it is required to deliver and the core-problem it needs to address. Minimum VLE button size is 16px, so the player is designed around this unit of measure.

The player feature set is critically assessed to ensure the final product is a genuine item and not imitation of other players. This process led to the dropping of a ‘pause’ button because this was no longer considered an essential feature when the play/stop button could facilitate the same need.

Pause video

If user hovers over play/stop buttons they receive a text tip - left aligned.

The green represents buttons, the pink represents zones. The blue represents feedback in text format - which in the case of the audio also includes volume controls - which are infact buttons

If user hovers over an extended feature button or audio controls they receive a text tip - right aligned.

Description of features

Overview

Measurements

Framework

00:00 / 01:22 3abcdefghijklmnopqrstuvwxyz0123456789

00:00 / 01:22 3

22 px3 8 px 16 px

22px value

00:00/01:22

300:00/01:22Start video

Subtitles

Full screen

Open video/audio in a new window

View settings

Adjust volume

The font used in this example is Trebuchet: 12pt.The reason for using a different font is so that the player controls and text feedback can be clearly defined.

The primary colour for the player is either defined by the theme or is #333.

The secondary colours are #f2f2f2 for the upper background grey and #fff for the lower white.

Measurements / Colours

3 8 px 16 px

22px value

00:00/01:22

3 8 px 16 px

22px value

00:00/01:22

3 8 px 16 px

22px value

00:00/01:22

3 8 px 16 px

22px value

00:00/01:22

3 8 px 16 px

22px value

00:00/01:22

3 8 px 16 px

22px value

00:00/01:22

3 8 px 16 px

22px value

00:00/01:22

Lorem ipsum dolor sit amet, mauris aut, molestie nulla. Purus libero, eget convallis, metus sed. Qui parturient, velit amet fusce,

Video - including primer info and play icon

Audio - including primer info and play icon

00:00 / 01:22 3

00:00 / 01:22 3

Lorem ipsum dolor sit amet, mauris aut, molestie nulla. Purus libero, eget convallis, metus sed. Qui parturient, velit amet fusce,

The VLE manages the Download and Transcript functions separate from the media plpayer.

Download Transcript

The VLE manages the Download and Transcript functions separate from the media plpayer.

Download Transcript

48 px

High level relationship diagram Detailed schema

qu

a li t y

qu

alityassured

For more information: mediaplayer.open.edu/about