An A0 poster for a round-table discussion on "Mainstreaming video accessibility", for the conference on 24 February. Content & design by Peter Devine & Nick Freear (http://iet.open.ac.uk) * http://embed.open.ac.uk/about * http://freear.org.uk/content/e-access15-conference License: Creative Commons Attribution-ShareAlike (http://creativecommons.org/licenses/by-sa/4.0)

1. InstituteofEducationalTechnology
Architecture
Mainstreamingvideo
accessibility
Visualdesign
<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 site
eg. OpenLearn
OU Media Player
<iframe>
MediaElements.js
open source Javascript
framework
HTML 5
<audio><video>,
WAI–ARIA, JavaScript
oEmbed
Organisational
brand guidelines
į
RSS Feeds
Audio/visual content
eg. university
podcasts
Visualdesignproblem–
Reducetheheightoftheexistingmediaplayer.
Ensureplayermeetsbestpracticefor
accessibilityandusabilityneeds.
QA–
Qualityassuranceisessential–
usability/accessibilityevaluation,
cross-devicetesting,automatedtesting,
integrationtesting...
Itbuildsconfidence!
Visualdesignsolution–
There-designedplayeriscreatedinclosecollaborationbetweendeveloperanddesigner.
Theappearanceoftheplayerisdesignedaroundthefunctionalityitisrequiredtodeliverand
thecore-problemitneedstoaddress.MinimumVLEbuttonsizeis16px,sotheplayerisdesigned
aroundthisunitofmeasure.
Theplayerfeaturesetiscriticallyassessedtoensurethefinalproductisagenuineitemandnot
imitationofotherplayers.Thisprocessledtothedroppingof
a‘pause’buttonbecausethiswasnolongerconsideredanessentialfeaturewhentheplay/stop
buttoncouldfacilitatethesameneed.
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 3
abcdefghijklmnopqrstuvwxyz0123456789
00:00 / 01:22 3
22 px
3 8 px 16 px
22px value
00:00/01:22
300:00/01:22
Start 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
Highlevelrelationshipdiagram Detailedschema
qu
a
l i t y
qu
a
lityassured
Formoreinformation:
mediaplayer.open.edu/about