WordPress And H5P : The Future Of Rich Content?

WordPress And H5P : The Future Of Rich Content?

H5P is not your average WordPress content plugin: it is a genuinely innovative way to create, embed and share rich HTML5 content via your WordPress site.

Although it’s perhaps aimed more at educational content, there are content types such as image hotspots, presentations and timelines that will be of interest to any WordPress site owner.

So take a peek at what could be the future of rich HTML5 content.

What Is Rich Content?

Rich content is more than static text or images and goes beyond sliders and lightbox galleries. Whereas the vast majority of content is passive, rich content is active, requiring interaction to get its full value.

Screengrab of the H5P berry image hotspot example
Click to view the hotspot example on the H5P site

In H5P‘s interpretation of rich content, it’s also independent, there’s no reliance on the host application to deliver the content, just to create it. Want to use an H5P content item in another site? Just download the H5P file (really a zip of html, css and javascript) and load it into another H5P-capable site (at the time of writing there are solutions for WordPress, Drupal and Joomla) to have the exact same content behaving in the exact same manner.

And unlike embedding, the content is available for modification.

This is not just custom post types on steroids, this is the delivery of self-contained HTML5 applications.

Creating Rich Content With H5P

H5P allows you to create multiple content types:

Screengrab of H5P content type list
A pretty extensive content type list which will grow over time

Most have an educational bent but there are a number with global appeal, particularly the image hotspot, presentation and timeline types. No doubt new content types will be added down the track.

Somewhat confusingly when you first install the plugin, there are no content types preloaded. To enable creation of a particular type you need to load an existing example (H5P Content > Add New), which seems a little curious but is perhaps to keep the plugin file size down – the presentation content type is 40mb.

Many of the downloadable examples contain multiple content types (presentations, for example), so you won’t have to download them all. An option to import the custom types would save a lot of time and effort.

What’s H5P like to work with? To test the plugin, I created 3 content items, all with a World Cup theme :

  • A timeline of Germany’s World Cup fixtures
  • An image hotspot of the Germany squad
  • A simple World Cup “fill-in-the-blanks” quiz

Unfortunately, and I’ve yet to find out why, there seems to be a couple of issues which have prevented me from embedding the actual H5P examples in this article. No doubt these are just the regular teething issues that every new product experiences.

Example 1 – 7 Matches To World Cup Glory

This is a timeline covering those glorious (if you are German) 32 days across June and July 2014 as Germany battled through 5 matches and cruised through 2 to win the 20th edition of the World Cup for the fourth time.

Building the timeline involved:

  1. create a new date item for each match with the scoreline (title) and the flag of the opposition plus a very short summary (content).
  2. create an era item for each phase of the competition (Group Stage, Round of 16, Quarter-finals, Semi-finals, Final).

Nothing too complicated here and the end result is pretty eye-catching:

A timeline showing Germany's 7 matches at the 2014 World Cup Final. The timeline is showing their first game against Portugal.
This eye-catching timeline was quick and easy to create. Just download the H5P file to add it to your site!

Download the H5P Examples (zip, 2MB) to look at the details of this timeline or to create your own.

If you have the plugin installed you should simply be able to download the H5P file and load it up into your site and use it without modification.

Example 2 – Germany’s World Cup Winning Squad

This example uses the image hotspot content type to overlay a picture of Germany’s World Cup winning squad with clickable hotspots that bring up an overlay with information about the player:

Screenshot of an overlay for Philipp Lahm on the dimmed German World Cup winning squad
Image hotspots are easy to put together – the ability to include more extensive HTML in the overlay would be good though

This simply a matter of:

  1. loading the main image
  2. adding a hotspot for each player
Screengrab of hotspot for Manuel Neue hotspot showing header, text. horizontal and vertical position
Those positions require some trial and error

The coordinates of the hotspot are in percentages (this allows the hotspot position to be maintained as the page responds to a changing screen size or different devices) and requires some trial and error to get it right. I used a rule extension for Chrome to get the actual coordinates for the hotspot and then converted them to percentages based on the display width and height of the image.

My only gripe about this feature is that the HTML that the overlay supports is fairly limited – I couldn’t work out a way to get images in there, for example, and there’s no support for tables. Even if you cut and paste into the textarea, the save process strips out the HTML.

Otherwise, a quick and easy way to create an image hotspot.

Download the H5P Examples (zip, 2MB) to delve more into this hotspot or to create your own.

Example 3 – Test Your World Cup Knowledge

As mentioned previously, the majority of the content types do lean towards educational content, so I picked one of the simpler looking quiz content types, the fill-in-the-blanks type, to create a small (but fiendish) World Cup quiz:

Screengrab of the World Cup quiz featuring questions with blanks that are checked for correct entries and a total score displayed.
A simple but effective way to create interaction – just don’t look at the answers!

The questions are added by annotating text – the answers are bookended with asterisks (*) and alternative answers are separated with a forward slash (/).

For example, here’s the question for the The Best Player:

{code}

The Best Player was awarded to *Lionel Messi/Messi*.

{/code}

This will replace the text contained within the asterisks with a blank input text box when initially displayed and allow either “Lionel Messi” or “Messi” as a correct answer.

Download the H5P Examples (zip, 2MB) to play with this example further or create your own fill-in-the-blanks content type.

Is Packaged Rich Content The Future?

H5P delivers impressive functionality, wrapped in a functional, if not entirely pretty, user interface. The 3 examples above are some of the simplest: it can get pretty complicated with question sets and presentations.

H5P provides a simple pathway to producing attractive and interactive content coupled with the ability to easily share, reuse and extend that content across a number of content management systems. A compelling combination.

But there’s more at play here.

The potential of H5P is to revolutionize the creation, delivery and sharing of rich HTML5 content; the ability to create the content in one app and deliver it in another; the capability of sharing that content across multiple platforms without modification.

This is a single plugin that can potentially deliver a vast array of rich content types (14 is not a bad start) – just load up an example and now your WordPress site can create it. Perhaps down the track authoring is removed altogether from the delivery channel and takes place in a dedicated app.

This starts to sound a lot like ecosystems such as Flash, which liberated the content from the confines of the browser. H5P liberates content from the confines of the delivery application but, unlike Flash, is an open source project built on the HTML, CSS and Javascript, and free from the issues of proprietary software.

What it needs is momentum and community. It needs more rich content types; it needs to be supported by many more content management systems (although going with WordPress is a good start); it needs to be able to work standalone; and it needs, perhaps, a dedicated authoring tool.

Plenty of room for improvement, perhaps, but H5P’s current functionality and its ability to help content authors create rich, interactive content means that every WordPress site owner should be giving it careful consideration.

What do you think of H5P’s approach to rich HTML5 content? Does the idea of creating content that is independent of WordPress and easily transferrable appeal to you?