Explore the community Forums Lectora Lectora Questions & Answers iOS: fullscreen video ignores JavaScript in player?

Tagged: , ,

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #442961 Score: 0
    Profile photo of CarlFink
    CarlFink
    Member
    beginner
    intermediate
    contributor
    LUC16 Attendee
    wise owl
    curious george
    advanced
    32 pts
    @CarlFink

    Old forumites may remember this thread: https://community.trivantis.com/forums/topic/full-screen-video-via-javascript

    Basically, I needed to hide the progress bar so a student couldn’t scrape the video the end, and actually had to play the entire thing. The end of video triggers an action that unhides the Next button, allowing the student to complete the course and receive credit.

    It worked for quite a while. Now, however, in iOS (Chrome or Safari), the video displays and plays with the progress bar hidden, unless you go full screen. In full screen mode, the progress bar appears, despite the JavaScript not including the “progress” keyword.

    Anyone know of a way to actually suppress the progress bar? Otherwise I have to suppress the fullscreen button entirely.

    Lectora 17.0.6, still. I am trying to persuade my IT department to let me install the current version, which is all paid for.

     

    Thanks.

    • This topic was modified 1 month, 1 week ago by Profile photo of CarlFink CarlFink .
    #442964 Score: 0
    Profile photo of CarlFink
    CarlFink
    Member
    beginner
    intermediate
    contributor
    LUC16 Attendee
    wise owl
    curious george
    advanced
    32 pts
    @CarlFink

    Wow, this is weird.

    Hiding Native HTML5 Video Controls in Full-Screen Mode

    When the controls are set to false, the DOM actually is modified to move them under the video so they aren’t visible, but are present? Wow.

    Fullscreen seemingly changes the z-order. For some reason.

    The article includes CSS to lower the video controls down below the video again. I’ve never actually applied CSS to an element in Lectora, but I seem to recall it’s possible. Her code would hide all the controls, but that might be OK. Once fullscreened the user couldn’t get back, I think, because the button would be gone, but that’s fine if what I want is to play the whole thing without interaction. I could add more CSS to trigger a pause action or something, I believe. I have to play with this.

    Wow, that’s weird.

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

    OK, I need some advice. According to the article linked above, this CSS should hide all the native controls in the video player:

    video::-webkit-media-controls {
    display:none !important;
    }

    However, if I add that to the Title as an HTML Extension, type Cascading Style Sheet, the video page actually is completely hidden. The entire page is white. Hiding the video controls should not hide everything on the page. Odd. Suggestions?

    Edit: if I edit the trivantisplayer.css file to include the line:

    .mejs__container video::-webkit-media-controls-timeline,

    That also gives me a white page instead of the usual video page.

    Edit 2: Trivantis, fix your forum. If I use the quote style for my code, it introduces a meaningless and confusing

    <pre lang=”

    Which renders the thing nonsensical.

    • This reply was modified 1 month, 1 week ago by Profile photo of CarlFink CarlFink .
    • This reply was modified 1 month, 1 week ago by Profile photo of Joe Wieloch Joe Wieloch.
    • This reply was modified 1 month, 1 week ago by Profile photo of Joe Wieloch Joe Wieloch.
    #443046 Score: 0
    Profile photo of Joe Wieloch
    Joe Wieloch
    Moderator
    beginner
    intermediate
    friend finder
    contributor
    LUC16 Attendee
    verified member
    wise owl
    LUC17 Attendee
    advanced
    picture perfect
    59 pts
    @wheels

    @carlfink try using the button that says code that seems to work okay.

    The webkit media controls pseudo element doesn’t seem to hide the controls for full screen video on iPhone. It doesn’t for me anyway. I’ve added two other styles to help, one hides the time rail (seek scrubber) and another hides the display fullscreen button.

    Insert an HTML Extension object at the title level of type Cascading Style Sheet and add the following:

    video::-webkit-media-controls {
      display:none !important;
    }
    .mejs-time-rail { display : none!important }
    
    .mejs-fullscreen-button { display : none!important }

    ** Sorry I just went back and re-read your entire post, sorry I’m really not adding anything new here. Sounds like you had already though about, and do not want to, hide the full screen button. All our test iOS devices are at the office. I’ll write this up in an enhancement we have coming to better control the video player.

    • This reply was modified 1 month, 1 week ago by Profile photo of Joe Wieloch Joe Wieloch.
    #443053 Score: 0
    Profile photo of CarlFink
    CarlFink
    Member
    beginner
    intermediate
    contributor
    LUC16 Attendee
    wise owl
    curious george
    advanced
    32 pts
    @CarlFink

    Joe:

    First, thanks for the response.

    1. There is no button labeled “code” in this window. I could go into the “Text” mode (which really means “type in HTML tags yourself” and that’s a very poor description, and yes, I know you inherited it from WordPress) and use my own tags, but really? Or did you mean to use the Preformatted text style?
    2. Extensions of type Cascading Style Sheet, at least in the current Lectora in my installation, do not let me enter anything, only select a file. I created a file named no_video_controls.css and selected that, containing your code. It had absolutely no effect when I published as HTML, so I published to ReviewLink, where it also had exactly no effect whatsoever. Testing in Google Chrome, a version a couple of months old, and Internet Explorer 11.

    I realized that I could just switch to “Controller: None” and remove all native controls, even in full screen on iPadOS. That will be my short term solution while I fight with this. (If you had a “full screen” action in Lectora, I would be fine. Volume control can be handled at the OS level.)

    Maybe I’ll try creating my own controller skin. There’s an option to import custom skins as Zip files. Are these documented anywhere?

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.