Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

OU Media Player poster - e-Access'15 conference

545 views

Published on

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)

Published in: Education
  • Be the first to comment

OU Media Player poster - e-Access'15 conference

  1. 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

×