Explore the community Forums Lectora Lectora Questions & Answers Video Controls to lock user out

Viewing 15 posts - 1 through 15 (of 19 total)
  • Author
    Posts
  • #395286 Score: 0
    Profile photo of Robert Watkins
    Robert Watkins
    Member
    beginner
    intermediate
    picture perfect
    friend finder
    curious george
    wise owl
    contributor
    @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?

    #395353 Score: 2
    Profile photo of Jason Dalrymple
    Jason Dalrymple
    Member
    beginner
    intermediate
    profile
    wise owl
    curious george
    contributor
    friend finder
    advanced
    picture perfect
    44 pts
    @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.

    This post has received 2 votes up.
    #395356 Score: 0
    Profile photo of Robert Watkins
    Robert Watkins
    Member
    beginner
    intermediate
    picture perfect
    friend finder
    curious george
    wise owl
    contributor
    @rwatkins9162

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

    THANKS!

    -Robert

    #395374 Score: 0
    Profile photo of Robert Watkins
    Robert Watkins
    Member
    beginner
    intermediate
    picture perfect
    friend finder
    curious george
    wise owl
    contributor
    @rwatkins9162

    Totally worked. You get today’s gold star.

    #404421 Score: 0
    Profile photo of Marcel Milo
    Marcel Milo
    Member
    beginner
    intermediate
    curious george
    friend finder
    picture perfect
    wise owl
    contributor
    advanced
    @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

     

    #404426 Score: 1
    Profile photo of Tim K
    Tim K
    Member
    contributor
    beginner
    intermediate
    advanced
    friend finder
    junior moderator
    advocate
    wise owl
    curious george
    Group Member
    302 pts
    @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.

     

    This post has received 1 vote up.
    #404428 Score: 0
    Profile photo of Math Notermans
    Math Notermans
    Member
    contributor
    intermediate
    advanced
    friend finder
    junior moderator
    advocate
    LUC16 Attendee
    LUC16
    wise owl
    curious george
    117 pts
    @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

    #405413 Score: 0
    Profile photo of Marcel Milo
    Marcel Milo
    Member
    beginner
    intermediate
    curious george
    friend finder
    picture perfect
    wise owl
    contributor
    advanced
    @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

    #405875 Score: 0
    Profile photo of Marcel Milo
    Marcel Milo
    Member
    beginner
    intermediate
    curious george
    friend finder
    picture perfect
    wise owl
    contributor
    advanced
    @mmilo9281

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

    greetings Marcel

    #405888 Score: 0
    Profile photo of Tim K
    Tim K
    Member
    contributor
    beginner
    intermediate
    advanced
    friend finder
    junior moderator
    advocate
    wise owl
    curious george
    Group Member
    302 pts
    @timk

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

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

    Tim

    #405911 Score: 0
    Profile photo of Marcel Milo
    Marcel Milo
    Member
    beginner
    intermediate
    curious george
    friend finder
    picture perfect
    wise owl
    contributor
    advanced
    @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;
    }

     

    #405953 Score: 0
    Profile photo of Tim K
    Tim K
    Member
    contributor
    beginner
    intermediate
    advanced
    friend finder
    junior moderator
    advocate
    wise owl
    curious george
    Group Member
    302 pts
    @timk

    I mean the Anführungszeichen around video

    #405957 Score: 0
    Profile photo of CarlFink
    CarlFink
    Member
    beginner
    intermediate
    contributor
    LUC16 Attendee
    wise owl
    curious george
    advanced
    20 pts
    @CarlFink

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

    #405960 Score: 0
    Profile photo of Math Notermans
    Math Notermans
    Member
    contributor
    intermediate
    advanced
    friend finder
    junior moderator
    advocate
    LUC16 Attendee
    LUC16
    wise owl
    curious george
    117 pts
    @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.

    #406116 Score: 0
    Profile photo of Marcel Milo
    Marcel Milo
    Member
    beginner
    intermediate
    curious george
    friend finder
    picture perfect
    wise owl
    contributor
    advanced
    @mmilo9281

    Hey guyes, thx, now i got it 🙂

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

Viewing 15 posts - 1 through 15 (of 19 total)

You must be logged in to reply to this topic.