How to Hide the Play Button When HTML5 Courses Are Launched on iPads

Jim is assigned an online course developed using Articulate Storyline. The course was published to HTML5, and when he tried to open the same on his iPad, he saw a ‘transitional’ page with a play button, before the course was fully loaded. Jim wondered why the page appeared and contacted his training manager Dick. Dick asked his e-learning developer to hide the page.

Many learners face the same experience while launching HTML5-based courses on their iPads. This is because iOS does not support HTML5 autoplay attributes for media (audio and video) tags. Webpages with audio or video elements cannot be self-launched without user interaction.

For example, consider this page with an HTML5.

This page contains which is played automatically when the course is opened on a PC. But, when a learner opens the course in an iPad, he has to play it manually.

Here are the steps to overcome this problem. 

1. First, publish your course.

2. 

3. Then, search for the file named player_compiled.js (for latest version) orstoryline_compiled.js (for older version) in the mobile folder and open it in an HTML editor.

4. 

5. Search for the piece of the code highlighted in the screenshot below, in the editor,and copy it.

6. 

7. Insert the piece of code with after the textsee below screen“player.revealPostInterstitial();”.

8. Save the changes and close the editor.

9. Now launch the course on an iPad. The course opens directly without the‘Play’ button page.

Note

1. You are editing the published HTML5 file. So, you need to make this change after publishing each time.
2. Many a time, e-learning developers use an introductory video in their online courses. This may slow down the loading of the course as the entire video has to be buffered.

This way, you can disable the ‘Play’ button which appears after launching the course on an iPad. Hope you find this post useful. Did you face any problems while accessing courses on iPads?