Storyline video controls bar options

Indeed posted this to support too. Thx.

As a reply to this i got from support the answer that the Classic Player uses the old behaviour...thus adds the controls below the visible view. Whereas the Modern Player pushes the controls over the bottom of your visible view.

I donot think this is proper design. Both players should act similar on this part. Imagine someone ( as i did ) makes their design for a lot of slides based upon the Classic Players behaviour. Then when publishing with the Modern Player you loose 20-40 pixels or so from your view, because the controls will popup there. They should act similar on this.

Hi Math,

I've just found your post about those clunky new video player controls. Not sure why your post didn't show-up when searched for somebody else's disappointment with that "update" that breaks the previous video controls and created a post myself here: https://community.articulate.com/discussions/articulate-storyline/any-way-to-display-video-controls-all-the-time-not-auto-hide-and-below-the-video-not-overlapping-it

I just wanted to add my voice to your post and support ticket. Is there a way to add a "vote to your support ticket or I'll have to create a new one? As this is a HUGE problem for me and my customers (most of them are in the medical industry and create training for doctors, nurses and surgeons). They absolutely need the video player controls to NOT hide any portions of the videos and also to be displayed on the screen all the time (not auto-hide as the auto-hide code doesn't work well on all platforms and devices - i.e., sometimes they do not re-appear) .

One of the lacking things on this forum... not very good search options. I see questions coming along that i know have been answered before, and apparently the user(s) cannot find the answer. So Articulate should improve this.

I donot know a way to add a vote for this alas. At the moment quite busy, but i will search a Javascript solution to continuously show the controls and reposition it at will...
Really can imagine that in the medical industry this is a must.

here is a version with transparent background (alpha=0.6) 

add this javascript on every slide (trigger timeline starts), where videos are used (or in a global script)

if( !window.videoSkin ){
  style = document.createElement('style');

  style.textContent = `
    .control-background {
      background: rgba(0, 0, 0, 0.6) !important;
    }
  `
  document.body.appendChild(style);
  window.videoSkin = true;
}

result
https://360.articulate.com/review/content/df10b630-9f51-4e4d-95be-9c4dfbe62420/review

Nice Jurgen, but still over the video...being transparant certainly a plus...but couldn't we change the css for the video player...

.modern-video-controls{
position: relative;
top: 0px !important;
}

Changing these pushes the controls downbelow the video

yes, I know - I have a solution, but the problem is, that the navibar don't scale with the content

ok:

but:

the navibar hides different areas - depending the scaling of the content

this is my current version

https://360.articulate.com/review/content/a7443733-4cf2-44b8-b0f4-8daf8f2709f9/review

(a compatible fullscreen mode is implemented)

and more screenshots (different position of the video)

there is a reason why storyline choose their solution - like youtube/vimeo/...

Thanks Math and Jürgen! Sorry for my late reply as I was under deadline and didn't have time to check the forum.
I found a way to modify the generated desktop.min.css and mobile.min.css files to change the video controls to:

1. 1. be smaller in height (28 px vs 43 px)
2. stay below the video
3. stay on the screen all the time without auto-hiding (when they are below the video is especially important to stay on the screen constantly as they cannot be easily triggered to show-up as the user must hover over the video, not over the controls to get them back)
4. was able to hide the Full screen and PIP buttons. If somebody think this may be helpful I can upload my desktop.min.css and mobile.min.css files with those changes.

Only problem with this is that every time I publish the course I have to go and manually replace those 2 files which is a bit annoying, especially when I need to post it on Review 360 for feedback...

You can overwrite a css at Storyline timeline start... 
Please do add your css files...i will test the overwrite.

you could replace the original installed files in

C:\Program Files (x86)\Articulate\360\Storyline\player\unified\html5\lib\stylesheets

so publish to web/LMS and to Review 360 then works without exchanging the files

Hi Math,

Attached are my modified files.

Of course I forgot to mention that unfortunately cannot see those modified controls into Storyline 360 while working on project, so I'm working kind of blind inside the project as you need to place the video and accommodate blindly for the video controls being below the video.

Thanks Jürgen - yes, I found those as well in the Storyline installation directory, however I have multiple sets of customized files for different clients (some have colour and player look& feel changes as well) that are impossible to customize inside Storyline :( so I'm constantly dealing with replacement .css files in my projects and honestly can't keep track with which set I've replaced in the installation directory, so decided to keep them till the end and replace into the generated package.

for which storyline version are the two css files

So ideally... a variable inside Storyline..currentClientName ( or some like that ) and based on that a trigger that overrides the CSS with given classes ;-)

Hi Math,

that would be a very neat trick ;-) since we can't have a proper customization to the Storyline player and video player.  Please, share if you are able to do it.

Hi Jürgen,

These are for the latest version of Storyline 360  v.  3.70.292110, November 29, 2022. If you are alarmed by the file size - it happens because I first "beautify" the .css, so it's not just 1 long line and after done with modifications, use css minify to minify them back. Obviously, the css minifer I use compresses the code more than the one that Storyline builder uses.

Anyways, these were some quick hacks to the css, for the 1st Draft of the project. Unfortunately, these new video controls that were forced upon us by Articulate team are also absolutely non-responsive and do not scale properly when the bowser window is scaled (device screen changes), in fact - they stay exactly the same size thus taking larger %-tage of the screen space when you scale them down as opposed to the older video controls that scaled up and down responsively. So, for the final version I will go with an external JS-based player, which unfortunately will also make the final size of the course larger with ~1MB per video... That's what the update to Storyline 360 left us with! Unless I down-version Storyline 360 for the time-being or start using the "classic" player - which is so outdated...

Hi guys,

Anyone to have it or to know a download link for Storyline 360 version 3.64.27845.0 - i.e. the version BEFORE Articulate changed the embedded video controls with the so-called "Accessible" controls? I have clients that need to do updates to their eLearning modules, however absolutely hate the new controls and do not wish to waste time and money to change the controls with external JS-based players. They wish the old embedded video controls that sit BELOW the video and do not hide and I cannot give them this unless downgrade to that version of Storyline. I've contacted Articulate support but they seem to be unresponsive and do not wish to provide me with a download link for that version and are stalling and asking me to send him recorded video for them to review and give me support when I'm explaining I don't need their support as the new controls are that way by design, I just need an older version of Storyline that's not available through the normal way of down-versioning - as they only have the last 6 versions there. I don't understand what is that gatekeeping of the older versions of Storyline?!?!?!

you can open a support case to get the old installer

hint:

• you can collect the old installer for yourself
• after every updating you can get the just installed version in
• C:\ProgramData\Articulate\360\Temp\
• rename the file (with version number includes) and backup the file
• to install such older version you have to manual deinstall stroryline and install the old version afterwards

but please remember - you will create courses with known bugs

(e.g. if you use 3.64 the course with firefox will start with an endless three-dot animation, if there is audio in the course - error was fixed in 3.67)

Why o why does Articulate introduces new and revised bugs with updates ;-) ( cynical tone of voice ) Do hope they deliver the 64bit version bugfree.

the firefox bugs will only appears with downgrade to old version - but if the old video player really is needed ...

(this bug was not really a firefox bug, but a storyline bug that was present for many years and only became visible with firefox 103)

Hi Tsvety!

It sounds like you were looking for a download link to access an older version of Storyline.

I see that the community has been helping out and you've also opened a support case. Smart move! It looks like my colleague Philam was able to provide you with a link to use. Awesome!

Let us know if you have other concerns, and we'd be happy to help!