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.

  • DolandRuiz's avatar
    DolandRuiz
    Community Member

    It does not let me save to that location. It's saying I need to contact an admin. I'm using my personal computer at home and I'm running Wolf Security on an HP Elitebook laptop. How can I get full admin access??

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

      If you cannot directly save there, save somewhere else. Then copy and paste to that specific position should work.

      • DolandRuiz's avatar
        DolandRuiz
        Community Member

        ok I got it to work by calling HP support and they showed me how to grant full access because I couldn't even add files or change names. 

        Now, up there in the comments somewhere (I can't find it now) you answered someone that had the same problem I have: I do have audio VO in the first slide and it does not play without user interaction on mobile. It seemed like you had a suggestion of having a dummy 1st slide which I added but then my 2nd slide does not play the VO without the tap. You said something about having "action" before the audio or something. Is there a way to make it play without user tap?

        This is the live module: https://foodbanksbc.org/PipsTown/WaterScene1/

        Works on desktop but no audio on mobile.