Forum Discussion

MathNotermans-9's avatar
MathNotermans-9
Community Member
4 years ago

How to get rid of the 'Big Black Play button' when publishing Storyline.

This question pops up over and over again, so i made a new post i can point to whenever someone asks about this.

For Storyline360, either in your published folder or in the Programme folder find the slides.min.js file.
(C:\Program Files (x86)\Articulate\360\Storyline\player\unified\html5\lib\scripts)


What i did was unminifying the file...so it becomes what more readable 
Used this here... https://unminify.com/

I added several console.log("now this happens") to the slides.min.js to figure out where what happened exactly and thus soon found that there are several functions in it that cause the playbutton on mobiles.

onMobileStart
createMobileStartOverlay
showMobileStartOverlay
killMobileStartOverlay

All quite promising...so could i just call one of these functions ?

After several tests and retry's i found that just adding
this.onStart(); at the end of the onMobileStart function overrides the play button and mobile behaves as desired.

So this is onMobileStart inside slides.min.js

onMobileStart: function (t) {
var e,
n = this;
(this.rejectDeferred = t.rejectDeferred),
o.addClass(document.body, "resume-shown"),
(e = { visible: !0 }),
t.mobileStartAsPrompt && (e.isResumePrompt = !0),
this.setState(e, function () {
var t = null != n.refs.resume ? n.refs.resume : n.refs.playIcon;
c.env.is360 || t.focus(), l.trigger(u.startOverlay.READY);
});
this.onStart();
},

Adding my slides.min.js file for anyone to test it with. Make sure though to copy and save your original one somewhere, so in case of troubles you can go back. Also keep in mind that whenever Articulate updates Storyline this file will be updated too, and you need to do the procedure above again.

DO NOT copy and replace the slides.min.js file with this one after updates...because Articulate might have changed things...so not advised using an older file. Redo the steps and change your own slides.min.js file.

  • Player button has been removed by using the following code but audio not playing automatically. To play the audio I have to click on an interactive element. Any advice?

    u.trigger(c.startOverlay.READY)})),this.onStart()

    • MathNotermans-9's avatar
      MathNotermans-9
      Community Member

      Already mentioned this on page 2 of this discussion... And possible solutions for it.

    • AVT-Digital's avatar
      AVT-Digital
      Community Member

      If you're trying to autoplay video (with audio) as the very first slide, that is not possible due to restrictions by all major browsers. See this: https://developer.chrome.com/blog/autoplay/

      You can autoplay a video without audio, but for video with audio, the user has to interact with the page first (click on something).

  • AndyLaszlo's avatar
    AndyLaszlo
    Community Member

    Hello Math - thank you, this works a treat.

    I was testing this out to check all variables.  I've found out that the:

    'On restart' = 'prompt to resume' within Storyline setting no longer works (which provides a different screen to the black play button at the start).

    Is this expected behaviour to due to the hack?  

    • TilburgTeacherE's avatar
      TilburgTeacherE
      Community Member

      Resume behaviour should not influence this, as its in the storyline scripts themselves. I will test this soon...

  • ThorstenHolt's avatar
    ThorstenHolt
    Community Member

    Dear Math, or anybody whose of interest,

    I am using Storyline 3 and I don't want to switch to 360 because of special reasons.

    I want to get rid of the play button on mobile. On desktop its removed with a triggerslide before the actual first slide.

    As I don't have any skills in developing, I kindly ask, could you deliver me the updated file for an adequate fee? Kind of freelancing.

    If yes, please send me your message here under click on my profile and contact me.

    Thank you so much,
    Thorsten

  • Hi all, long time follower, first-time poster. It appears that with the latest Storyline360 update (and release of the new 64bit beta environment) that this “trick” is no longer possible using the method shared in this thread. From what I can gather, the string of script to be manipulated isn’t even in the slides file anymore.

    Math, you aren’t the hero we deserve but you’re the hero we need. Please, help!

  • Hi Math,

    If it is a storyline block in Rise, it has to be published directly from Storyline to Review. Is there a workaround to get rid of the play button, if you can'y download the files?

    Thanks.

    Kind regards,

    Morten

    • MathNotermans-9's avatar
      MathNotermans-9
      Community Member

      You can upload files to Review. Bigger issue however is that due to changes in Storyline this doesnot work anymore. I tried to solve it, but without luck so far.

  • ThorstenHolt's avatar
    ThorstenHolt
    Community Member

    For all Storyline 3 - Users: 

    1. Publish your project for Internet

    2. Go into the folder of your published projects in the subfolder <yourfolder>\html5\lib\scripts

    3. Open the file slides.min.js (right click- open with - select "Editor")

    4. Hit Strg + F to search. Search for " u.trigger(c.startOverlay.READY) "

    5. You will find just one phrase. add the bold code:
    u.trigger(c.startOverlay.READY), this.onStart()

    6. Save file and upload it to your online source. Play button is gone, even for mobile.