iOS: fullscreen video ignores JavaScript in player?
April 22, 2020 12:00 AM
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.
undefined
Thanks.
Discussion (5)
Wow, this is weird.
https://css-tricks.com/custom-controls-in-html5-video-full-screen/
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.
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
Joe:
First, thanks for the response.
- 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?
- 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?
@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.
Coming back to this months later.
My previous hacked trivantis-media.js file does not work in Lectora 19. Oddly, Joe's CSS does work. Except it doesn't.
I have a file with two video files on two different pages. The CSS works on the first video but does not affect the second, at least in ReviewLink. Figure that one out. I dare you.
Note that "Controller: none" works in L19 ... except that the triangle-in-circle "Play" icon is displayed on top of the video, even though it has no effect.
Weird.
Discussions have been disabled for this post