Adding Storyline Video Controls...

Jun 13, 2013

Simple one (I hope....)

I have a fullscreen 16:9 video - it must stay fullscreen.

I want to add in the  Video Controls.

When I Preview/Publish they appear off-screen.

Any way to get them to appear in-frame, as they seem to always auto-appear under the video.

Thanks!

Bruce

60 Replies
Dennis Hall

Hi Bruce:

If you have embedded the video, you can apply controls, however, if the video is a WebObject you cannot.

As an embedded video, the controls can be placed in front of the video, as a WebObject the controls will always be behind the video because WebObjects are always on top of everything else.

Hope this helps.

Best Regards,

Dennis Hall

Bruce Graham

Thanks Dennis - but I do not see/know how to place them where I want.

SL seems to place automagically, and that is that.

See image.

My video (embedded) has to be fullscreen, and the controls seem to just be stuck on the bottom, so they are out of frame, see attached image where I have moved the video to the side a bit, (red line = the bottom of the slide).

Hmmm......

Bruce

Dennis Hall

Hi Bruce:

Since you have player controls already in your video, I safely assume you have a Flash file(published with its player controls) embedded. That file is where your controls are comming from, not Storyline.

I have attached a sample story file for your reference to see how you can create controls for a video file with no controls. The controls can be placed anywhere you want within the content area.

Hope this helps.

Best Regards,

Dennis Hall

Dennis Hall

Dennis Hall said:

Phil Mayor said:

I may be wrong but that is the built in player controls which are overhanging the slide because you have the video full slide


Hi Phil:

I need to learn something here.

How do I display video contols when I embed a file (in my example, an FLV file)?

Best regards,

Dennis Hall


Disregard. I forgot about the Show Video Controls checkbox.

Tabatha Dimas

I know this thread is old, but it is the same problem I just had and gave me an idea that worked! Since I embedded a full-screen video and then set the SL video control bar to display (default is bottom of screen, no other options), the control bar attached to the bottom edge of the video thus it hung off the bottom edge of the slide and wasn't visible at publish. To fix this, I used my mouse cursor and grabbed the bottom edge of the video and just 'scooted' it up a few pixels so the control bar now sat within the slide. That scrunch of just a few pixels vertically didn't distort the video visibly and I now have a visible control bar.

Matthias Dengler

Hello,

same problem: when I embed a video in the 16:9-format in storyline, the video-control-bar isn't visible any more in the presented video. I solved that with own buttons (trigger for play and stop) but there is also a timeline missing. How can I embed a video in 16:9 without losing the controlbar and timeline? 

Désirée  Jochem

We definitely need better video controls in SL. Videos in learning have been more and more popular in the last years.

Now, we know SL has video controls - but you can only attach them below the video, which can mess up your resolution. Like Richard said, a workaround using the video as a webobject works, but using a webobject can lead to another set of problems. And like Karin said, you can always use the seek bar option in the player, and then there are people like me who completely disable the player.

Video controls in SL work and do their job, but they're not very pretty. Image spending a lot of time on the perfect design just to add a video with that gray video control bar. The thing is - learners don't need to see the controls. They know Youtube, they know other web videos - and those videos only show the controls when the user mouses over the video. That's even how ot works in Rise.
Since we often use SL in combination with Rise, I wish we'd have a solution for video controls that look just like Rise. 

Lauren Connelly

Hi Ina!

You're right, video content is huge in e-learning right now! 

Have you tried creating your own "play/pause" elements and adding a trigger? 

I've been using icons lately as my "play/pause" buttons. Recently that has been my go-to for building courses where I'm more focused on the design elements. 

If you have any tips on adding your own controls, feel free to share! We love seeing everyone's creativity around here!

Désirée  Jochem

Creating my own play/pause triggers is fine, but it still doesn't give me a seek bar, which is a pretty essential thing for any video. Just adding play/pause doesn't offer the option to jump back to a certain point in a video or checking how many minutes of video are left.

Creativity is a good thing, but let's face it: Like Andrew said - already a year ago - those are all workarounds. SL absolutely needs better video controls.

Kerry Skillington

Hi Lauren, 

I tend to agree with Ina and with Andrew. Modern PC screens allow for great quality HD video in 16:9 format and to either have to forgo video controls or reduce the size of the video to fit on the screen isn't ideal. Can you please advise what the best process is to make a request for change? 

Désirée  Jochem

Hi Kerry,

great to see we're on the same page here.
You can submit any ideas for Storyline and other Articulate Products as a Feature Request here: Feature Request.

If you need this right now - like I do - I can offer a workaround:
Don't insert your videos as a video in SL, but as a WebObject. You can add video controls in the corresponding .html-file. Html video controls still look a bit different from Rise video controls, but they're still better than SL's integrated controls - and they work as an overlay, so you don't have to resize your videos.

Mateusz Szuter

I can offer one another workaround, the simpliest without need to do webobjects or any sort of that. It will produce smooth and familiar video controls, the default browser controls.

You put a trigger "execute javascript when timeline starts" with following code inside:
document.getElementsByTagName("video")[0].setAttribute("controls", "true");

And boom, overlayed, hovered, default controls are there. They even cope with storyline normal controls, so you can use media complete trigger when you need it. It also has fullscreen button. Hope that helps :)

Mateusz Szuter

I cannot edit my original post anymore, and I just switched to 360 and there you should modify javascript a little.
You still need to fire the execute javascript trigger on the beginning of the slide, but the code is

var in_y = document.getElementsByTagName("video"); 
var in_i;
for (in_i = 0; in_i < in_y.length; in_i++) { in_y[in_i].setAttribute("controls","true"););

It will work in every storyline version, it basically searches for ALL video tags and adds controls to them, however, due to the preloading of the slides, you better put that code on every video slide you have. It won't hurt.

It looks like this in Firefox (every browser has it owns controls).