Explore the community Forums Lectora Lectora Questions & Answers Ability to always use HTML 5 for Video/Audio

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #281748 Score: 1
    Profile photo of John Blackmon
    John Blackmon
    Moderator
    beginner
    intermediate
    contributor
    friend finder
    advanced
    junior moderator
    wise owl
    LUC16
    LUC16 Attendee
    verified member
    47 pts
    @johnb

    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!

    This post has received 1 vote up.
    #284975 Score: 0
    Profile photo of Sergey Snegirev
    Sergey Snegirev
    Member
    contributor
    intermediate
    advanced
    friend finder
    lab member
    junior moderator
    advocate
    LUC16
    LUC16 Attendee
    wise owl
    339 pts
    @ssneg

    Out of curiosity, why would you want to always use HTML5?

    #284972 Score: 0
    Profile photo of John Blackmon
    John Blackmon
    Moderator
    beginner
    intermediate
    contributor
    friend finder
    advanced
    junior moderator
    wise owl
    LUC16
    LUC16 Attendee
    verified member
    47 pts
    @johnb

    @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.

    #284974 Score: 0
    Profile photo of TheTruex
    TheTruex
    Member
    @TheTruex

    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?

    #284976 Score: 0
    Profile photo of Sergey Snegirev
    Sergey Snegirev
    Member
    contributor
    intermediate
    advanced
    friend finder
    lab member
    junior moderator
    advocate
    LUC16
    LUC16 Attendee
    wise owl
    339 pts
    @ssneg

    @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.

    #284977 Score: 0
    Profile photo of rwalters
    rwalters
    Member
    contributor
    beginner
    intermediate
    advanced
    curious george
    wise owl
    7 pts
    @rwalters

    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.

    #284973 Score: 0
    Profile photo of John Blackmon
    John Blackmon
    Moderator
    beginner
    intermediate
    contributor
    friend finder
    advanced
    junior moderator
    wise owl
    LUC16
    LUC16 Attendee
    verified member
    47 pts
    @johnb

    @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.

    • This reply was modified 4 years, 6 months ago by Profile photo of Joe Wieloch Joe Wieloch.
    #304551 Score: 0
    Profile photo of Joe Wieloch
    Joe Wieloch
    Moderator
    beginner
    intermediate
    friend finder
    contributor
    LUC16 Attendee
    verified member
    wise owl
    LUC17 Attendee
    advanced
    picture perfect
    62 pts
    @wheels

    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() && !(theApp.is.ie && 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!!!

    • This reply was modified 4 years, 6 months ago by Profile photo of Joe Wieloch Joe Wieloch.
    #304678 Score: 0
    Profile photo of Heidi Strangberg
    Heidi Strangberg
    Member
    beginner
    intermediate
    contributor
    lab member
    verified member
    friend finder
    advocate
    curious george
    wise owl
    LUC17 Attendee
    3 pts
    @heidi

    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

    #305001 Score: 0
    Profile photo of John Blackmon
    John Blackmon
    Moderator
    beginner
    intermediate
    contributor
    friend finder
    advanced
    junior moderator
    wise owl
    LUC16
    LUC16 Attendee
    verified member
    47 pts
    @johnb

    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?

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.