

BigScreen — Javascript library for HTML5 Fullscreen API - josephschmitt
http://brad.is/coding/BigScreen/
BigScreen is a simple library for using the JavaScript Full Screen API.
======
rdoherty
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-fullscree...](http://sorcery.smugmug.com/2012/06/06/using-
html5s-fullscreen-api-for-fun-and-profit/), 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
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
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
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.

------
cpearce
The best JS library for fullscreen that I've found is
<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
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
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
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.

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

------
mofle
@bdougherty Would be nice with some credit, seeing as you obviously based it
on my lib:

[https://github.com/bdougherty/BigScreen/blob/master/bigscree...](https://github.com/bdougherty/BigScreen/blob/master/bigscreen.js)
[https://github.com/sindresorhus/screenfull.js/blob/master/sr...](https://github.com/sindresorhus/screenfull.js/blob/master/src/screenfull.js)

------
paulrouget
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
And some very high z-index value.

------
MatthewPhillips
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
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
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.

------
duckfruit
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.

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

~~~
andrewmunsell
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 ;)

