Some adventures with HTML5

A couple of weeks ago I hosted an online webinar for JISC OER Rapid Innovation projects. Here I will attempt to summarise what was said about HTML5.

Rapid Innovation projects are short projects, typically only a few months long, that JISC fund to do some development; they’re not the place for open-ended explorations of new concepts, but that doesn’t mean that they aren’t projects from which we can learn a lot. They are quite a good test bed for assumptions that certain developments should be quite easily achievable: you think that the state of technology X is such that a couple of months of developer effort should be enough to realise idea Y: a rapid innovation project is a way of testing this. The aim of this webinar was to collect reflections from this round of projects on a number of technologies that several projects had tried. HTML5, with associated aspects of Javascript, video and accessibility was one of those technologies.

One of the projects that had the strongest dependency on HTML5 was XENITH (Xerte Experience Now Improved: Targeting HTML5) which was predicated on converting the Xerte online toolkit (a popular wizard-based approach to creating OERs) from Flash output to HTML5. This seems even more important now than it did when the project started, as we have seen an accelerating shift away from Flash to HTML5 on mobile platforms. Tellingly, we were told that once busy Flash mailing lists now have very little traffic, a sign that developers are deserting Flash tools.

Julian Tenney, the XERTE project manager (and Flash developer by background), reported that he had initially been nervous about the feasibility of replacing the functionality of the flash player with HTML5, but he said he was “much much more comfortable with it now, it seems that [the project] haven’t really hit an awful lot of problems.” The project was running ahead of expectations, with solid core implemented with a good interface and more than half of the 75 templates for different types of page converted to HTML5. The project has used JQuery as the gernal JavaScript framework, which is a popular choice. After a fair amount of investigation into how to support audio and video playback they adopted JW Player, which did most of what the project needed to do without them trying to create anything new from scratch.

One advantage that HTML5 has over Flash, highlighted by EA Draffan of the Synote Mobile project, is that in principle it should help make resources accessible to all. XERTE has a good record for supporting access, for example it will work through the JAWS screen reader, and Julian pointed to a disadvantage of HTML5: that the accessibility was left to the browser, and not as in the case of Flash under the control of the developer. This sentiment that was echoed by Josef Baker who has been working on displaying maths in HTML5 compared to pdf for the Maxtract project, who had found that neither accessible pdf nor HTML 5 worked as well for blind and visually impaired users as plain text.

This problem seems most acute with video playback, where making resources accessible for anyone can be a problem on some devices. Several projects reported that there is a problem still getting the acceptable behaviour for video playback across different browser/platform combinations; an issue which Synote have documented. Several people voiced concern at this inconsistency concerning video, the plethora of Javascript libraries for controlling video, even at the level of there being no one video format that would work across platforms; the poor performance on small mobile screens and lack of mature development framework elements (especially compared to apps). Simon Morris of the ensemble project and associated rapid innovation project for OER data infrastructure was especially critical of the ease of developing tools for sophisticated manipulation of the video stream. While it seems possible to create HTML5 applications to do this that work for a specific target browser & device, the difficulty seems to be getting something that will work across multiple platforms. He was doubtful about whether the document centric layout engines for HTML5 would ever be as easy to use for graphics oriented purposes as those available for native mobile apps. He also pointed to the example of controlling video from YouTube, where the API functionality to do such things as tracking which part of the video was being viewed was only available in the Flash and not in HTML5. According to Simon, there are deep-seated problems associated with the file format standards with respect to pseudo-streaming, for example the information that allows one to jump in to a video at an arbitrary point is held at the end of mpeg video files, meaning the entire video has to be loaded before the viewer can jump to the bit they want to see.

It seems clear that libraries such as JQuery have helped overcome many of the inconsistencies of creating good user experiences in HTML5. HTML5 video still has a way to go, especially on mobiles. There was disagreement on whether the problems described were signs of immaturity and indicated a need to support the further development of JavaScript libraries that aim to iron over platform inconsistencies for video in a similar way to JQuery, or an obstacle to using HTML5 that would be difficult to overcome while native apps provide an alternative. The “native Vs HTML5 web app” question is one that goes far beyond the experiences of a few projects with video.

One thought on “Some adventures with HTML5

  1. The biggest drawback to using the HTML5 Canvas for graphics and animations is the current lack of a cross-platform visual development tool. You have to write Javascript code to get anything done in the canvas, which is fine in its own way but is as much of a pain as was interface design before tools like Visual Basic came along, when you had to specify canvas coords in code, compile, run and see where the element ended up. Flash developers, such as Julian (who before Flash was an Authorware boy, which is reflected in Xerte’s design and paradigm), need tools that’ll enable them to quickly create animations as they can on the Flash stage. The only offline tool currently available is Hype, but that’s Mac-only. Adobe have produced an online tool called “Edge Animate” which looks promising and is currently a freebie.

    Flash is a dead environment walking, right enough. Adobe were lukewarm about it from the start, and Apple’s anathema against it on iWhatsits landed the mortal blow. HTML5 is the only game in town. Which just goes to show that you should never rely on proprietary products (as those of us who created in Director know well enough).

Comments are closed.