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.
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).
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.
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.
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?
So many workarounds, why not just add reasonable video control options to SL?! It's pretty ridiculous that it's such a manual process for such a basic feature. If you can import videos, normal user experience controls should be a given. Four years later, and this feature hasn't changed!!
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.
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!
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.
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?
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.
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 :)
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).
Is this code still working? I tried to add it to a trigger at the beginning of the slide but it doesn't work, nothing happens. Any chance for an updated code to have the player controls displayed on the video without using the default one that go under it? Cheers.
60 Replies
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
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
can you make your own that appear when you hover over the video?
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
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.
@Phil - correct.
That's my point.
SL assumes you are not going to use the fullscreen area - and if you are, it seems like there's no way to re-position.
I need fullscreen, and to add the SL controls. It seems to be a case of one or the other.
Boo :(
Bruce
Hi Bruce:
Why don't you try a hybrid solution of Phil and I.
Remove the Show Video Controls, then create buttons that display only when the user hovers over the embedded video.
Best Regards,
Dennis Hall
Hi,
@Dennis/@Phil - they are not going to go for that I'm afraid.
Thanks though....
Bruce
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.
Awesome Tabatha! Thanks for popping in to share. It could certainly assist someone in the future.
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?
Hi Mattias, Use this http://www.w3schools.com/html/html5_video.asp to make a web page named index.html with your video inside a folder. Then target that folder within a WebObject.
So many workarounds, why not just add reasonable video control options to SL?! It's pretty ridiculous that it's such a manual process for such a basic feature. If you can import videos, normal user experience controls should be a given. Four years later, and this feature hasn't changed!!
Use the seek bar option in the player.
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.
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!
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.
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?
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.
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 :)
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
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).
Hello,
Is this code still working? I tried to add it to a trigger at the beginning of the slide but it doesn't work, nothing happens. Any chance for an updated code to have the player controls displayed on the video without using the default one that go under it? Cheers.
Hello Robert,
yes, it works, it has a little (unfortunate for javascript - breaking) mistake in my previous post.