Being an e-learning developer you must be knowing that while publishing your output as HTML5, it will be interpreted by each browser differently. There are various web browsers in the market today some of the popular ones are Google Chrome, Safari, Mozilla Firefox and Internet Explorer. The major issue with HTML5 is that it is not one specification but a set of standards and each of the above mentioned browsers renders it differently and that is why testing of the e-learning courses across different browsers becomes imperative
In this blog I will address the three things that you need to know about testing HTML5 courses in web browsers :
1. Browser challenges
As mentioned earlier each of the browser interprets the HTML5 code differently due to small set of tools called as rendering engine. It’s these rendering engines that either support or do not support HTML5 features. Some of the rendering engines for the commonly used browsers are:
Gecko for Firefox: The Gecko engine is the main engine of Firefox, Mozilla, and a number of related browsers. It has support for many (but not all) HTML5 features.
Trident for Internet Explorer: The various forms of Internet Explorer (IE) all use the Trident engine. So far, this engine has the weakest support of HTML5 features among all the major browsers. From IE9 onwards certain HTML5 features like SVG and CSS3 have got supported and IE 11 seems have much more complete support for HTML5, but even this version is projected to be missing some key features, including advanced form element support and geolocation.
WebKit for Safari and Chrome: The WebKit engine was originally created by Apple based on code from the open source KHTML project. The Safari browser on Macs, iPhones, and iPads all use the WebKit engine.
WebKit is also the foundation of the Google Chrome browser and the browser on the Android mobile platform.
Presto for Opera: Presto is the engine underlying the Opera family of browsers. Opera has long been considered a technically superior browser, but has not been able to capture a corresponding market share.
Out of the above mentioned browsers, Firefox and Chrome seem to have the best support for most of the HTML5 features.
You can also use the below mentioned link to check how well your browser supports HTML5.
2. Multimedia Formats
HTML5 is fairly competent about picking the right default for presenting the most optimum audio or video. However it is important to know what are the audio and video formats, supported by the browsers so that you can optimise your HTML5 e-learning output as per the browser.
Various browsers support the following audio formats:
Firefox supports Ogg Vorbis and WAV
Opera supports Ogg Vorbis and WAV
Safari supports MP3, AAC, and MP4
Chrome supports Ogg Vorbis, MP3, WAV, AAC, and MP4
Internet Explorer 9+ supports MP3, AAC, and MP4
iOS supports MP3, AAC, and MP4
Android supports AAC and MP3
In order to support all of the browsers mentioned above, it’s advisable to serve your audio file in Ogg Vorbis, and MP3.
Various browsers support the following video formats:
Firefox supports Theora Ogg and WebM
Opera supports Theora Ogg and WebM
Safari supports MP4
Chrome supports Theora Ogg, MP4, and WebM
Internet Explorer 9+ supports MP4 and WebM (requires a plugin)
iOS supports MP4
Android supports MP4 and WebM (2.3+)
In order to support all of the browsers mentioned above, you should serve your video file in both WebM and MP4 using the source element.
Use of video and audio tags in HTML5 provide the developer with a rich UI without having to install third-party plug-ins like QuickTime, Flash or Silverlight. This is because these tags are embedded directly into the webpage.
3. Emerging Technology
As we know HTML5 is still an emerging technology and and it is getting more and more new features and updates frequently. HTML5 standards are bound to change and its the responsibility of the e-learning developers to keep themselves abreast of the new developments happening in this field rather than totally relying on some HTML5 based authoring tool to develop the e-learning output.
So keep these three things in consideration while you are making your next future proof e-learning course.