4 ms·

BigScreen — Javascript library for HTML5 Fullscreen API

82 points by josephschmitt 14y ago

BigScreen is a simple library for using the JavaScript Full Screen API.

deleted 14y ago
[deleted]
deleted 14y ago
[deleted]
MatthewPhillips 14y ago
So... this appears to do little more than normalize prefixes. So why not just throw a normalization gist up? The first part is: HTMLElement.prototype.requestFullscreen = HTMLElement.prototype.requestFullscreen || HTMLElement.prototype.webkitRequestFullscreen || HTMLElement.prototype.webkitRequestFullScreen || HTMLElement.prototype.mozRequestFullScreen;
- bdougherty 14y ago
  It does way more normalizing than just the name of the function. It works around a number of bugs when the element is in an iframe, and it has a fallback if you're using it for video (which was the main reason I wrote it).
  - MatthewPhillips 14y ago
    Hi Brad, I don't mean to discourage your work. This just fills like mostly a polyfill. Bug fixes should be included in polyfills. Nothing wrong with that, that's a valuable thing. But I don't want to learn a new API unless it provides a new type of abstraction over the Fullscreen API and this one doesn't seem to do that.
  - tlrobinson 14y ago
    I suggest updating your "why should I use it" section then. I also saw a trivial polyfill and stopped reading. I also like the idea of an option to fall back to making the element fill the page if the browser doesn't support the fullscreen API. You could even breifly display the hotkey to put the browser window in fullscreen if it supports it.
eblume 14y ago
This website is blocked as 'pornography' at my workplace. So... that's interesting.
- wheelerwj 14y ago
  mine too. hmmmmmm.
- andrewmunsell 14y ago
  As far as I can tell that's a mistake. At least that page is perfectly clean, but now I don't necessarily want to go hunting around to see why it was classified like that ;)
- bdougherty 14y ago
  Wow, that's really weird. Do you know what software it is?
paulrouget 14y ago
A possible fallback when the browser doesn't support the fullscreen API is to go "full page" (position:fixed;top:0;left:0;width:100%;height:100%).
- garindra 14y ago
  And some very high z-index value.
bdougherty 14y ago
For everyone that is blocked, the GitHub page is https://github.com/bdougherty/BigScreen https://github.com/bdougherty/BigScreen
cpearce 14y ago
The best JS library for fullscreen that I've found is https://github.com/toji/game-shim https://github.com/toji/game-shim It's good because it shims the W3C specified fullscreen API; you only have to learn the specified API, you don't have to learn some other API.
- bdougherty 14y ago
  I actually really like that way of doing it, but I don't think it would work well for what I was trying to do with BigScreen, mainly for the video fallback behavior. When browsers do drop the prefixes, part of the functionality wouldn't exist anymore.
  - cpearce 14y ago
    Your video fallback behaviour seems superfluous. If you want fullscreen on a video, why don't you just request fullscreen on the video rather than its container? Having the fullscreen request shift to the descendent video also breaks the case where you actually have an element containing a video that you want to make fullscreen, for example if you have custom controls for your video element... This is simply impossible with your API.
    - bdougherty 14y ago
      If you have custom controls, putting that element in full screen will work if the browser you're in (and/or the iframe you're in) supports the newer fullscreen API. It only falls back in the case where that doesn't work (older browser, no allowfullscreen attribute on the iframe) and supports the older API that is just for video tags.
rdoherty 14y ago
I wrote a long blog post about a few months ago about the perils of using fullscreen in modern browsers: http://sorcery.smugmug.com/2012/06/06/using-html5s-fullscreen-api-for-fun-and-profit/ http://sorcery.smugmug.com/2012/06/06/using-html5s-fullscree..., which is cited as a reference (awesome!). This explains why some of the code looks similar, I'm glad it was helpful. This library could use error detection and handling as there are situations where fullscreen could be aborted or fail to start. It's much better to attempt going fullscreen and have callbacks for errors and successfully entering fullscreen mode. Users can have preferences set to not allow it, press ESC during the transition or a number of other scenarios can occur. There's also some CSS fixes between browsers that could be included. Safari and Chrome don't stretch the element to 100% monitor width and don't apply a background color by default so you can see 'through' the fullscreen window. That being said it's good someone is working towards something that's relatively cross-browser. The fullscreen API right now is extremely varied but a really awesome tool for advanced web apps.
- rdoherty 14y ago
  To clarify I mean a onerror callback would be nice to have if something goes wrong when attempting to go fullscreen. If I have some time I'll write a patch!
  - bdougherty 14y ago
    My bad! There is a BigScreen.onerror, but I missed it in the docs. It should cover most things, but I didn't fully test it. I also couldn't get any browser to fire the native event in my testing.
    - rdoherty 14y ago
      I think you can get it to fire if you trigger requestFullscreen outside of a user-initiated event? I'll have to check on that.
duckfruit 14y ago
Does anyone know of a way to fix the problem when getting out of a fullscreen page in Chrome for Mac? Normally, when trying to exit fullscreen page when the browser is already maximized, it gets thrown out of its workspace - a minor annoyance, but it's irksome enough that I try to avoid using HTML5 fullscreen in web pages.
mofle 14y ago
@bdougherty Would be nice with some credit, seeing as you obviously based it on my lib: https://github.com/bdougherty/BigScreen/blob/master/bigscreen.js https://github.com/bdougherty/BigScreen/blob/master/bigscree... https://github.com/sindresorhus/screenfull.js/blob/master/src/screenfull.js https://github.com/sindresorhus/screenfull.js/blob/master/sr...

82 points by josephschmitt 14y ago

BigScreen is a simple library for using the JavaScript Full Screen API.

deleted 14y ago

[deleted]

deleted 14y ago

[deleted]

MatthewPhillips 14y ago

So... this appears to do little more than normalize prefixes. So why not just throw a normalization gist up? The first part is: HTMLElement.prototype.requestFullscreen = HTMLElement.prototype.requestFullscreen || HTMLElement.prototype.webkitRequestFullscreen || HTMLElement.prototype.webkitRequestFullScreen || HTMLElement.prototype.mozRequestFullScreen;

bdougherty 14y ago
It does way more normalizing than just the name of the function. It works around a number of bugs when the element is in an iframe, and it has a fallback if you're using it for video (which was the main reason I wrote it).
- MatthewPhillips 14y ago
  Hi Brad, I don't mean to discourage your work. This just fills like mostly a polyfill. Bug fixes should be included in polyfills. Nothing wrong with that, that's a valuable thing. But I don't want to learn a new API unless it provides a new type of abstraction over the Fullscreen API and this one doesn't seem to do that.
- tlrobinson 14y ago
  I suggest updating your "why should I use it" section then. I also saw a trivial polyfill and stopped reading. I also like the idea of an option to fall back to making the element fill the page if the browser doesn't support the fullscreen API. You could even breifly display the hotkey to put the browser window in fullscreen if it supports it.

eblume 14y ago

This website is blocked as 'pornography' at my workplace. So... that's interesting.

wheelerwj 14y ago
mine too. hmmmmmm.
andrewmunsell 14y ago
As far as I can tell that's a mistake. At least that page is perfectly clean, but now I don't necessarily want to go hunting around to see why it was classified like that ;)
bdougherty 14y ago
Wow, that's really weird. Do you know what software it is?

paulrouget 14y ago

A possible fallback when the browser doesn't support the fullscreen API is to go "full page" (position:fixed;top:0;left:0;width:100%;height:100%).

garindra 14y ago
And some very high z-index value.

bdougherty 14y ago

For everyone that is blocked, the GitHub page is https://github.com/bdougherty/BigScreen https://github.com/bdougherty/BigScreen

cpearce 14y ago

The best JS library for fullscreen that I've found is https://github.com/toji/game-shim https://github.com/toji/game-shim It's good because it shims the W3C specified fullscreen API; you only have to learn the specified API, you don't have to learn some other API.

bdougherty 14y ago
I actually really like that way of doing it, but I don't think it would work well for what I was trying to do with BigScreen, mainly for the video fallback behavior. When browsers do drop the prefixes, part of the functionality wouldn't exist anymore.
- cpearce 14y ago
  Your video fallback behaviour seems superfluous. If you want fullscreen on a video, why don't you just request fullscreen on the video rather than its container? Having the fullscreen request shift to the descendent video also breaks the case where you actually have an element containing a video that you want to make fullscreen, for example if you have custom controls for your video element... This is simply impossible with your API.
  - bdougherty 14y ago
    If you have custom controls, putting that element in full screen will work if the browser you're in (and/or the iframe you're in) supports the newer fullscreen API. It only falls back in the case where that doesn't work (older browser, no allowfullscreen attribute on the iframe) and supports the older API that is just for video tags.

rdoherty 14y ago

I wrote a long blog post about a few months ago about the perils of using fullscreen in modern browsers: http://sorcery.smugmug.com/2012/06/06/using-html5s-fullscreen-api-for-fun-and-profit/ http://sorcery.smugmug.com/2012/06/06/using-html5s-fullscree..., which is cited as a reference (awesome!). This explains why some of the code looks similar, I'm glad it was helpful. This library could use error detection and handling as there are situations where fullscreen could be aborted or fail to start. It's much better to attempt going fullscreen and have callbacks for errors and successfully entering fullscreen mode. Users can have preferences set to not allow it, press ESC during the transition or a number of other scenarios can occur. There's also some CSS fixes between browsers that could be included. Safari and Chrome don't stretch the element to 100% monitor width and don't apply a background color by default so you can see 'through' the fullscreen window. That being said it's good someone is working towards something that's relatively cross-browser. The fullscreen API right now is extremely varied but a really awesome tool for advanced web apps.

rdoherty 14y ago
To clarify I mean a onerror callback would be nice to have if something goes wrong when attempting to go fullscreen. If I have some time I'll write a patch!
- bdougherty 14y ago
  My bad! There is a BigScreen.onerror, but I missed it in the docs. It should cover most things, but I didn't fully test it. I also couldn't get any browser to fire the native event in my testing.
  - rdoherty 14y ago
    I think you can get it to fire if you trigger requestFullscreen outside of a user-initiated event? I'll have to check on that.

duckfruit 14y ago

Does anyone know of a way to fix the problem when getting out of a fullscreen page in Chrome for Mac? Normally, when trying to exit fullscreen page when the browser is already maximized, it gets thrown out of its workspace - a minor annoyance, but it's irksome enough that I try to avoid using HTML5 fullscreen in web pages.

mofle 14y ago

@bdougherty Would be nice with some credit, seeing as you obviously based it on my lib: https://github.com/bdougherty/BigScreen/blob/master/bigscreen.js https://github.com/bdougherty/BigScreen/blob/master/bigscree... https://github.com/sindresorhus/screenfull.js/blob/master/src/screenfull.js https://github.com/sindresorhus/screenfull.js/blob/master/sr...