The web-site is now in readonly mode. Login and registration are disabled. (28 June 2019)

OU Media Player rebooted (blog)

At look back at activity for the project in 2011, and what is happening this year...

Cloud created by:

Nick Freear
5 April 2012

Its been a long time since I've blogged about the OU Media Player project. So what has been going on? I thought I'd take a brief look back, then look forward...

Last spring - 2011

Last spring and summer we developed an embeddable player based on the open-source Flowplayer Flash-based toolkit. Two designers form Learning and Teaching Solutions here at The Open University, David Winter and Peter Devine created to bold and attractive designs or themes.

The 2011 player hit many of the original aims of the project, namely:

  • Developed for a number of contexts, with different requirements - OUVLE, OpenLearn, public sites with OU-Podcast media assets,
  • Accessible, including to screen reader and keyboard users - we ran two rounds of user-testing (I should explore whether these reports can be published),
  • Easily embeddable via oEmbed, and delivered in a maintainable way.

However, it also fell down on a number of points:

  • The implementation of the designs contained a number of CSS alignment bugs, which proved hard to solve,
  • The bold, 'big' nature of the themes took some people by surprise. There are some VLE pages which contain a large number of audio players (the design team had not realised this - preparation and communication is key!), and the design didn't work in this context,
  • There wasn't full screen functionality, due to a combination of a a Flash security restriction, and Flowplayer's implementation,
  • There remained some bugs on mobile/tablet devices, chiefly Android,

The first two points proved decisive, and the player was not launched for the VLE or other sites in summer 2011. I and my colleagues moved on to other projects.


On reflection, there were several lessons to learn:

  • The VLE variant was added to the project after initial requirements gathering, and some of the issues around multiple audio players on VLE pages weren't picked up,
  • Developing a common player with different variants (VLE, podcast/public, OpenLearn) added to the complexity,
  • We had not talked to key stakeholders at critical points in the design phase,

Happily though this isn't the end of the story...

Phase 2 - 2012

In December 2011 we developed a phase 2 deployment plan, which put in more skaffolding:

  • Defined development and consultation phases,
  • A date for sign-off of the design by key stakeholders,
  • Better defined and closer collaboration, particularly with LTS,
  • More testing,
  • A steering group,
  • Roll-out to the VLE in June 2012,
  • Roll-out to other OU sites starting shortly after.

We have a challenging timetable given our other commitments, but we are keeping to schedule. Watch this space!

Technical review and tasks

We are working through a number of technical development tasks:

  • 1. We reviewed our use of Flowplayer, and after consultation and based on a tip from my colleague Guy Carberry, we are moving to Mediaelement.js. This has a number of benefits:
  • ** It is a HTML5-based solution, so is more future-proof. Flash is not a 'second-class' citizen though,
  • ** There is a fullscreen solution, including for Flash - yay!
  • ** It is more accessible than some of the HTML5 media libraries that I've explored, though there are issues,
  • ** It is modular and very easy to extend, so accessibility problems can be fixed. And it is open-source and actively developed,
  • ** Better support for mobiles and tablets,
  • ** It requires either jQuery or Ender. We don't really want a jQuery-based solution, as our VLE is Moodle-based, uses YUI, and research indicates that a surprisingly high proportion of users may view pages with an empty cache. Ender is a smaller, modular solution when compared to the monolithic jQuery (Ender support is currently less mature),
  • ** Also on the performance front, Mediaelement implements a build and minification process, and it is structured with this in mind,
  • ** The consultation notes are on Google Docs.
  • 2. We are working to so that no variants of the player (VLE, OU-podcast..) require direct database access. For the OU-podcast variant, we are building on work by LTS colleague Jamie Daniels from last summer, to implement a loosely-coupled feed-based access. In time, we can publish documentation for the RSS extensions that the player requires.
  • 3. Re-structuring the code base so that it will be easier to support and maintain. Mediaelement.js will be defined as an 'engine' for the player (Flowplayer will be retained as a legacy engine). Themes will use an engine, and there will be 'engines' and 'themes directories.
  • 4. Implementation of the new design as a theme. AS we did last summer, we are using sprites to reduce HTTP requests. We've been quite impressed with the online CSS Sprite Generator.


Extra content

Embedded Content


Contribute to the discussion

Please log in to post a comment. Register here if you haven't signed up yet.