1,295
edits
Gecko:FullScreenAPI: Difference between revisions
→Examples
| Line 109: | Line 109: | ||
1. Make a video element display fullscreen when clicked and leave fullscreen when it ends. | 1. Make a video element display fullscreen when clicked and leave fullscreen when it ends. | ||
<video src="pelican.webm" autoplay | |||
onclick="window.requestFullScreenDisableKeys(event.target)" | onclick="window.requestFullScreenDisableKeys(event.target)" | ||
onended="window.cancelFullScreen()" | onended="window.cancelFullScreen()"> | ||
</video> | |||
2. Make a canvas element display fullscreen in response to user input. Resize the canvas to the appropriate resolution while it's fullscreen. | 2. Make a canvas element display fullscreen in response to user input. Resize the canvas to the appropriate resolution while it's fullscreen. | ||
<script> | |||
function redrawCanvas(c) { ... } | function redrawCanvas(c) { ... } | ||
function resizeCanvas() { | function resizeCanvas() { | ||
| Line 125: | Line 125: | ||
redrawCanvas(c); | redrawCanvas(c); | ||
} | } | ||
</script> | |||
<canvas id="c" onfullscreenchange="resizeCanvas()"></canvas> | |||
<button onclick="window.requestFullScreen(document.getElementById('c'))"> | |||
Go Fullscreen! | Go Fullscreen! | ||
</button> | |||
3. Hide advertisements while the window is fullscreen. | 3. Hide advertisements while the window is fullscreen. | ||