Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

BigScreen — Javascript library for HTML5 Fullscreen API

brad.is

Post reply on HN
Print view View original

11–20 of 24 posts

Re: BigScreen — Javascript library for HTML5 Fullscreen API

#11

Post by bdougherty »

MatthewPhillips wrote: post #4

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

Re: BigScreen — Javascript library for HTML5 Fullscreen API

#12

Post by MatthewPhillips »

bdougherty wrote: post #11
MatthewPhillips wrote: post #4

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.

Re: BigScreen — Javascript library for HTML5 Fullscreen API

#13

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

Re: BigScreen — Javascript library for HTML5 Fullscreen API

#14

Post by rdoherty »

rdoherty wrote: post #13

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…

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!

Re: BigScreen — Javascript library for HTML5 Fullscreen API

#16

Post by bdougherty »

rdoherty wrote: post #14
rdoherty wrote: post #13

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…

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.

Re: BigScreen — Javascript library for HTML5 Fullscreen API

#17

Post by bdougherty »

cpearce wrote: post #15

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.

Re: BigScreen — Javascript library for HTML5 Fullscreen API

#18

Post by rdoherty »

bdougherty wrote: post #16
rdoherty wrote: post #14

Earlier quoted context omitted.

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.

Re: BigScreen — Javascript library for HTML5 Fullscreen API

#19

Post by cpearce »

bdougherty wrote: post #17
cpearce wrote: post #15

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.

Re: BigScreen — Javascript library for HTML5 Fullscreen API

#20

Post by bdougherty »

cpearce wrote: post #19
bdougherty wrote: post #17

Earlier quoted context omitted.

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 impossib…

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.

Post reply on HN