While I can run the plain Mozilla example for putting a HTML5 video
element into fullscreen based on key press, reveal.js must be doing something different or asynchronous regarding keypresses. When I try to do this using Reveal.configure({ keyboard: { 116: putVideoInFullScreen }})
, Firefox (78) just complains:
Request for fullscreen was denied because Element.requestFullscreen() was not called from inside a short running user-generated event handler.
Similarly, in Chromium:
Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture.
Frankly, I don't understand why pressing a key is not a user gesture. I looked into the reveal.js source code, and it all seems to go straight through a registered keypress event handler.
A work-around using directly registered handler, like document.addEventListener("keypress", handleKeyPress, false)
does not work either, because reveal.js "blocks" the events that were registered before, so even if I have Reveal.configure({ keyboard: { 116: null }})
, the event handler doesn't receive the F5 press. Catch-22.
Can I force FF to allow me to put fullscreen in any case? How can I make this work?
Note that my FF screen is already in full-screen. What I want to do is toggle full screen for a video
element, like
var sl = Reveal.getCurrentSlide();
var e = sl.getElementsByTagName("video")[0];
if (typeof e !== 'undefined') {
if (e.paused) {
e.play();
e.requestFullscreen(); // !!!
} else {
e.pause();
document.exitFullscreen();
};