Highlighted

"Loading" message - module with videos published as HTML5

New Here ,
Sep 21, 2018

Copy link to clipboard

Copied

Hello,

I have created a module using Adobe Captivate 2019 and published it as HTML5. I am experiencing a lag at several random points during the playing of the e-learning. There is a "Loading" message  layer, making it impossible to click on any of the active areas. Slide actions are halted while video and audio carry on unimpeded.

The module includes 12 slide videos, each one ca. 30 - 60 seconds in length, ranging in size between 5 and 10 MB. I assume that the videos are the cause of the issue, because  e-learnings without videos do not exhibit the same behaviour. When I publish as executable I do not experience these issues.

Adobe recommend the following:

  • Ensure that the videos have sufficient keyframes. The recommended keyframe interval is at least one keyframe in every 2 secs.
    You can use Adobe Media Encoder (AME) to increase the keyframe interval if necessary. For a 30-fps video, configure the keyframe-distance to be 60 (frames) in AME (or any other tool of your preference).
  • Ensure that the videos have optimal bit-rates so that viewers’ experience is good. Else, many ‘loading...’ messages are displayed to the users.
    Decide the bit-rates based on the server’s as well as your target users’ bandwidth.

https://helpx.adobe.com/captivate/using/multi-slide-synchronized-video.html#best_practices_to_use_sy...

I have experimented with rendering the videos at the recommended keyframe interval with various bit-rates (high, medium, low) but I haven't seen any improvement. I have also tried streaming from Vimeo and Youtube, to no advantage.

Has anyone else experienced the same and come up with a solution?

TOPICS
Audio and video

Views

1.9K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

"Loading" message - module with videos published as HTML5

New Here ,
Sep 21, 2018

Copy link to clipboard

Copied

Hello,

I have created a module using Adobe Captivate 2019 and published it as HTML5. I am experiencing a lag at several random points during the playing of the e-learning. There is a "Loading" message  layer, making it impossible to click on any of the active areas. Slide actions are halted while video and audio carry on unimpeded.

The module includes 12 slide videos, each one ca. 30 - 60 seconds in length, ranging in size between 5 and 10 MB. I assume that the videos are the cause of the issue, because  e-learnings without videos do not exhibit the same behaviour. When I publish as executable I do not experience these issues.

Adobe recommend the following:

  • Ensure that the videos have sufficient keyframes. The recommended keyframe interval is at least one keyframe in every 2 secs.
    You can use Adobe Media Encoder (AME) to increase the keyframe interval if necessary. For a 30-fps video, configure the keyframe-distance to be 60 (frames) in AME (or any other tool of your preference).
  • Ensure that the videos have optimal bit-rates so that viewers’ experience is good. Else, many ‘loading...’ messages are displayed to the users.
    Decide the bit-rates based on the server’s as well as your target users’ bandwidth.

https://helpx.adobe.com/captivate/using/multi-slide-synchronized-video.html#best_practices_to_use_sy...

I have experimented with rendering the videos at the recommended keyframe interval with various bit-rates (high, medium, low) but I haven't seen any improvement. I have also tried streaming from Vimeo and Youtube, to no advantage.

Has anyone else experienced the same and come up with a solution?

TOPICS
Audio and video

Views

1.9K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Sep 21, 2018 0
Adobe Community Professional ,
Sep 21, 2018

Copy link to clipboard

Copied

Are these lessons being delivered from your LMS or a web server?

If from an LMS, try loading the same SCORMs to SCORM Cloud and test from there.

If from your own web server, try a different web server that is known to have high performance.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 21, 2018 0
New Here ,
Sep 24, 2018

Copy link to clipboard

Copied

Hello Rod,

These lessons are being delivered from the Cornerstone LMS. I  have indeed loaded the same SCORM to SCORM Cloud and experience the same issue (although arguably, not as frequently). The only time that there is no issue, is when I publish to a .exe file.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 24, 2018 0
Adobe Community Professional ,
Sep 24, 2018

Copy link to clipboard

Copied

When you publish as an executable the entire file needs to be on your hard drive before you can play it.  Bandwidth is not an issue in such cases.  However, when you are pulling something from a web server or LMS (which is also a web server) then the bandwidth pipe between you and that server determines how much data can be delivered in a given time.

With HTML5 output the assets for a given slide are usually downloaded when you get to that slide, hence the loading animation. The reason for not preloading the entire project first is that HTML5 is designed for mobile devices and many of these devices have very limited space.  They normally try to only download the minimum required to display the requested content.  From the perspective of the mobile device, an HTML5 elearning course looks a lot like a website.  But each slide in the course is like a single page in a website.  Would you normally expect the device to download the entire website just because you requested one page?  So it loads everything page by page, slide by slide.

If you have videos on that slide, then the loading animation will appear for a longer time than if you just had images and other objects.  You may be using progressive download videos which need to be completely downloaded to the device before they start playing.  Mobile devices normally expect videos to be streaming videos such as you would see on YouTube.  I note that you said you tried streaming videos and didn't see any improvement, but that would seem quite strange.  You should still see a short loading animation, but the videos should play sooner than with progressive download.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 24, 2018 0
New Here ,
Sep 24, 2018

Copy link to clipboard

Copied

Yes, thanks!

I take your point on the difference between executable files and HTML5 output.

The issue though is not the playing of the videos. Yes, there's often a 1 second delay before the video plays, but that is not a major concern. What happens is that the slide video and  the slide audio continue to play, but everything else on the slide freezes. The slide player simply stops. A semi-transparent layer sits on top of the slide with the "Loading" message, making it impossible to click anywhere on the slide until the layer disappears. By which time the video and audio have become out of sync with the slide actions.

Perhaps I'm barking up the wrong tree? Perhaps there is another cause? It's just that we haven't experienced this issue with Captivate modules that do not have slide videos.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 24, 2018 0
Adobe Community Professional ,
Sep 24, 2018

Copy link to clipboard

Copied

I'm a little unsure about your terminology here.

The semi-transparent layer with the loading animation is just a standard indicator that something is still being downloaded in the background and not all of the slide elements are there.

However, you say: "By which time the video and audio have become out of sync with the slide actions."

What 'video' are you talking about here? Do you mean an MP4 video, or streaming video?  Or are you just talking about the object animations that you've set up on the slide?

Is the 'audio' you mention here, the audio of the MP4 video, or is it the slide audio (i.e. WAV or MP3 audio inserted onto the slide timeline)?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 24, 2018 0
New Here ,
Sep 24, 2018

Copy link to clipboard

Copied

My apologies for lack of clarity.

  • The videos are MP4 slide videos, not streaming. They continue to play uninterrupted.
  • The audios are MP3. There is one background audio which plays over the first two slides. The other audios are per slide, inserted onto the slide timeline. They continue to play uninterrupted (although on occasion we experience the volume of an audio file plays at half the volume. Again this is random and doesn't happen consistently at the same point in the module.)
  • When the semi-transparent layer appears, the MP4 video and MP3 audio continue as normal, whilst the other elements on the slide freeze. It as though the player stops on the time-line and all elements on the slide also stop, except for the video and audio. For example, I have an animation which shows time progression on each slide - it simply stops whilst the loading message appears.
  • The "Loading" message can last for 20 to 30 seconds.
  • When the "Loading" message disappears, the slide player resumes from where it left off, but of course, the video and audio have progressed in the meantime whilst the slide animations where frozen in time; so they become out of sync.

I hope this is a little clearer. If not, would it help to give you access to run the module on SCORM cloud?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 24, 2018 0
New Here ,
Oct 10, 2018

Copy link to clipboard

Copied

Hi,

I have been having the same issue with the video loading 'grey screen' as you are. Unfortunately nothing we have tried has fixed it, and all of our attempts to get help from adobe have not got us anywhere either.

For me, the issue happens on slides with mp4 video synchronized to the timeline. All video has been output from Premier and Media Encoder as H264 mp4.

The issue for us seems to happen randomly, but mostly on Windows 10 pcs using IE11. Using Chrome results in far less occurrences of the problem.

We have tested it on our own LMS, and also Scorm Cloud, and the same results happen.

I would love for somebody to get to the bottom of this issue, as we have had to buy some Storyline Licenses to build any projects requiring video.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 10, 2018 0
New Here ,
Oct 10, 2018

Copy link to clipboard

Copied

Hi,

Similarly, after a 2 hour call to a very friendly Adobe support technician, there was unfortunately no solution.

I think that the issue occurs when video and/audio are imported. I've noticed that a module containing videos and audio recorded from within Captivate (File > Record a New > Video Demo) don't seem to exhibit the same behaviour.

We haven't noticed any real improvement using Chrome rather than IE.

It has been recommended that perhaps we try a different web server. I've put in a request with our IT department. I don't yet know how feasible that's going to be. Or whether it is likely to fix the problem.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 10, 2018 0
Adobe Community Professional ,
Nov 08, 2018

Copy link to clipboard

Copied

I have solved this by adding this CSS to the bottom of the CPLibraryAll.css located in the assets/css folder.

#blockUserInteraction{

display: none !important

}

#loading{

display: none !important

}

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 08, 2018 1
New Here ,
Nov 08, 2018

Copy link to clipboard

Copied

Hi TLC,

Thanks for the reply. I have tested out your fix, and it technically works, however, any interaction with the slide is still frozen until the slide ends. I think we tried a similar fix ourselves at one point.

For example, we have custom back and next buttons on our slides. If we implement your fix, we no longer see the loading screen, but clicking 'back' does nothing until the slide ends, and it 'catches up' with itself. Suddenly the project goes back to the previous slide without me clicking it. Similar issues occur if you use the try to use the table of contents etc.

I imagine there would also be issues with any text/graphics timed to appear layered over the video (we had text captions subtitles in captivate playing over the video in one of our courses).

The slide is still 'loading', we just don't see it.

I greatly appreciate your reply however. Its a lot more than I have got from Adobe in the last few months.

Thanks.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 08, 2018 0
New Here ,
Oct 07, 2019

Copy link to clipboard

Copied

I tried this fix and it works. The Loading screen is not seen while the video is playing. However, the 20 seconds it would display the "loading" overlay/icon is now time the user is unable to pause the video. Basically, nothing changed except the loading overlay is no longer there. Is Adobe going to fix this issue?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 07, 2019 0
Adobe Community Professional ,
Nov 08, 2018

Copy link to clipboard

Copied

Never had that issue when using the fix. Could always still interact with the screen.

In the project I did where I constantly saw the loading screen in IE, it seemed to fix the issue. Seemed as though the loading screen popped up even though the video was playing behind it.

You could always try putting the video in an html page, zip it up and insert as an html5 animation.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 08, 2018 0
New Here ,
Nov 08, 2018

Copy link to clipboard

Copied

Thanks for the tips and suggestions.

I have over the past three weeks, during several long online sessions, been communicating with Adobe support consultants, trying to get to the bottom of this issue. The case was transferred to a senior consultant a week ago, so I'm now waiting to hear what his assessment is. I'll keep you posted.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 08, 2018 0
Explorer ,
Jan 21, 2019

Copy link to clipboard

Copied

Did the consultant get back to you? We just ran into the same problem

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 21, 2019 0
New Here ,
Jan 21, 2019

Copy link to clipboard

Copied

Hey,

I know you were not responding to me, but I can add that I have on two separate occasions over the last two years reported and chased up this issue, but as yet, I have never had a response from support that wasn't 'We are currently looking into the issue'. I have also never been contacted without me prodding them first. 

We had to jump to Storyline for any elearning that contained video in the time being!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 21, 2019 0
New Here ,
Jan 21, 2019

Copy link to clipboard

Copied

Hi there,

I, like you, have spent many hours speaking to Adobe support on this. It took some convincing, but there was finally an admission that there was indeed a bug that needed to be fixed. I even got a bug number (Bug #CAP-4202755) targeted to be fixed in the next update/release. In the end I was not able to capture the error on Chrome, so the bug is specific to IE11.

We wait in hope.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 21, 2019 0
New Here ,
Jan 22, 2019

Copy link to clipboard

Copied

Its good to know they actually admitted that it is a bug!

After hours on the phone to them previously, their final suggestion was to uninstall all my adobe apps and run Adobe CC cleaner, right in the middle of a project that was running late due to this very issue!

Funnily enough, fast forward a few months, and my PC was completely wiped, new OS added, and all apps reinstalled, and the issue was still there!

Anyway, enough moaning from me, I genuinely hope they can fix it, because despite its flaws I do prefer using Cp to Storyline!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 22, 2019 0
Adobe Community Professional ,
Jan 22, 2019

Copy link to clipboard

Copied

I'm not sure the problem scenario above is the same, but FWIW the following solution may be worth looking at:

Re: Buffering icon appears when including a video demo in a project published as mp4.

Thanks

John Daigle

Adobe Certified RoboHelp and Captivate Instructor

Evergreen, Colorado

www.showmethedemo.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 22, 2019 0
New Here ,
May 09, 2019

Copy link to clipboard

Copied

Hi,

Thanks for your tips and suggestions.

I facing the same issue of video loading 'grey screen' with a loading icon.

I am using Captivate 2017 and output is AICC HTML 5.

The issue happens on slides where I have used mp4 videos (Event and Multi slide synchronized Video).

And when the "Loading" message disappears, then video and slide content (Image/button/object) are become out of sync.

The issue happened randomly, but mostly on using IE and using Firefox results in far less occurrences of the problem.

We have tested it Moodle, and also Scorm Cloud, and the results are the same.

I appreciate your reply.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 09, 2019 0
Explorer ,
Aug 20, 2020

Copy link to clipboard

Copied

Any way to apply this to HTML 5?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 20, 2020 0