Video Controls to lock user out

rwatkins9162

Hello,

Total newbie working on his first project for a new job, so forgive me.

I was curious if anyone knew a way to lock a user out of being able to interact with videos. As I have them now, the control bar is hidden and the cue to fire the video is in the audio track, but a user can still click on the video itself to pause and start it. I want users to have no control over the video, it's something for them to look at, but no touchy the video. I don't see a properties setting for it and the pause/start issue is in all three of the test environments (html/run/preview).

Thanks in advance.

Is there a way to lock them out?

jasonadal

I've done this with my own courses and there's no built-in way to remove the functionality of the click on the video itself. However, you can use a transparent shape to cover the video, which will prevent the user from clicking to pause or play it.

I've also created a CSS file that removes the visibility of the default play button that's on videos.

Using notepad, create a new text document and add the following:

div[id^="video"] .mejs-overlay {
visibility: hidden;
}

Save the file, then change the extension from .txt to .css

In Lectora, go to the Insert ribbon and choose HTML Extension. To the far left, choose Custom Style Sheet as the type. Use the file to browse to the file and select the CSS file you just created.

This will hide the default play image AND with the shape, "disable" clicking on the video.

rwatkins9162

You da man! Ill give this a shot and see what happens.

THANKS!

-Robert

rwatkins9162

Totally worked. You get today's gold star.

mmilo9281

hi, this is a really great solution, i had the same problem with the PLAY button.

in lectora online 4.2 there is no type "Custom Style Sheet" you choose.

is it important where i place the file?

 

greetings Marcel

 

timk

CSS = Cascading Style Sheet, so this would be the way to go. It should make no difference where you put it in the title explorer.

In case you don't want to mess with CSS you can just put a transparent shape over the video.

 

mnotermans5114

If you use the CSS option to add your CSS-file to Lectora Online, then thats exactly what happens. An extra CSS file gets attached to style elements. Disadvantage of this is you need to edit that external file eg. 'myStyles.css' in some external editor...SublimeText, Notepad++ or whatever. And when changed you have to re-upload it to Lectora Online and can use it. For CSS , especially when you not 100% sure you got all in it thats needed, it can be easier in your workflow to add it as 'MetaTags'. Then in the edit-window in Lectora Online you can quickly change and edit your CSS. In the edit-window you have to ensure these tags surround your code:
<style type="text/css">
here you can put your CSS
</style>

This way ( for Lectora Online ) you can easier and quicker change your CSS. If its final, you can opt for the CSS-option and attach the file.

Regards,
Math

mmilo9281

Hi Tim and Math,

thx again for your helping, its weekend and i hope i have now time to try it.

i will give you feedback :-)

greetings Marcel

mmilo9281

hey guys, i made a test project, but there is the Play button to see.

greetings Marcel

timk

You need to replace the quotes in your CSS from nice-looking to real:

div[id^="video"] .mejs-overlay {
visibility: hidden;
}

Tim

mmilo9281

Hi Tim, what do you mean exactly? i replaced the "video" with the title of the video in my project

 

div[id^=”intro_Hello”] .mejs-overlay {
visibility: hidden;
}

 

timk

I mean the Anführungszeichen around video

carlfink

English: I believe Tim is saying not to use "smart" quotes, since JavaScript only recognizes regular "straight" quotation marks.

mnotermans5114

When copying and pasting from the Internet, this forum or wherever... always replace " ( = quotation marks ), because they get formatted to non-functioning characters. Also do check for additional spaces that might get added when copying and pasting. Some fori and sites tend to have those too if you copy/paste.

mmilo9281

Hey guyes, thx, now i got it :-)

THX for your fast answers, i like this forum very much!

mmilo9281

oh no...its still there....

can you give again a look to my title please

mmilo9281

has anybody an idea, whats wrong in my Test_Video Project?

greetings Marcel

timk

The solution is indeed to replace the quotes. A sample is in this thread:

https://community.trivantis.com/forums/topic/how-to-set-conditions-in-a-course/

mmilo9281

thx Tim :-)