Adding Storyline Video Controls...

almost 3 years ago07/15/21 at 8:18 am (UTC)

Is there maybe something not quite right with that code snippet?

Of course there is :) I must pay more attention to the details when I'm tired.

var in_x = document.getElementsByTagName("video"); 
in_x[0].setAttribute("controls","true");

There was too much var hehe.

However I've tested it and now I see that something changed for the preloading queue of videos :/ they are now earlier in the DOM than the actual video, under video-pen div. So in order if you need to put controls on main video, you should put the code one slide before it... too complicated and not precise.

The easier way would be to add jQuery lib to your story file if you need precise targeting. Your video name is represented in DOM.

the highlighted area has data-acc-text attribute as you can see. That's the video name you've put in your story file, mine as you can see is Comp 1.mp4.

Put execute javascript trigger on the timeline start (or 0.01 if things doesn't work):

$('div[data-acc-text="Comp 1.mp4"] video').attr('controls','true');

The video name must be exact in order to work. The syntax you see also. The ' and " matters :) And then boom, you have only video controls on the video you want.

Of course you can reverse it, instead of putting controls on one video, you can use my previous code and put controls on all videos and then you can disable them on specificaly named videos. I guess your background video has separate master slide, so put there execute javascript with that:

$('div[data-acc-text="Your_background_video.mp4"] video').removeAttr('controls');

And controls would be gone (there should not be enter if you are wondering, that's just forums formatting).

Let me know if you need any further help.

PS if you are lazy, you can output story file without javscripts, add jquery and then test commands in browser inspector console (ctrl+shift+i).

Brett Conlon

almost 3 years ago07/15/21 at 10:54 am (UTC)

Hi Mateusz,

LOL to your first comment! And Thanks for your help. I'm SO excited to find a solution to this!

So, I've got something working here but as I'm new to this, I'd like to confirm and clarify a few things. Forgive me and please indulge my ignorance.

I've created a dummy file we can work with (attached). It has a Title slide and then 5 video slides after that. This gives me the opportunity to work on code that can isolate different videos to include a playbar.

For my first experiment I placed the following code onto the Title slide (BEFORE the video as you suggested) but in the published file, the playbar appeared for the first, third and fifth videos (seems to be alternating them On/Off):

var in_x = document.getElementsByTagName("video");
in_x[0].setAttribute("controls","true");

When I set it to x[1] I then got a playbar on the second and fourth videos (again alternating).

I think I'm going to need the more precise option as one of my modules has 3 videos in it (the first 3 in the project) and in future projects I may use a graphical video on the Title slide (not needing a playbar).

So I guess all that's left is the HARDER way <ugh>. I'm going to have to school myself in applying jQuery to my project (thanks for the link). My hesitation is that you have to keep adding/adjusting the published output. For testing this will be annoying to have to do each time and I'm nervous about possibly forgetting to do it at a later date if I have to modify the course and upload it to the LMS without the JS corrections. Where at all possible, I'd like for everything needed to be built within the Storyline file. But, it sounds like that might not be possible for my needs.

Cheers, Brett

Test_Video_Player_JavaScript.story

Mateusz Szuter

almost 3 years ago07/15/21 at 11:19 am (UTC)

Yup, as I said, something changed so drop the first approach and go with the jQuery.

I also don't like to mess with output due to my faint memory, but hey, we have technology here.

Open your master-master slide and put that snippet

if (window.$ != null) {} 
else {
 var jQueryLoader = document.createElement("script");
 jQueryLoader.src = "https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js";
 document.head.appendChild(jQueryLoader);
}

It will chceck every time that master slide loads if jQuery is present (window.$). If it is present, nothing will happen. If it is not - it will put in <head> section link to the CDN script from google. You don't need to remember anything, it will work automatically. Downside is, in order to work, someone must have access to internet obviously.

Then you just go with my jQuery snippet. If your video is first slide inside you training, you may consider adding dummy one with auto-forward so jquery can load without problems.

Brett Conlon

almost 3 years ago07/16/21 at 6:17 am (UTC)

FANTASTIC, I finally have a working solution that I'm really happy with. I couldn't have done it without your help, Mateusz - THANKS!!!

To give back to the community I have prepared a Storyline file with all the bells and whistles I'm currently using for my video projects. Detailed instructions and options are provided for the following functions:

JavaScripts to enable/disable the video playbar on ALL or SELECTED slides
Variables & Triggers needed to control when the [NEXT] button appears so the user can't easily jump ahead and skip the video.
An ADMIN MODE that forces the [NEXT] buttons to appear on ALL designated Video slides, which is aimed at helping Designers and LMS admins with testing and troubleshooting the course.

I hope this Storyline file helps someone else to save the huge amount of time I have spent on researching/testing all of this. Again, it's a shame the custom playbar function (with restriction options) is not already built into the Storyline architecture.

Best rgds, Brett

Custom_Video_Playbar_Tips___Tricks.story

Marianne Seidler

almost 3 years ago07/16/21 at 4:35 pm (UTC)

This is a great solution. Is there a way to customize the browser controls? I am attaching an image of the More options from Edge. They include Download, and we may not want the user to download the video.

MoreControlsEdge.png

almost 3 years ago07/16/21 at 4:37 pm (UTC)

Thank you both! ... From one of those people who constantly scours these forums for solutions ... and rarely takes the time to say how helpful the solutions are!

almost 3 years ago07/17/21 at 2:04 am (UTC)

Thanks Marianne,

Because it's browser-specific it is likely quite difficult to add code that could remove aspects of the playbar. The only alternative solution I've seen mentioned is to place a 100% transparent box either over the "extra options" button (3 dots) or over the place where the "Download" option would appear, which would stop the click-action from working on those spots. I haven't tested it myself so I don't know if this would still consistently work if the browser window is resized or what impact it might have from browser to browser but this is what I'd turn to next if I needed to do this.

If I have time or if a better solution comes along, I could add that function to one of the pages in my Tips & Tricks file :)

Cheers, Brett

almost 3 years ago07/17/21 at 2:05 am (UTC)

That's very kind of you Sherri!

Ta muchly! :)

over 2 years ago08/16/21 at 3:07 pm (UTC)

G'day all,

I've been working on an update to my Tips & Tricks file. We recently released a course containing video slides to our employees, with the previous bells & whistles set up, but, as always, a few students managed to get themselves stuck which highlighted a few holes that needed plugging.

If a user closes the course after watching a video and then re-opens the course, it loads back to the same slide but it starts the video again (which might be 30 mins long). It seems that the status of that slide is not sent back to the LMS. The user invariably drags the playbar to the end of the video (because they've already watched it) but they can't proceed and they think they are stuck, not realising that the NEXT button is waiting for the slide timeline to complete. So I've added the following to the project:

Added a warning message that appears if the video ends before the slide timeline has finished (ie. the user dragged the video playhead forward to skip content - probably to the end).
Added a countdown timer that appears, after the warning goes away, to let them know how long before the NEXT button will appear. The counter is an adaptation of the great work of Steve Hazelton. I modified it so that instead of using separate text boxes for the seconds and minutes and a hiding/showing zero that padded the single numbers, I created a javascript that pads the zero (when needed) and merges the minutes/seconds all into one tidy string. Here's the thread Steve posted the file into:
https://community.articulate.com/discussions/articulate-storyline/countdown-timer-for-storyline-360-not-in-results-slide
I also made some adjustments to the Admin mode to simplify if you have multiple video slides.
All the instructions are updated including the screenshots of the triggers, etc.
I reduced the number of video slides from 5 to 3 to make the file smaller.
Added suggested tips on bottom-left of each video slide, indicating what to test on that slide.

I hope this file serves someone well. I'm sure I'll end up adding more and releasing a v3. I'm about to look at how to add the closed captions button to the playbar and maybe block the Download option (as available with some browsers).

Best regards, Brett

Custom_Video_Playbar_Tips___Tricks_v2.story

Mateusz Szuter

over 2 years ago08/16/21 at 4:15 pm (UTC)

Hi Brett,

why you don't simply use "When media completes" trigger? :)
The playtime won't save to the LMS, there is workaroung with javascript to save that as variable and resume playback, but for me that's too much.

Also, I wouldn't put such a long video inside scorm package. Preferably would do the simplier approach in splitting that using multiple SCO or just two different packages, varies of what LMS you use.

over 2 years ago08/17/21 at 12:18 am (UTC)

Mateusz Szuter

why you don't simply use "When media completes" trigger? :)

Hi,

For what part? For the next button to appear?

In the very beginning I had it like that - to 'show the NEXT button when media completes' but all someone had to do was scrub to the end of the video and the NEXT button would appear. We did some reporting on the first video training we released and found a number of people had completed a 30+ min course in less than 5 minutes, including questions. They had clearly cheated. So, I had to put the extra measures in there to stop the cheating.

Thanks for the tip re: playtime values sent to variables via JS. Might be worth looking into...

Why put such long video inside a course? We were originally delivering a 3 hour face-to-face course but with the COVID lockdown we've been under lockdown for a while. So, we decided to go to our studio and record an interview-style video with a greenscreen behind the presenters. The final product (broken into 4 modules + Assessment) looks clean and is engaging and the feedback so far is that the students are very much enjoying it.

Chz, Brett