A deal breaker has appeared for many who want to use Articulate Storyline 2 for its HTML5 playback on iPads. As the image above shows, the play/pause buttons are missing and the restart button is not centered vertically from the published HTML5 LMS files.

This is often missed because it only effects the LMS published files, so if you test publish through the Web tab, everything will look great. Only a view through your LMS will show, or not show, the missing button problem.

Articulate is aware of the issue and has posted this:

Play/Pause Button Is Missing in HTML5 Output in Mobile Safari
You may find that the play/pause button is missing from the seekbar when you view HTML5 output in mobile Safari on an iPad or iPhone.

This is a known issue. It’ll be fixed in a forthcoming software update for Articulate Storyline. Enable the Check for updates at startup feature to be notified when new updates are available.

Source

We look forward to their update, but until then we need a fix. Luckily, there is a fix.

John Ruiz posted on the subject at the Articulate community blog: https://community.articulate.com/discussions/articulate-storyline/storyline-2-play-pause-button-seekbar-missing-on-ipad

This problem can be fixed by copying some of the HTML from index_html5.html file into the index_lms_html5.html file. When you publish your SCORM, AICC, or TIN Can compliant files through the LMS tab, click Open to view the published files. These two HTML files can be open in any text editor, such as Notepad on the PC. If you don’t have a text editor or want one that can display line numbers, check out Notepad++.

In your index_lms_html5.html file you will find the problem HTML around line 70:

     <div id="control-progress" class="controlbar-button">
          <div id="control-pauseplay" class="ignore'>
               <a class="icon play" style="dislay:none;"></a>
               <a class="icon pause" style="dislay:none;"></a>
          </div>
          <div id="progress bar" class="progress container">
               <div div class"progress-bar"></div>
          </div>
          <a class="icon restart" href="javascript:player.restart()"></a>
     </div>

Copy this code below (found in index_html5.html) and replace the code you see above in index_lms_html5.html.

     <div id="control-progress" class="controlbar-button">
          <div id="control-pauseplay" class="ignore">
               <div class="playbtn progress-bar-button" style="display:none;">
                    <div class="icon play"></div>
               </div>
               <div class="pausebtn progress-bar-button" style="display:none;">
                    <div class="icon pause"></div>
               </div>
          </div>
          <div id="progressbar" class="progress-container">
               <div class="progress-bar"></div>
          </div>
          <div class="progress-bar-button restart">
               <div class="icon restart" ></div>
          </div>
     </div>

Save your index_lms_html5.html file, ZIP the package and upload it to your LMS. Test it. Then test is some more. You should see your buttons happily back in their place:
bottombar

We recommend saving a copy of your working index_lms_html5.html file outside of your project, as each time you republish, it will be overwritten with the non-working file. After each publish you can paste and write over the file.

Happy eLearning!