Adding Storyline Video Controls...

Hi Mateusz, you are a life saver. Works perfectly now. Thanks!

Have a great weekend. 

Hi Mateusz

Works perfectly now. Thanks!

Have a great weekend. 

Thanks, this works great! Have a nice weekend. 

Hello!

Thanks for this code. It works great in Storyline. Do you have a version for a Storyline block in Rise? I haven't been able to get the full-screen button to show in the block, and the CC doesn't work well.

You are a star!!! Thanks for sharing the code.

Hi Mateusz,

is there any line of code that I can add so that users will not see the download option when clicking on these 3 dots in Chrome player?

I tried adding controlsList="nodownload" but doesn't work. 

Thanks 

Hi, I've never used storyline block in rise :( but rise a little more complicated to edit - you must have basic knowledge of how does javascript works, find proper slide inside published rise files and edit them with "controls=true". You can start by inspecting your Storyline Block, writing down its class or id, and then searching through javscript files. Dunno if it would work however.

Well, the answer is "i don't know" and as far as I know, it's somehow hard.

https://stackoverflow.com/questions/9756837/prevent-html5-video-from-being-downloaded-right-click-saved/9756909

check this topic on stack overflow and if you have some knowledge on javascript, you could prevent the context menu or hide something.

Cool thanks. No worries :)

Hello Mateusz,

This is fantastic. Thank you so much for sharing. I do have one question though. When the slide starts, the playbar is invisible. If I click in the general area it should be in, it will begin playing and works like a dream. It's just that initially, the user is not able to see it, even if I hover over that area.

Thanks,

Stacey

Hello Stacey,

If your video is set to "play when clicked" that's Storyline making it 'not like a video' until you click it. One workaround would be, for example, adding some layer on the video with big "play" button, when you click it, the layer hides and the start media trigger fires - everything works good, controls show immediately. :) There are other JS/CSS solutions, but I guess they are overhit.

Thanks! I haven't tried it but appreciate your sharing your approach. The version in the new release works better, too.

I was already on a layer when I inserted the video, so I couldn't use your layer trick. However, I created a workaround like this. I took two screenshots. One of the Chrome play bar (edited out the play time).  Second of what I wanted the video to look like before it begins. Then I meshed the two together and saved it as a new picture. I then went through the video's Poster Frame option and selected that new picture. So when the timeline starts, they'll see the fake play bar, click on it and the real one will activate. If they are in a different browser, it will flicker to the new one, but as you said, it is so quick I don't think anyone will really notice. I really appreciate the code!

Many thanks Mateusz! Works like a charm for me.

Yes, we're now 7 years after the original post and still no further Storyline options are provided than Below or None - very sad indeed!

Do any of you smart people know how to put controls like these on a YouTube video in a slide? I know I've seen an example of this, but I can't find it now. I want to be able to add controls that allow the learner to jump to a specific spot in the video. Thanks in advance for any help!!

Hello Sherri,

Here's starting point for you

https://stackoverflow.com/questions/42060604/with-embedded-youtube-video-create-link-that-jumps-to-specific-time

Note it does need jQuery.

You must fire the trigger execute javascript when object is clicked and then add javascript seekTo(timeinseconds)

Thank you @Mateusz! I was hoping you would answer. :)

Hi Robert,

I know this is late, but I just found this post because I needed the JS code. If you place a rectangle with any color fill (no fill won't work), opacity at 100% (so you can't see it) and no outline over the spot where the download option is, the user won't be able to access that hover part of the menu. It took a few tries to get it the right size and in the right spot (since preview doesn't enable JS), but once you get it, it works like a charm.

Thank you Lori, that's very helpful. 

BTW, I have a background video that plays as a graphic effect on other slides and I don't want controls showing (they aren't necessary). What code would I trigger on the page AFTER the main video slide, to stop the controls from appearing?

Many thanks!

Brett

ps. in my Javascript naivety, I tried setting "controls","true" to "false" but nothing happened...

I've been trawling the net and asking my java-skilled colleagues for a piece of code that will turn the player off, but can't find a solution. Can anyone (@Mateusz?) offer some assistance? All attempts I've tried have failed.

Your help is MOST APPRECIATED!

Hello Brett,

Didn't see your first post, sorry :)

First of all, controls is boolean attribute, which means if it is present, then controls will show (true or false doesn't matter, it is in my javascript snippet so it has proper syntax).

As for your question, it is of course achieveable, but without seeing the story file it's going around in the mist. Can you send me story file with the main video and two-three video-background slides?

If your main video is the only video in the course that needs controls in the whole course, and it is first video in your course, you can use this instead of my original code:

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

The [0] means grab only first video object javascript found and controls to it. If you change it to [1] it will grab only second etc.

Thank you so much for responding, Mateusz.

I tried your code snippet in one of my projects where I have the main video slide (that needs the playbar) and is followed by the Quiz introduction slide that has a background video for graphic effect (that I don't want a playbar) and the playbar didn't even appear for the first video. The trigger was on that slide.

I even created a brand new project with 2 slides and slapped a video on each slide, then pasted the code into a JavaScript trigger but the playbar still didn't appear when I published it to web.

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

Thx, Brett