MALT Wiki and oEmbed


Published on

An introduction to the MALT Wiki/multimedia accessibility pilot project, and it's use of the oEmbed specification. Presented at a technology coffee morning, Institute of Educational Technology, The Open University, in December 2009. (Co-presented with Wendy Porch.)

Published in: Technology, Design
1 Comment
1 Like
  • Great possibilties.
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Introducing the Multimedia Alternatives – MALT Wiki project
  • The cartoon says “ John does NOT stammer and never HAS done!” Link for the British Stammering Association Nick
  • Nick or Wendy
  • Wendy
  • Wendy
  • (Nick)
  • Logos: YouTube, iTunes U, Open University, Vimeo, Viddler, Tube Caption, Sign Tube, dot SUB, Caption First ... Wendy
  • 95% transcripts for OU podcasts sounds good, however we're currently bad at providing links to those transcripts, outside iTunes. Web Content Accessibility Guidelines 2.0, Nick
  • Wendy
  • Wendy
  • Link to an example on a password protected site (Forth road bridge, OpenLearn). Wendy
  • Steven Price, a developer in Student Services, is: Using the NCAM ccPlayer to provide video and captions on some public DSS pages, and Is experimenting with the new <video> element in HTML5 + Javascript captions. MIT's Computer Science and Artificial Intelligence Lab (CSAIL) are developing a system that will automatically transcribe lecture videos. They will showcase lectures that are part of MIT's OpenCourseWare initiative, and, Provide a service where users can upload audio files for automatic transcription. Project Possibility – at a US university, student driven…?
  • Capscribe, … Wendy
  • Nick
  • Nick
  • Evaluation of 5 Flash players against 6-7 criteria YouTube: captions may be embeddable. Captions are portable. Only owner can transcribe/upload. Easy YouTube: HTML/ Javascript controls - v. easy! JwPlayer: The only player to allow Audio Description via external file (MP3). * wmode= 'window' NCAM/ccFlash player: The most thoughtful pure Flash interface - separate play/pause, up/down volume. NCAM/ccFlash: "Advanced" captions - can be styled, colour, position. “ Aaron” player: OpenLaszlo-based – free software, potential. accessibility patch submitted. . “ Aaron” player: OpenLaszlo/ Drupal – lots of potential! Flow player: 'Advanced' captions, scriptable, themable, free software. An audio SWF plugin is available - needs JS integration.
  • A screen shot of the caption editor on the dotSUB multi-lingual captioning/subtitling web site, Nick
  • Logos at the bottom Wikipedia Foundation, OpenStreetMap, Project Gutenberg, GNU Free Software Foundation. Nick
  • A diagram representing the use of a browser plug-in or extension on a site like YouTube. Nick
  • A diagram representing the use of a module/filter for Web software such as Wordpress (blog), Drupal (content management), Moodle (online learning). Nick
  • A flow-chart, sort of. At the top the content author creates a embeds a link using whatever syntax, for example, <a rel="embed" href="">..</a> The system (Moodle, Wordpress …) filter's this and calls the appropriate oEmbed service, either directly or, Via a Javascript library (jquery.oembed.js) The oEmbed provider (MALT Wiki, YouTube, Slideshare, Flickr…) returns the embed code. The embed code replaces the original link. Bingo. oEmbed specification, oohEmbed proxy site, --
  • A screen shot of the new MALT player showing captions and coloured buttons at the bottom. Inspired by Chris Heilmann's Easy YouTube player, Nick
  • Meta-data/personalization example, 4 languages: English, French, Spanish (Latin American), Simplified Chinese (Hans, Mainland China). For example, User Javascript for Greasemonkey/Firefox. Integration: see the MALT Wiki player/oEmbed in operation at (search 'embed') Wordpress – yes, really 1 line!
  • A slide for the techies, a simple example page is - this includes an experimental Cohere-oEmbed service.
  • I've tested this, and can demonstrate with NVDA screen reader, and MSAA Inspect32... Nick
  • The current alpha site is at, (Soft-launch 19 October 2009. Was a demonstration at,
  • Screen shot of a page from YouTube. showing a modified player with a transcript in a scrollable block inserted by the user Javascript (Greasemonkey script) below the player. Nick
  • Stretch project, Wendy
  • Wendy
  •   +  Transcription/ translation can be collaborative - Wiki-like   +  Captions are portable (W3C TT XML, Subrip SRT)   +  Ajax-based editor or import captions   +  Powerful search, including in RSS   +  Rich meta-data, including caption attribution   +  Creative Commons licenses are encouraged   +  Business model - captions created for free/ fee * Nick   -  Uploader must be owner/ permission of owner of video **   -  Connections not explicit   -  Captions don't indicate person - TT styling - retrofit?   -  Meta-data not exposed in RSS search or TT - YET   -  No comments, rating, user profile - not "social" YET   ? Accessibility of site, player, editor
  • Blog post about personalization demo, 12 October 2009,
  • Tags: co-create, subtitle, data portability, crowd source, alternative format, accessibility, annotate, usability, audio description, social production, podcast, multimedia, iTunesU, mentor, community, develop, YouTube, caption, open content, transcribe, Video, Wiki, plug-in, participate, free software, in-situ, web service, social-karma.
  • MALT Wiki and oEmbed

    1. 1. Multi-media Accessibility MALT Wiki and services, alpha <ul><ul><li>Nick Freear, Web Developer </li></ul></ul><ul><ul><li>Wendy Porch , Research Fellow </li></ul></ul><ul><ul><li>Institute of Educational Technology </li></ul></ul><ul><ul><li>Coffee morning, 9 December 2009 </li></ul></ul>The Open University's Institute of Educational Technology
    2. 2. I have a stammer <ul><ul><li>Ask me to repeat if you miss something. </li></ul></ul><ul><li>  </li></ul><ul><ul><li>And please ask questions! </li></ul></ul>
    3. 3. Agenda <ul><ul><li>What problems are we trying to solve? </li></ul></ul><ul><ul><li>Existing research and issues </li></ul></ul><ul><ul><li>How can we solve the existing problems? </li></ul></ul><ul><ul><li>Outline of project proposal </li></ul></ul><ul><ul><li>Key project principles </li></ul></ul><ul><ul><li>Some initial evaluations </li></ul></ul><ul><ul><li>Examples/demonstrations </li></ul></ul><ul><ul><li>Round-up, next steps & discussion </li></ul></ul>
    4. 4. Definitions <ul><ul><li>Captions </li></ul></ul><ul><ul><ul><li>Also known as &quot;sub-titles&quot; in UK </li></ul></ul></ul><ul><ul><ul><li>Text synchronised with video, timed text </li></ul></ul></ul><ul><ul><ul><li>Prefer styling to indicate speaker - position, colour </li></ul></ul></ul><ul><ul><ul><li>For deaf/hard of hearing </li></ul></ul></ul><ul><ul><li>Closed captions </li></ul></ul><ul><ul><ul><li>&quot;Captioning you have to turn on&quot;, broadcast </li></ul></ul></ul><ul><ul><li>Transcript </li></ul></ul><ul><ul><ul><li>Text, often without synchronisation </li></ul></ul></ul>
    5. 5. Definitions (2) <ul><ul><li>Audio description </li></ul></ul><ul><ul><ul><li>Descriptions of the video inserted into spaces in the audio track i.e. what’s happening on screen? </li></ul></ul></ul><ul><ul><ul><li>For blind/ low vision people </li></ul></ul></ul><ul><ul><ul><li>Can get it for some TV programs, videos, DVDs, live events </li></ul></ul></ul><ul><ul><ul><li>Hard to find for online videos </li></ul></ul></ul>
    6. 6. Context <ul><li>&quot; Basic web accessibility is a known commodity now... </li></ul><ul><li>  </li></ul><ul><li>But nearly ten years after specifications first required it, online captioning still pretty much does not exist.&quot; </li></ul><ul><li>  </li></ul><ul><li>Joe Clark, A List Apart , November 2008. </li></ul>
    7. 7. More context! ( Gratuitous logos ) iTunes U
    8. 8. Doesn’t YouTube do Captions? <ul><li>Yes, captions and annotations, since August 2008. However: </li></ul><ul><ul><li>Only the video owner can upload/ author </li></ul></ul><ul><ul><li>No editor </li></ul></ul><ul><ul><li>(Not portable/ embeddable) </li></ul></ul><ul><ul><li>Captions can not be styled </li></ul></ul><ul><ul><li>Not open content </li></ul></ul><ul><ul><li>Only approximately 0.5% of YouTube videos are captioned (automated analysis on small corpus of 34 words - more work). </li></ul></ul>
    9. 9. What's the state of play? <ul><li>At the Open University: </li></ul><ul><ul><li>Course media is routinely transcribed (OU/iTunes U 95%) </li></ul></ul><ul><ul><li>It is not routinely captioned or audio described. </li></ul></ul><ul><li>  </li></ul><ul><li>W3C Web Content Accessibility Guidelines: </li></ul><ul><ul><li>WCAG 1.0, 1999 - 1.4 : Level A - transcript is sufficient. </li></ul></ul><ul><ul><li>WCAG 2.0, Dec 2008 - Level A requires captions, not audio description. </li></ul></ul><ul><li>  </li></ul><ul><li>Vimler: annotation. </li></ul><ul><li>Moodle et al : </li></ul><ul><ul><li>No easy way to integrate captions </li></ul></ul><ul><li>Some R&D projects are looking at content personalisation in E-Learning </li></ul>
    10. 10. Accessible Multimedia in E-Learning (1) <ul><li>TILE Project: Adaptive Technology Resource Centre, University of Toronto ( ) </li></ul><ul><ul><li>Early implementation of content personalisation standards that map user preferences to content served . </li></ul></ul><ul><ul><li>Not held in a learning management system </li></ul></ul><ul><ul><li>Reusable Learning Object Repository for Educators  </li></ul></ul><ul><ul><li>Videos provided with captions and audio descriptions </li></ul></ul>
    11. 11. Accessible Multimedia in E-Learning (2) <ul><li>EU4ALL Project. UKOU, UNED, Atos Origin, York University (amongst many others!)  </li></ul><ul><li> </li></ul><ul><li>  Content personalisation based on evolved standards related to user preferences. i.e. I'd prefer the video with the audio descriptions please! </li></ul><ul><li>Process for providing matching developed for dotLRN and Moodle learning environments </li></ul><ul><li>Alternatives for videos in the standards include captions, audio description, sign language interpretations, transcripts </li></ul>
    12. 12. Moodle video with Audio Description <ul><li>( ) </li></ul>
    13. 13. Here & there <ul><li>OU/ Steven Price/ Disabled Students Services - HTML5 <video> + Javascript captions. </li></ul><ul><li>MIT/ Brandon Muramatsu/ Jim Glass/ SpokenLecture </li></ul><ul><li> </li></ul><ul><li>Project Possibility … </li></ul>
    14. 14. Tools for Adding Captions and/or Audio Descriptions <ul><ul><li>CapScribe: </li></ul></ul><ul><ul><li>NCAM's Magpie </li></ul></ul><ul><ul><li>LiveDescribe: </li></ul></ul><ul><ul><li>MovCaptioner: </li></ul></ul><ul><ul><li>YouTube CC: </li></ul></ul><ul><ul><li>CaptionTube: </li></ul></ul><ul><ul><li>Accessify's YouTube Caption Creator: – </li></ul></ul><ul><ul><li>DotSub: </li></ul></ul>
    15. 15. How can we address the lack of captions & audio descriptions online? <ul><li>Multimedia Alternatives </li></ul><ul><li>the MALT Wiki Project </li></ul><ul><li>Collaborative production of alternative content </li></ul><ul><li>Web services </li></ul>
    16. 16. Big Principles <ul><li>Accessibility/usability </li></ul><ul><li>Data portability/ content as a service/ connections </li></ul><ul><li>Quality & learning design * </li></ul><ul><li>Open content * </li></ul><ul><li>Software as a service </li></ul><ul><li>Free (open-source) software </li></ul><ul><li>Social production/ co-creation/ crowd-sourcing </li></ul><ul><li>Perpetual beta, hacking the Web, agile </li></ul>
    17. 17. Media player evaluation
    18. 18. - transcribing
    19. 19. Social production <ul><li>Wikipedia, Geocaching, Open street map, Project Gutenberg, Librivox, talking newspapers, open source … </li></ul><ul><ul><li>What motivates? User scenarios ... </li></ul></ul><ul><li>Preece, Jennifer & Shneiderman, Ben (2009) </li></ul><ul><li>&quot;The Reader-to-Leader Framework: Motivating Technology-Mediated Social Participation &quot; </li></ul>
    20. 20. View 'in-situ' - client-side
    21. 21. View 'in-situ' - server-side
    22. 22. Web service - multilayered <a rel=”embed” href=”http://youtube.comb/watch…”>..</a> Moodle, WordPress … module/filter ( jquery.oembed.js ) oEmbed: YouTube, Slideshare, Flickr... … Player: <object> + HTML + Javascript
    23. 23. A new player – uses oEmbed, HTML / Javascript
    24. 24. MALT Wiki features <ul><li>Flowplayer/Javascript-based player, with captions </li></ul><ul><ul><li>Supports YouTube currently </li></ul></ul><ul><li>Meta-data & personalization panel </li></ul><ul><li>Player available in 4 languages </li></ul><ul><li>User Javascript, for YouTube </li></ul><ul><li>oEmbed web service – integrated with: </li></ul><ul><ul><li>Moodle, Drupal, WordPress, CodeIgniter / jQuery </li></ul></ul><ul><li>Wordpress – oEmbed native in 2.9 Beta. wp-config 1 line! </li></ul><ul><li>wp_oembed_add_provider ( </li></ul><ul><li>'#http://(www.)?*#i’, </li></ul><ul><li>'’, TRUE); </li></ul>
    25. 25. oEmbed + jQuery code <ul><li><script …src=&quot;…/jquery.min.js&quot;></script> </li></ul><ul><li><script …src=&quot; &quot;></script> </li></ul><ul><li><script type=&quot;text/javascript&quot;> </li></ul><ul><li>$(document).ready(function() { </li></ul><ul><li>$(&quot;a.embed&quot;).oembed().removeAttr(&quot;href&quot;); </li></ul><ul><li>}); </li></ul><ul><li></script> </li></ul><ul><li><a class=&quot;embed&quot; href=“” >…</a> </li></ul><ul><li><a class=&quot;embed&quot; href=&quot;…#conn-neighbour&quot;>Cohere…</a> </li></ul><ul><li>Flickr, Slideshare, Vimeo, Blip… </li></ul>
    26. 26. Flash 'wmode' is harmful <ul><li>wmode = 'window' (default) - OK. </li></ul><ul><li><object data=&quot;player.swf&quot;> </li></ul><ul><li><param name=&quot; wmode &quot; value=&quot; window &quot; /> </li></ul><ul><li>... </li></ul><ul><li>wmode = 'opaque' or 'transparent' – inaccessible. </li></ul><ul><li><param name=&quot; wmode &quot; value=&quot; opaque &quot; /> </li></ul><ul><li>Answer - don't set wmode. </li></ul>
    27. 27. Next Steps <ul><ul><li>Explore internal/ external funding </li></ul></ul><ul><ul><li>Conversations </li></ul></ul><ul><ul><li>Work on player + personalisation </li></ul></ul><ul><ul><li>Caption/ AD editing/ discovery functions </li></ul></ul><ul><ul><li>A workshop (&quot;Scripting Enabled&quot;)  </li></ul></ul><ul><ul><li>Build a community – please help! </li></ul></ul><ul><li>  </li></ul><ul><li>  </li></ul><ul><li>  @nfreear </li></ul><ul><li>  @wendyporch </li></ul><ul><li> </li></ul>
    28. 28. We didn't have time for...
    29. 29. YT player modified – user Javascript
    30. 30. Other Accessible Multimedia Fun! <ul><li>Stretch Project (ATRC, University of Toronto) </li></ul><ul><ul><li>Project 'stretched' perceptions of artists & art students to be more inclusive of people with disabilities  </li></ul></ul><ul><ul><li>Participants produced numerous examples of cultural works that include multiple sensory modalities & a gallery of works on the theme of inclusion </li></ul></ul><ul><ul><li>Provided tools to new media artists for adding descriptions, captions & alternative video </li></ul></ul>
    31. 31. Mars Rover Mission Video <ul><li>Audio Descriptions provide an overview of the onscreen action, particularly that which is not mentioned in the narrative of the video. </li></ul><ul><li>(insert Mars rover example here) </li></ul>
    32. 32.   &quot;any video any language&quot; <ul><li>+ Transcription/ translation can be collaborative - Wiki-like </li></ul><ul><li>+ Captions are portable (W3C TT XML, Subrip SRT) </li></ul><ul><li>+  Ajax-based editor or import captions </li></ul><ul><li>+  Powerful search, including in RSS </li></ul><ul><li>+  Rich meta-data, including caption attribution </li></ul><ul><li>+  Creative Commons licenses are encouraged </li></ul><ul><li>-  Uploader must be owner/ permission of owner of video * </li></ul><ul><li>-  Connections with eg. YouTube not explicit </li></ul><ul><li>-  Captions don't indicate person - TT styling - retrofit? </li></ul><ul><li>-  Meta-data not exposed in RSS search or TT - YET </li></ul><ul><li>-  No comments, rating, user profile - not &quot;social&quot; YET </li></ul>
    33. 33. Next steps detail <ul><li>Roadmap: no money, no timescale! </li></ul><ul><li>Testing - <iframe>, screen readers, high contrast... </li></ul><ul><li>&quot;Complete&quot; the MALT/Flow player - volume, progress bars, theme, language (research Flow controlbar custom.) </li></ul><ul><li>Do MALT/YouTube/JS player - matching UI. </li></ul><ul><li>Personalization demo, </li></ul><ul><li>Plug-ins: Wordpress, Moodle, Drupal... </li></ul><ul><li>Audio Description - CapScribe, Java Web Start/JNLP? </li></ul><ul><li>Captioning – online/ desktop/ import/ export </li></ul><ul><li>Developer documentation. </li></ul><ul><li>Translation/ Localization, player - French, Chinese... </li></ul><ul><li>Wiki features, community building, talk talk...? </li></ul>
    34. 34. Wordle - project  keywords