Explore the community Forums Lectora Lectora Questions & Answers Clickable media element?

Tagged: , ,

Viewing 15 posts - 1 through 15 (of 26 total)
  • Author
    Posts
  • #361658 Score: 0
    Profile photo of Jason Dalrymple
    Jason Dalrymple
    Member
    beginner
    intermediate
    profile
    wise owl
    curious george
    contributor
    friend finder
    advanced
    picture perfect
    54 pts
    @JasonADal

    I’ve been using CSS to make adjustments to the appearance and some of the behaviors of the default audio player and came across 1 piece I can’t sort out.

    I have the play/pause/stop buttons all set to “display: none”, however, it is still clickable. Even a transparent button over the area of the play button doesn’t prevent it from being clickable.

    Interestingly enough, I have the settings on the CC button from the player set the same way (with “display: none”) and it doesn’t even show up on the player…

    #362063 Score: 0
    Profile photo of Bill Miller
    Bill Miller
    Member
    beginner
    intermediate
    advanced
    LUC17 Attendee
    wise owl
    curious george
    contributor
    picture perfect
    1 pt
    @bmiller2465

    #Interesting

    When you say “it is still clickable” are you referring to the buttons, or the video itself?

    I could be mistaken, but I believe that even with the controllers turned off (set to None in Lectora) you can still toggle the play of the video by clicking it.  Perhaps the pause/play buttons are hidden, but the toggle play is firing off of the video itself.?

    Another possibility is that you’re selecting the wrong element with your CSS.  Lectora tends to bury elements into many layers of nested HTML tags.  For example, to use CSS to style an individual text field (perhaps the student made an entry error and you want to turn it lightpink) you can’t select it by the field’s HTML Name as assigned by Lectora.  On publish, the HTML Name refers to the <div> surrounding the <input> field, rather than the field itself; the field’s <input> tag has a different id assigned to it.  Sometimes you can select it by class instead, but that doesn’t always work.  Perhaps, your display:none property is specifically selecting the image of the play button, but the <div> or tag above it is still displayed, so it’s still clickable.

    #362079 Score: 0
    Profile photo of Jason Dalrymple
    Jason Dalrymple
    Member
    beginner
    intermediate
    profile
    wise owl
    curious george
    contributor
    friend finder
    advanced
    picture perfect
    54 pts
    @JasonADal

    I was thinking about it more and wondering something similar, ie. missing the class in the player.css that would completely wipe out the play button. I’m only targeting the button, but there may be another class in the CSS that would get rid of it. The interesting piece is that if you click where the CC button would be, there’s nothing there. I thought I had removed it completely at one point so there wasn’t even the space there…

    I’ve attached my sandbox course where I’m toying around with a bunch of different things – the page to look at is the Current Audio Player page.

    Attachments:
    1. Sandbox.zip
    #362106 Score: 0
    Profile photo of Darrel Somoza
    Darrel Somoza
    Member
    contributor
    friend finder
    beginner
    intermediate
    junior moderator
    advanced
    wise owl
    curious george
    profile
    209 pts
    @Klaatu

    Put this in an external CSS and add it via HTML Extension – cascading style sheet.

    .mejs-container .mejs-controls div {
    pointer-events: none;
    }

     

    #362108 Score: 1
    Profile photo of Darrel Somoza
    Darrel Somoza
    Member
    contributor
    friend finder
    beginner
    intermediate
    junior moderator
    advanced
    wise owl
    curious george
    profile
    209 pts
    @Klaatu

    Whoops, in my haste I forgot the attachment.

    This post has received 1 vote up.
    Attachments:
    1. Sandbox2.zip
    #362151 Score: 0
    Profile photo of Jason Dalrymple
    Jason Dalrymple
    Member
    beginner
    intermediate
    profile
    wise owl
    curious george
    contributor
    friend finder
    advanced
    picture perfect
    54 pts
    @JasonADal

    There it is! I’ll add it to my audio skin mod CSS – At some point, I’m going to teach myself to build my own custom skin. Thanks again!

    #363108 Score: 0
    Profile photo of Jennifer Valley
    Jennifer Valley
    Member
    contributor
    beginner
    friend finder
    advanced
    lectora beginner
    verified member
    wise owl
    profile
    picture perfect
    curious george
    117 pts
    @jvalley4735

    Here’s an article that might help when you’re ready 🙂 https://www.trivantis.com/blog/skinning-lectoras-new-html5-based-media-player/

    #363594 Score: 0
    Profile photo of Jason Dalrymple
    Jason Dalrymple
    Member
    beginner
    intermediate
    profile
    wise owl
    curious george
    contributor
    friend finder
    advanced
    picture perfect
    54 pts
    @JasonADal

    @klaatu – It’s very close. The only issue with this is that it disables all of the buttons on the player, including the volume button and time rail. I did try putting the pointer-events on the buttons themselves with no luck. Out of curiosity, does order matter in style sheets? My hunch is no, so I hadn’t tried adding it above the display: none for each button.

    I still find it interesting that the same attribute for the Closed captions button completely removes it from visibility, clickability and the tab order.

    @jvalley4735 – Thanks for the article! I’ll have to test it out and see what I come up with. Part of what I think I was missing was creating the sprite sheet with my custom icons. Having the CSS file there will definitely help out! One thing I noticed is that you can sort of use a custom skin even with Web Accessibility turned on – If you turn it off and choose one of the other skins, it retains the skin you choose with web accessibility turned off.

    • This reply was modified 3 years, 3 months ago by Profile photo of Jason Dalrymple Jason Dalrymple. Reason: added a response to Jennifer
    #363644 Score: 0
    Profile photo of Darrel Somoza
    Darrel Somoza
    Member
    contributor
    friend finder
    beginner
    intermediate
    junior moderator
    advanced
    wise owl
    curious george
    profile
    209 pts
    @Klaatu

    Yes, order is very important in cascading style sheets.

    #363717 Score: 0
    Profile photo of Jason Dalrymple
    Jason Dalrymple
    Member
    beginner
    intermediate
    profile
    wise owl
    curious george
    contributor
    friend finder
    advanced
    picture perfect
    54 pts
    @JasonADal

    @klatuu – I wouldn’t have necessarily thought that. In any case, I tinkered with the positioning in my existing CSS to no avail and removing the display: none and adding the pointer-events only didn’t do the trick on the individual pieces (ie. .mejs-play button, etc).

    @jvalley4735 – I’ve been working through that link and the information in the Help, but am missing something significant somewhere. The closest I’ve gotten is to get the buttons I want to show up. However, it still shows the default skin behind it without my background. I’m a bit stumped, so need to do more reading and research down the line.

    #363791 Score: 0
    Profile photo of Jennifer Valley
    Jennifer Valley
    Member
    contributor
    beginner
    friend finder
    advanced
    lectora beginner
    verified member
    wise owl
    profile
    picture perfect
    curious george
    117 pts
    @jvalley4735

    Hmmm….I wonder if the background image is too large?  You can always submit a Support ticket to have them review your files and advise on what’s missing as well.

    #363799 Score: 0
    Profile photo of Jason Dalrymple
    Jason Dalrymple
    Member
    beginner
    intermediate
    profile
    wise owl
    curious george
    contributor
    friend finder
    advanced
    picture perfect
    54 pts
    @JasonADal

    @jvalley4735 – I think in tinkering with my other custom CSS, I think I may have figured a starting point. My custom file adjusts the length of the .mejs-container .mejs-controls, but change the “mejs-container” to “.bluetea” so it expands the background from the skin (using bluetea for experimentation. The bluetea background in the sprite is only 30px height, and I’m trying to get 47px. When I change the value in that class, it only changes the height of the “default” player, not the height of the background…

    Added note: My custom CSS hides the play and CC button, hence the gaps there.

    #363972 Score: 1
    Profile photo of Wendy Miller
    Wendy Miller
    Member
    beginner
    intermediate
    contributor
    advanced
    friend finder
    junior moderator
    wise owl
    profile
    verified member
    55 pts
    @wendymiller

    Hi Jason,

    I’d like to have a look at your AWT if possible. If it’s a large title and you can’t share it all, could you at least share an AWT with the one page containing the player you’re trying to modify? (File > Export > Zip will get the AWT plus all resources.) I’m the person who built the bluetea skin, so I might be able to help.

    My guess about the height issue is that you’re changing the height of the background div, but since the images are provided via a sprite sheet, that’s not going to change the height of the actual images. I still have the vector version of the bluetea sprite sheet. So, if necessary, I can make a larger version of the sprite sheet for you where everything has a height of 47px instead of 30px or just share the editable vector file with you if you want to make any other modifications yourself. It’s an Adobe Illustrator file, but I could save it as an .eps as well.

    This post has received 1 vote up.
    #363976 Score: 0
    Profile photo of Wendy Miller
    Wendy Miller
    Member
    beginner
    intermediate
    contributor
    advanced
    friend finder
    junior moderator
    wise owl
    profile
    verified member
    55 pts
    @wendymiller

    I just realized that I already shared the Photoshop file along with the skin files in that post here:  https://community.trivantis.com/shared-content/custom-html5-media-player-skins/   The link to it is beneath the preview image.

    If you use Adobe Photoshop and Illustrator, the skin layers are already saved as vector Smart Objects. But if you don’t use either of those programs, I can still make a larger version for you if that’s what’s needed here. I still want to see your AWT and CSS skin changes to be sure.

     

    #364168 Score: 0
    Profile photo of Jason Dalrymple
    Jason Dalrymple
    Member
    beginner
    intermediate
    profile
    wise owl
    curious george
    contributor
    friend finder
    advanced
    picture perfect
    54 pts
    @JasonADal

    @wendymiller – I’ve actually managed to make a ton of progress and discovery along the way thanks to the inspiration about the background size.

    I’ve been using CSS Sprite Generator linked from the instructional and have gotten to the point where all my buttons are the correct ones and in the location where I want them (with 2 exceptions).

    I’m attaching my current progress and would welcome suggestions! I need to get the mute button to the left more, as it’s bleeding off the controller (even if I increase the width of the controls). I also noticed that I couldn’t get changes to the mejs-time, time-rail or subsequent spans to take if I used the custom class for the player.

    I’m also hoping to add a replay or restart button that goes next to the play button – but for now, getting this up and running is huge.

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

You must be logged in to reply to this topic.