OU Media Player poster - e-Access'15 conference

Institute of Educational Technology Architecture Mainstreaming video accessibility 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>  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 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 3 abcdefghijklmnopqrstuvwxyz0123456789 00:00 / 01:22 3 22 px 3 8 px 16 px 22px value 00:00/01:22 3 00: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 High level relationship diagram Detailed schema q u a l i t y q u a l i t y assured For more information: mediaplayer.open.edu/about

Upload
nicholas-freear
Category

Education
view
108
download
1

TAGS:

Embed Size (px):

Transcript of OU Media Player poster - e-Access'15 conference

Page 1: OU Media Player poster - e-Access'15 conference

Institute of Educational Technology

Architecture

Mainstreaming videoaccessibility

Visual design

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

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

</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