Ability to always use HTML 5 for Video/Audio
March 6, 2013 12:00 AM
By default, when Lectora publishes MP3 audio or MP4 video, a Flash wrapper is used to play the video if the proper version of Flash is available, and HTML 5 is used if HTML 5 media support is present, and no Flash is available. This works nicely across a broad range of devices, including desktops, tablets, and other mobile devices.
I was asked for a method to always use the HTML 5 media player for audio and video within a Lectora published Title, even when Flash is present. My customer knew the platform of their target audience, and wanted to have a Flash-free course, regardless of Flash support on the end users system. I thought I would share my solution.
To do this, simply put an HTML extension at the title level, make it type "Header scripting", click the edit button, and add the following code:
is.useHTML5Video = function(){ return true; }
note: in Lectora Online it would be a little different:
theApp.is.useHTML5Video = function(){ return true; }
What this does is override the default check for media players, and forces always using HTML 5.
A few caveats: The media will not run on Firefox, as Firefox does not support MP4 or MP3 in its HTML 5 implementation (although it is rumored that it will in an upcoming version), and it will not run in IE 7 or IE 8, as they do not support HTML 5 media. Chrome, Safari, IE 9 and 10, iOS, and Android devices all work well.
Enjoy!
Discussion (9)
@ssneg 49268 wrote:
Out of curiosity, why would you want to always use HTML5?
The customer did not want the Flash plugin used for the title.
Out of curiosity, why would you want to always use HTML5?
@TheTruex 49307 wrote:
With this option set, does the player element simply rearrange the player preference order? Or does it force the HTML5 player without providing Flash as a fallback?
It basically overrides Lectora's detection process and says that HTML5 is supported regardless of browser. So it'll fail in browsers that do not support HTML5. In other words, no fallback.
I also have been requested not to use flash when possible. It would be nice to have it default to no flash when in an HTML 5 compatible browser, but I would like it to be available if in a browser that can't play mp4s.
With this option set, does the player element simply rearrange the player preference order? Or does it force the HTML5 player without providing Flash as a fallback?
@rwalters 49313 wrote:
I also have been requested not to use flash when possible. It would be nice to have it default to no flash when in an HTML 5 compatible browser, but I would like it to be available if in a browser that can't play mp4s.
OK, if you want to use HTML 5 by default if the support is present, use the same external HTML object as described above, but for the code, use this:
is.useHTML5Video = function(){ return supports_h264_baseline_video(); }
For Lectora Online:
theApp.is.useHTML5Video = function(){ return theApp.is.supports_h264_baseline_video(); }
theApp.is.useHTML5Audio = function(){ return theApp.is.supports_audio(); }
That way, as long as the browser has support for h264 compression (standard MP4 files) it will use the HTML 5 player. If Firefox or older IE is the browser, it will use Flash.
You might want to put in a condition that handles Internet Explorer (IE) differently, because the HTML 5 player display is unpredictable and can make things look very bad.
Something like this (use HTML5 if it is available and if it is not IE with Flash installed):
theApp.is.useHTML5Video = function(){ return theApp.is.supports_h264_baseline_video() undefined theApp.is.flashVersion(9,0,0)) };
We are working on making this better for you so you won't have to do this very much longer!!!
Hi All, I am searching for options to make my video work on iOS devices. it will not work on iPhone once published to the LMS, but it will work on same phone when published to SCORMCloud. Will any of your suggestions above help me with this situation? Thanks, Heidi
Strange, I wouldn't think that changing the LMS would affect the ability of the video to play. I suppose it is possible that the outside frame of the LMS that contains the course is forcing a "compatibility mode" of some sort on the content window, but I don't know of any mode of Safari on iOS that would cause a problem.
What happens with the video? Do you get any errors?
Discussions have been disabled for this post