Is animating in video fullscreen mode possible?


(Greg) #1

I want to make a short video quiz with Hype. So I imported my video and created a simple animation which displays the quiz question at a given time. This is all good and working but when I switch the video to a fullscreen mode the animation is gone. Is it possible to animate different elements on the timeline while the video is playing in fullscreen mode?

Thanks for your help.
Greg


(Hans-Gerd Claßen) #2

no, fullscreen is ontop …


(Jonathan Deutsch) #3

I think the trick would be to not take the video fullscreen, but instead take an container of the video fullscreen that would include other elements. There’s a browser API requestFullscreen(); that can make any element take over the screen. There’s a lot around the web that can touch on its uses and compatibility; also sample code in this post:


(Greg) #4

I could’t get this code to work. It’s a bit too advanced for me and I don’t really know where to put it. Also what is an event listener and where do I put it? Also, could it be used to put an entire Hype scene into fullscreen mode?


(Jonathan Deutsch) #5

For simplicity, you can probably just use the first block of code from @ilkka_kumpunen’s answer (the one marked as the solution). If you add an ‘On Mouse Click’ action to ‘Run JavaScript…’ and then paste that code in, it will make the click trigger fullscreen mode for the entire Hype document.

This is specifically for listening to a keypress to enter fullscreen mode and doesn’t sound like you need it at all.


(ilkka_kumpunen) #6

To edit head content, you need to click button in the middle here:

Event listener is small piece of code:

document.addEventListener("keydown", function(e) {
  if (e.keyCode == 13) {
    toggleFullScreen();
  }
}, false);

Put it here:

This code does the thing:

In mine version the trigger to function is this button:

Paste this code to its own javascript window:

	var elem = document.getElementById(hypeDocument.documentId('kokoruutu'));
	
	if (!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) {
		if (elem.requestFullscreen) {
			elem.requestFullscreen();
		} else if (elem.msRequestFullscreen) {
			elem.msRequestFullscreen();
		} else if (elem.mozRequestFullScreen) {
			elem.mozRequestFullScreen();
		} else if (elem.webkitRequestFullscreen) {
			elem.webkitRequestFullscreen();
		}
	} else {
		if (document.exitFullscreen) {
			document.exitFullscreen();
		} else if (document.msExitFullscreen) {
			document.msExitFullscreen();
		} else if (document.mozCancelFullScreen) {
			document.mozCancelFullScreen();
		} else if (document.webkitExitFullscreen) {
			document.webkitExitFullscreen();
		}
	}