Gecko:FullScreenAPI: Difference between revisions

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
  &lt;video src="pelican.webm" autoplay
         onclick="window.requestFullScreenDisableKeys(event.target)"
         onclick="window.requestFullScreenDisableKeys(event.target)"
         onended="window.cancelFullScreen()">
         onended="window.cancelFullScreen()"&gt;
  </video>
  &lt;/video&gt;


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>
  &lt;script&gt;
  function redrawCanvas(c) { ... }
  function redrawCanvas(c) { ... }
  function resizeCanvas() {
  function resizeCanvas() {
Line 125: Line 125:
   redrawCanvas(c);
   redrawCanvas(c);
  }
  }
  </script>
  &lt;/script&gt;
  <canvas id="c" onfullscreenchange="resizeCanvas()"></canvas>
  &lt;canvas id="c" onfullscreenchange="resizeCanvas()"&gt;&lt;/canvas&gt;
  <button onclick="window.requestFullScreen(document.getElementById('c'))">
  &lt;button onclick="window.requestFullScreen(document.getElementById('c'))"&gt;
   Go Fullscreen!
   Go Fullscreen!
  </button>
  &lt;/button&gt;


3. Hide advertisements while the window is fullscreen.
3. Hide advertisements while the window is fullscreen.
1,295

edits