Storyline 2 LMS Play/Pause Safari Missing Button Fix

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 […]