OU Media Player at a11yLDN 2012
-
Upload
nicholas-freear -
Category
Education
-
view
1.351 -
download
7
description
Transcript of OU Media Player at a11yLDN 2012
![Page 1: OU Media Player at a11yLDN 2012](https://reader033.fdocuments.net/reader033/viewer/2022060117/55866010d8b42aa3308b4728/html5/thumbnails/1.jpg)
OU Media Playerconsistent, accessible HTML5 multimedia?
N.D.Freear The Open University 19 Sep 2012Twitter: nfreear • #a11yLDN • #ouplayer
Cloudworks.ac.uk/cloud/view/6470
a11yldn.org.uk
![Page 2: OU Media Player at a11yLDN 2012](https://reader033.fdocuments.net/reader033/viewer/2022060117/55866010d8b42aa3308b4728/html5/thumbnails/2.jpg)
The problem
• Lots of OU web 'assets' - OUVLE, OpenLearn, Study at OU, OU-Drupal, Platform, research blogs, Cloudworks...
• Each site/ developer finds their own 'solution'
• Different user experiences, branding, levels of accessibility...
• Plus, a support/ maintenance nightmare...
• HTML5 anyone?
![Page 3: OU Media Player at a11yLDN 2012](https://reader033.fdocuments.net/reader033/viewer/2022060117/55866010d8b42aa3308b4728/html5/thumbnails/3.jpg)
The good... Easy YouTube 2008
![Page 4: OU Media Player at a11yLDN 2012](https://reader033.fdocuments.net/reader033/viewer/2022060117/55866010d8b42aa3308b4728/html5/thumbnails/4.jpg)
Who else is doing 'this'?
• 'Easy YouTube', 2008 Flash icant.co.uk/easy-youtubeo Blog: http://bit.ly/codepo-easy-yt-blog1
• 2009 Flash, Maltwiki.org
• Universal subtitles, www.universalsubtitles.org
• ...
• YouTube HTML5, www.youtube.com/html5
• ODI player, 2011 Flash* odicatalogue.co.uk
• Nomensa, 2011-12 Flash* http://bit.ly/nomensa-player1
• 2012 Flash* edu.mwjt.co.uk/access-youtube-new-webs..
• ...
(New to me, wac.osu.edu/examples/jwpc )
![Page 5: OU Media Player at a11yLDN 2012](https://reader033.fdocuments.net/reader033/viewer/2022060117/55866010d8b42aa3308b4728/html5/thumbnails/5.jpg)
..the odd... 'ODI' player 2011 http://bit.ly/odi-player1
![Page 6: OU Media Player at a11yLDN 2012](https://reader033.fdocuments.net/reader033/viewer/2022060117/55866010d8b42aa3308b4728/html5/thumbnails/6.jpg)
Who else? part 2
Questions:
• * Why Flash-only in 2011/12?
• Start from scratch?
• Is it flexible? (ODI)
• Are they open-source? Can we/ others build upon?
• Or, HTML5 media libraries - the same mistakes again?
![Page 7: OU Media Player at a11yLDN 2012](https://reader033.fdocuments.net/reader033/viewer/2022060117/55866010d8b42aa3308b4728/html5/thumbnails/7.jpg)
Our approach
• Don't "start from scratch"
• Build on existing components, including open source
• Hopefully, contribute back to the community - code/ patches/ knowledge...
![Page 8: OU Media Player at a11yLDN 2012](https://reader033.fdocuments.net/reader033/viewer/2022060117/55866010d8b42aa3308b4728/html5/thumbnails/8.jpg)
Other guiding "principles"
• Good user-experience for all
• Consistent look and feel
• Make it easy for authors to embed a player - minimal changes to practice
• Simple for developers to integrate and customize
• Flexible for a wide variety of sites/contexts
• Make it OK to upgrade for large user-base
• Foster continuous innovation
"Best of breed"
![Page 9: OU Media Player at a11yLDN 2012](https://reader033.fdocuments.net/reader033/viewer/2022060117/55866010d8b42aa3308b4728/html5/thumbnails/9.jpg)
The 'solution'
• A common, embeddable player
• *Easy to embed
• OU podcast infrastructure (+YouTube...)
• Service/iframe-based embeds
• oEmbed www.oembed.com
• HTML5 + Flash + Javascript + CSS
• OU brand
• Variants (3): OU Podcast/public, OUVLE, OpenLearn
• ...
![Page 10: OU Media Player at a11yLDN 2012](https://reader033.fdocuments.net/reader033/viewer/2022060117/55866010d8b42aa3308b4728/html5/thumbnails/10.jpg)
The 'solution', part deux
• Unobtrusive accessibility
• Captions (subtitles) / transcripts -
• Mobile/ tablet support
• Themable
• Internationalized
• Performance
• ...
• Maintenance - only '1' player needs upgrading
![Page 11: OU Media Player at a11yLDN 2012](https://reader033.fdocuments.net/reader033/viewer/2022060117/55866010d8b42aa3308b4728/html5/thumbnails/11.jpg)
Collaboration...
• Learning & Teaching Solutions
• Knowledge Media Institute
• Institute of Educational Tech *
• Disabled Student Services
• Information Technology
• Open Media Unit
![Page 12: OU Media Player at a11yLDN 2012](https://reader033.fdocuments.net/reader033/viewer/2022060117/55866010d8b42aa3308b4728/html5/thumbnails/12.jpg)
January-July 2011
• "Attempt 1"
• Based on Flowplayer - open source Flash libraries
• Flash 'falling back' to HTML5
• Two "chunky" designs
• Senior management "surprised" - too big for the VLE
• Bugs in design/ CSS
• No fullscreen (there is a "popout" player)
Used in Cloudworks
![Page 13: OU Media Player at a11yLDN 2012](https://reader033.fdocuments.net/reader033/viewer/2022060117/55866010d8b42aa3308b4728/html5/thumbnails/13.jpg)
"2011 Dark"
![Page 14: OU Media Player at a11yLDN 2012](https://reader033.fdocuments.net/reader033/viewer/2022060117/55866010d8b42aa3308b4728/html5/thumbnails/14.jpg)
"2011 Light"
![Page 15: OU Media Player at a11yLDN 2012](https://reader033.fdocuments.net/reader033/viewer/2022060117/55866010d8b42aa3308b4728/html5/thumbnails/15.jpg)
January-June 2012
• "Version 2" - deployment plan
• Based on Mediaelement.js
• HTML5 falling back to Flash
• But, Flash is not "2nd-class" citizen
• Compact, less obtrusive design
• With Fullscreen - yay!
![Page 16: OU Media Player at a11yLDN 2012](https://reader033.fdocuments.net/reader033/viewer/2022060117/55866010d8b42aa3308b4728/html5/thumbnails/16.jpg)
...and the pretty OU player light 2012
![Page 17: OU Media Player at a11yLDN 2012](https://reader033.fdocuments.net/reader033/viewer/2022060117/55866010d8b42aa3308b4728/html5/thumbnails/17.jpg)
Known issues/ limitations
• Yes, the buttons are quite small
• No WebM encoding, yet
• Some bugs to fix for mobiles
However, it works in narrow columns, and is accepted by VLE colleagues - yay!
Something we can release / a work in progress
![Page 18: OU Media Player at a11yLDN 2012](https://reader033.fdocuments.net/reader033/viewer/2022060117/55866010d8b42aa3308b4728/html5/thumbnails/18.jpg)
Mediaelement.js
• Author: John Dyer
• HTML5 audio/video library
• With Flash-HTML5 shim - "fallforward"
• Good mobile support
• Some accessibility issues, but..
• ..Very extensible/ hackable
• jQuery or Ender.js
• WebVTT
• Open source / GPLv2/MIT
• http://mediaelementjs.com
![Page 19: OU Media Player at a11yLDN 2012](https://reader033.fdocuments.net/reader033/viewer/2022060117/55866010d8b42aa3308b4728/html5/thumbnails/19.jpg)
Mediaelement.js 2
• Browser-codec
support grid
![Page 20: OU Media Player at a11yLDN 2012](https://reader033.fdocuments.net/reader033/viewer/2022060117/55866010d8b42aa3308b4728/html5/thumbnails/20.jpg)
Open source & HTML5 needs you
![Page 21: OU Media Player at a11yLDN 2012](https://reader033.fdocuments.net/reader033/viewer/2022060117/55866010d8b42aa3308b4728/html5/thumbnails/21.jpg)
oEmbed
• Unified approach to embedding
• Service, API
• XML, JSON, JSON-P
• Native to Wordpress 2.9+
• Plugins, libraries - Drupal, PHP ...
A facilitator for HTML5 innovation?
![Page 22: OU Media Player at a11yLDN 2012](https://reader033.fdocuments.net/reader033/viewer/2022060117/55866010d8b42aa3308b4728/html5/thumbnails/22.jpg)
Roadmap (the plan)
![Page 23: OU Media Player at a11yLDN 2012](https://reader033.fdocuments.net/reader033/viewer/2022060117/55866010d8b42aa3308b4728/html5/thumbnails/23.jpg)
Status
• Technical testing bugs - mostly fixedo (Mobile testing -- needs more work)
• Accessibility/usability bugs - some fixed
• Production hosting - slow, slow..
• Pilot deployment - library -- in progress
• VLE deployment - pushed back to December :(
• Other deploymentso Cloudworks deployment -- Sep 2012
• Handover - production support - December
• Steering group / roadmap -- ?
![Page 24: OU Media Player at a11yLDN 2012](https://reader033.fdocuments.net/reader033/viewer/2022060117/55866010d8b42aa3308b4728/html5/thumbnails/24.jpg)
Questions
• Open source - if, when?
• Stable versus innovative - how?
• LTS support + IET contributions - how?
• WebM encoding - when?
![Page 25: OU Media Player at a11yLDN 2012](https://reader033.fdocuments.net/reader033/viewer/2022060117/55866010d8b42aa3308b4728/html5/thumbnails/25.jpg)
Challenges
• Many stakeholders
• Many contexts
• Audio + video
• Mobile debugging
• First impressions count!
• Tech. test, Access. test, test, test...
• Finding time to communicate, as well as code
![Page 26: OU Media Player at a11yLDN 2012](https://reader033.fdocuments.net/reader033/viewer/2022060117/55866010d8b42aa3308b4728/html5/thumbnails/26.jpg)
SeGA - securing greater access.
• An Open University initiative
• Student facing services
• Process, management, leadership
• Developing "practitioners" across faculties
• Forum for discussing difficult questions,
• Referral panel for complex issues
• A work-in-progress
http://bit.ly/ou-iet-sega1
(Note, pre-dates BS 8878 pub., I think..)
![Page 27: OU Media Player at a11yLDN 2012](https://reader033.fdocuments.net/reader033/viewer/2022060117/55866010d8b42aa3308b4728/html5/thumbnails/27.jpg)
Postgraduate & free courses
• H810 "Accessible online learning: supporting disabled students"
• Counts to: cert, diploma & masters "online and distance education" (MAODE)
http://bit.ly/ou-course-h810
Free: http://openlearn.open.ac.uk/H807_1
![Page 28: OU Media Player at a11yLDN 2012](https://reader033.fdocuments.net/reader033/viewer/2022060117/55866010d8b42aa3308b4728/html5/thumbnails/28.jpg)
Links
• OU player prototype, http://embed.open.ac.uk
• Blogs, freear.org.uk ../ou-media-player-project
• http://freear.org.uk/content/ou-embed-proposal
• http://cloudworks.ac.uk/tag/view/a11yLDN
Twitter: nfreear
http://a11yldn.org.uk