BigScreen — Javascript library for HTML5 Fullscreen API | Hacker News Reader

BigScreen — Javascript library for HTML5 Fullscreen API

brad.is

82 pointsjosephschmitt21 comments

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

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

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!

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.

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.

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.

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.

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.

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.

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

@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/sindresorhus/screenfull.js/blob/master/sr...

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%).

And some very high z-index value.

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;

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

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.

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.

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.

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

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

Wow, that's really weird. Do you know what software it is?

mine too. hmmmmmm.

Reply on news.ycombinator.com