Forum Discussion
Storyline video controls bar options
In one of the later versions of Storyline the controls bar of embedded video got changed. You now have the option of Dark or Light. But in contrast to the old video controls the new ones are bigger...and whats even worse they get pushed into and over the video... whereas the old ones just were added below the video.
See the image added...
Can that be changed back the way it was (adding the ctrls below the video ), because in a lot of cases this will hide parts of the video ( logos as seen here ) that are important.
Furthermore i would like to see more options. Now the only thing you can choose is 'Dark', 'Light' or none. I would really like to define height of the bar/icons and what icons show... as not all are needed all the time..
Thx in advance
Hi Math,
Thanks for reaching out! It looks like you're working with one of our support engineers, Renato. We'll continue the conversation in your support case.
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/reviewNice 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 videoyes, 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. be smaller in height (28 px vs 43 px)
- stay below the video
- 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)
- 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 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
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.
You can overwrite a css at Storyline timeline start...
Please do add your css files...i will test the overwrite.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.
for which storyline version are the two css files
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...
