Post on 15-Jul-2015
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