More HTML5 APIs

http://davidwalsh.name/more-html5-apis

by davidwalshblog • 14 years ago

220 67 14 years ago

davidwalsh.name

Arceliapfa• 14 years ago

Nice! I like the link prefetchin

tonywok• 14 years ago

Yeah, definitely going to try that out my next mobile app. Great article.

true_religion2• 14 years ago

However, I think its only supported on Mozilla Firefox.

I used to support it on my media sites when Mozilla was topdog, but since the share is split between Chrome/IE I no longer do so.

quarterto3• 14 years ago

Google uses it if the first link is "very probable to be the desired hit". [0]

Minor nitpick: prefetching is not an API. Still cool, though.

[0] http://en.wikipedia.org/wiki/Link_prefetching

sergiotapia• 14 years ago

I really look forward to the media and prefetching API's. They seem really needed, and now that I've read about them, I wish I could use them in production.

eli6• 14 years ago

Well, you can rel="prefetch" it just won't do anything unless you're using Firefox (AFAIK).

riffraff• 14 years ago

you can also use "prerender"[0] which will work in chrome but has a slightly different behaviour

https://developers.google.com/chrome/whitepapers/prerender

emmelaich• 14 years ago

Is there a privacy vulnerability with prefetching? I can imagine timing it and making inferences about whether it's been cached and therefore previously visited.

scottfr2• 14 years ago

I opened up the developer console on Chrome and copied in his code to make the whole page full-screened. It doesn't seem to do anything and doesn't show an error message.

Is there an issue with the code? I know Chrome supports the full-screen API.

bmuon• 14 years ago

It needs user interaction to start. Have you tried using a button?

scottfr2• 14 years ago

Thanks, that must be it.

pyrotechnick• 14 years ago

http://html5please.com

pygy_3• 14 years ago

From an advertiser'a point of view, the visibility API is a boon. For users not so much.

I've recently noticed several sites that pause their video ads when the tab is hidden.

I don't look at adds. I have several ad jingles/slogans from my youth wired in my brain. They popon cue, and since I don't want to add new ones to my collection, I now actively avoid ads.

This means that I now have to look elsewhere while the video is playing, or hide the screen, and it annoys me to no end.

/rant.

To browser authors:

This feature has some use, but a huge potential for user abuse. It would be most helpful if it were possible disable the API, or to enable it selectively on a site by site basis.

TazeTSchnitzel• 14 years ago

You know that they might just be detecting onfocus/onblur instead, right? They aren't necessarily using the Page Visiblity API.

pygy_3• 14 years ago

Bad memory.

Now that you tell it I actually reverse engineered a page (script compiled with GWT, strings mangled, most of the script being one or two letter variables, often the same ones), to find out how they were doing it, and in that case, they were using document or window.onblur.

I tried to overwrite the event handlers without success.

eli6• 14 years ago

I think I'm missing something. Wouldn't the alternative be to keep playing the video ad even when you're not looking at it? Why is that better? I don't want my browser wasting cycles to render a video it knows I can't see.

At the risk of stating the obvious, it sounds like you have a problem with ads, not a problem with the visibility API.

pygy_3• 14 years ago

Meanwhile you can do useful/less annoying stuff in other tabs.

And I have a problem with ads that are forced on me, true, my case may be extreme, but I'm sure that it annoys other people too.

dbaupp2• 14 years ago

It's better because the user doesn't have to sit on that tab waiting for the ad to play out. How it currently is one can go check Facebook or HN (or even do some work!) while waiting for the ad to finish.

sophacles• 14 years ago

I like to open videos of talks an play them while I do other browsing and work. I still am listening just not watching. If the video stops when I move away, now I can't have my background sound be interesting info about $TOPIC.

JoshTriplett• 14 years ago

That sounds like an argument for better ad blocking, not an argument for less rich web APIs. Avoiding new web APIs because ads might use them seems like avoiding new OS APIs because malware might use them; better not to run the ads/malware in the first place.

otibom• 14 years ago

See, this is what I don't understand about HTML5. Wasn't executing untrusted code the purpose of operating systems ? Now we're having two layer of APIs like you said. Browser APIs and OS APIs. And we're seeing weird (or awesome) things like Emscripten, Native Client and Chrome OS.

Couldn't me do more with less here ?

ceejayoz• 14 years ago

> I've recently noticed several sites that pause their video ads when the tab is hidden.

That may actually be a Flash thing.

karpathy• 14 years ago

This is what I'm most afraid of. Ads are starting to quickly plague the internet. They've already screwed up TV and made it completely unwatchable and internet is next. YouTube is already extremely annoying to navigate.

I've recently gotten to the habit of having two browsing windows open. If in one of them I stumble across something that forces me to watch 30 seconds of ad (which happens increasingly often), I flip focus, continue browsing something else and come back to the other window later.

It's great to hear they can now start to ensure I watch the ads. What's next, API that checks if you have system sound muted or too low?

grdn• 14 years ago

For example spotify already forces you to listen ads, if you decrease sound during an ad they pause it.

crandles• 14 years ago

As a feature, I think it has a lot of merit. Advertisers will love it, as it actually improves on TV ads (which you can fast forward through easily).

If you're already using some kind of ad-block, there's nothing stopping you/your ad block from disabling the visibility API on select pages (youtube et. al). It's a Javascript API, and that means you'll be able to alter its functionality fairly easily (bookmarklet, plugin, addon, etc).

andrethegiant• 14 years ago

Could someone explain to me a use case for the battery API? I can't think of a single situation where it would be beneficial. The article states that you can detect if a user's battery is low to avoid battery-intensive processes, but do you think developers are going to spend their time inflating their scripts to deliver a poorer web experience to their users just because they have a low battery?

quarterto3• 14 years ago

Save prompts when the battery is low?

Zigurd2• 14 years ago

Quick poll: Which is worse...

a) Battery-aware HTML5 apps

b) Having a save command

shardling• 14 years ago

Remember that Mozilla is making a mobile OS based on Firefox, where all apps are written in HTML/JS.

As part of this, they're adding API's to provide the sort of hooks that mobile apps need, such as being aware of battery status.

They would also like these to be standardized across all browsers, so that HTML apps can properly compete with "native" apps.

salman89• 14 years ago

I think its a step in the correct version if HTML5 is every able to compete with native apps on mobile. HTML5 needs better access to hardware elements. We can see two out of these five here - the camera and battery level.

malandrew2• 14 years ago

The one way in which web apps still cannot compete effectively on mobile and which gets no attention is access to a user's contacts/address book.

Right now on the web Facebook and convoluted non-standard APIs to your email provider are pretty the only way to get access to contacts. This is the number one barrier to allowing web apps to spread easily when a user wants to share the app or something in the app with a friend.

csmattryder• 14 years ago

Video games, more specifically, 3D video games.

You could query the API, if they've got <50% battery left, adjust the draw distance to decrease rendering for longer play.

It's very niche, but along with video games, i'm sure some novel hacker will find a use for it!

MasterScrat• 14 years ago

It makes sense in combination with the fullscreen API for example, which hides the native indicator.

eli6• 14 years ago

Most developers probably aren't going to use ANY new HTML5 features in the near future. That hardly means they have no value.

A perfectly reasonable example is a Twitter client that switches from auto-refreshing to manual refresh when the battery is low.

jimwalsh• 14 years ago

HTML 5 games can show battery status, or warn when the battery is running low. HTML 5 apps can suggest that the user save their work as they are running low on power, to name a few.

MatthewPhillips2• 14 years ago

I hope they start to provide, when appropriate, non-JavaScript APIs for some of these things. Full screen is one that could be useful.

emddudley• 14 years ago

Non-JavaScript? Like what?

flebron• 14 years ago

Say, <a href="foo" fullscreen="true">, I'd guess.

abraham• 14 years ago

Most browsers have keyboard shortcuts to go to full screen already.

achal• 14 years ago

:( No love for the Audio API? http://www.w3.org/TR/webaudio/

(Admittedly, it's only supported in Webkit at the time)

kevingadd• 14 years ago

That is pretty much why, I'd expect. Though Mozilla apparently have plans to integrate it in Firefox, at which point you could probably start using it in HTML5 apps in the wild!

monsterix2• 14 years ago

Good that this came in just when I was playing with the Fullscreen API. It is the Firefox's implementation of this that's bothering me.

Figured out that we have to put up with a hack to avoid the default "background:black" that Firefox applies to the element being pulled to full_screen mode. But what is worse is that Firefox kills y-scrolling completely for pages longer than screen-height.

In effect one can't have full_page rendering (like on iPad or in normal state of browsers) of the website in full_screen mode of Firefox. That's seriously crippling.

How do we tackle this? Is there any enlightened soul who got this done already? Or I am hitting the wall, right now?

kevin_p• 14 years ago

Sounds pretty stupid, but it sounds like you should be able to get round it by sticking everything in a scrollable wrapper div (height:100%; overflow:scroll) when fullscreen mode gets activated. Or just do things the old fashioned way and tell the user to hit F11 (or apple-shift-F on mac) to put their browser into manual full-screen mode, which supports scrolling.

monsterix2• 14 years ago

I did try this. I don't remember this exactly, but what was happening then is that only the visible part of the page came in to the F11 wrapper div. There no-scroll in the full-screen browser window.

In effect you're left with an option to introduce scrolls within content divs, and that looked worse. Chrome on the other hand manages this quite nicely.

OlavHN• 14 years ago

PeerConnection is an API now enabled in vanilla Chrome.

http://www.webrtc.org/blog/seeyouontheweb

FuzzyDunlop• 14 years ago

I've been writing a library that abstracts the getUserMedia API, and I've found it really interesting to be able to use JS and HTML to interact with hardware in a (mostly) simple way.

Even though I prefer the native implementation of these things, the pure creativity HTML and JS allows (because it's less difficult) is where these features really shine. Calling WebRTC "skype in a browser" is just the tip of the iceberg.

discordance• 14 years ago

For the curious:

Fullscreen API works on Safari, Firefox and Chrome.

Page Visibility works on Chrome and Firefox.

getUserMedia (camera access) works on Chrome Canary and Opera

Tested on latest public releases; Safari 6.02, Chrome 23.0.1271.64 and Firefox 16.0.2

bzbarsky• 14 years ago

getUserMedia (alas, prefixed) should also work in Firefox, generally speaking... Though maybe it's preffed off by default? The patch for it landed for Firefox 15: https://bugzilla.mozilla.org/show_bug.cgi?id=752353

taitems• 14 years ago

Interesting fact learnt from the Phonegap creator at Web Directions: calls to the battery API actually decrease battery life.

More HTML5 APIs

Related Stories