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

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?

The good... Easy YouTube 2008

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 )

..the odd... 'ODI' player 2011 http://bit.ly/odi-player1

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?

Our approach

• Don't "start from scratch"

• Build on existing components, including open source

• Hopefully, contribute back to the community - code/ patches/ knowledge...

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"

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

• ...

The 'solution', part deux

• Unobtrusive accessibility

• Captions (subtitles) / transcripts -

• Mobile/ tablet support

• Themable

• Internationalized

• Performance

• ...

• Maintenance - only '1' player needs upgrading

Collaboration...

• Learning & Teaching Solutions

• Knowledge Media Institute

• Institute of Educational Tech *

• Disabled Student Services

• Information Technology

• Open Media Unit

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

"2011 Dark"

"2011 Light"

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!

...and the pretty OU player light 2012

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

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

Mediaelement.js 2

• Browser-codec

support grid

Open source & HTML5 needs you

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?

Roadmap (the plan)

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

Questions

• Open source - if, when?

• Stable versus innovative - how?

• LTS support + IET contributions - how?

• WebM encoding - when?

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

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

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

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