Prevent Play button overlay and video full screen in iPad

Hi All,

I have created a small course in Articulate 3 trail version for testing the SW. When I launch the course in iPad, a black page appear with play button instead of my first page. Once I clicked on it, it's showing my first page (it has a static image). How to remove that? And also I have videos from page2. The video will open when the user clicks on a text. It's working fine but, it's opening in full screen automatically. My requirement is that the video should run only within that particular place. How to make it? Please suggest me.

Thanks,
Guru

8 Replies
Alyssa Gomez

Hi Guru!

Thanks for reaching out here! There isn't a supported way to remove that play button screen when launching mobile Storyline 3 content, but you're more than welcome to share your thoughts with our Product Development team here regarding this. 

I'm not sure if other users have been able to come up with a way to remove it, but if so perhaps someone in the community will be able to pop in with a solution that suits your needs. 

Regarding the video opening in full screen, what type of video are you using? Is it MP4 or embedded from the web? Also, how is the video added to the slide?

Jackie W

Hi Guru,

This is great timing. We are experiencing the same issue with all of our mobile courses that are played on an iOS device regardless of whether the first slide has a video or not (even when courses have no video).

We've tested multiple packages and it's only happening with iOS devices. From what we've been finding, the issue is with how the iOS handles HTML5 and auto play. In working with our LMS team, they suggested the following change to the published output file: https://blog.commlabindia.com/elearning-development/hide-play-button-storyline

The caveat is that you have to do this every time you publish or republish a course. This is an okay fix for us, as we currently only publish for mobile on a case by case (project by project) basis, but it may not make sense for large organizations who publish HTML5 for mobile in all courses.

There was also another "workaround" mentioned in this community thread. https://community.articulate.com/discussions/articulate-storyline/remove-play-button-on-html5-opening-screen-in-storyline-360

Raja Guru

Hi Jackie,

Thank you very much for your reply.

I went to the linked article one week before, but I think it seems to be an older version of SL3 or SL2. I'm using trail version of SL3. By the way there is no such files 'player_compiled.js' and 'storyline_compiled.js' found in the "mobile" folder as mentioned in that article. May the Articulate changed it's way of output recently. 

I have a doubt about that overlay screen. Is that play overlay screen appears from the iPad itself or from SL? Because, I can see something in the main.min.css like ".mobile-start-overlay" and so on. I don't know whether I can change it to disappear on the screen or not. Suppose if we can, the first screen is appearing after click on that play button only. So, how can I trigger that event using JS or any event inside SL.

There is a big confusion here and unable to achieve expected output at the beginning itself :).
All please suggest me how this is possible.

Thanks,
Guru

Jackie W

Hi Guru,

The issue is actually with iOS and not Storyline. I know the published packages are very different between SL2 and other versions.  

Did you try altering the code in html5>lib>scripts>app.main.js? Take a look at the workaround mentioned at the bottom of this article? I'm not sure about SL3, but this article talks about SL360 and someone had mentioned the change should work for SL3 as well. 

https://community.articulate.com/discussions/articulate-storyline/remove-play-button-on-html5-opening-screen-in-storyline-360