OU Media Player poster - e-Access'15 conference
1 like727 views
The document outlines the design and functionality of a media player intended for educational use, emphasizing accessibility and usability. It details collaboration between developers and designers to ensure the player meets quality assurance standards and integrates well with various content types. Key features include button sizes, color schemes, and user feedback mechanisms, while highlighting the importance of usability evaluations across devices.
OU Media Player poster - e-Access'15 conference
- 1. InstituteofEducationalTechnology Architecture Mainstreamingvideo accessibility Visualdesign <script src=/slideshow/ou-media-player-e-access-15-conference/45328991/"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>, WAIARIA, 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 apausebuttonbecausethiswasnolongerconsideredanessentialfeaturewhentheplay/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