More HTML5 APIs(davidwalsh.name)
davidwalsh.name
More HTML5 APIs
http://davidwalsh.name/more-html5-apis
68 comments
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.
At the risk of stating the obvious, it sounds like you have a problem with ads, not a problem with the visibility API.
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.
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.
Depending on your browser, that seems pretty doable with a plugin. I assumed ad block plugins would nuke video ads anyway -- is the issue that they are preroll and hard to filter?
At the risk of getting into an ethics debate, that's sort of the deal being offered by the publisher: you get the content in exchange for watching this ad.
At the risk of getting into an ethics debate, that's sort of the deal being offered by the publisher: you get the content in exchange for watching this ad.
How else are video content providers supposed to keep the lights on?
.. besides not using commercial ads and instead using image / text ones that take up much less precious bandwidth.
.. besides not using commercial ads and instead using image / text ones that take up much less precious bandwidth.
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.
Yes but then you aren't looking at the ad and from a marketing perspective that's not acceptable.
Which is why it's good for marketers but not the user. I don't need to see the same ad more than once in a session but many video sites will display the same handful of ads every couple minutes. This is especially prevalent on twitch.tv when watching gamers stream, it's usually the same ad every time. After the first time I see it I'll just visit another tab while it's playing (mind you the audio is still playing.) If they were to pause while I was doing this I wouldn't bother watching at all.
To move beyond the ad issue. Maybe I'm not interested in watching the video (say a presentation) but only listen to it. Then I have a legitimate reason for not wanting the video to pause: doing other work in other tabs.
That's still not an argument for treating the possibility of detecting visibility as "user hostile"
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.
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).
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).
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?
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?
For example spotify already forces you to listen ads, if you decrease sound during an ad they pause it.
Wow... I can think of few ways to completely destroy goodwill with users than that. If someone has decided that they aren't interested in listening to an ad, enough so to spend the time to lower the volume, you sure as hell are not going to elicit warm fuzzy feelings by actively ignoring their wishes.
You know that they might just be detecting onfocus/onblur instead, right? They aren't necessarily using the Page Visiblity API.
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.
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.
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.
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 ?
Couldn't me do more with less here ?
Wasn't executing untrusted code the purpose of operating systems?
In MULTICS, sure. Not in Unix/Windows/Mac.
In MULTICS, sure. Not in Unix/Windows/Mac.
> I've recently noticed several sites that pause their video ads when the tab is hidden.
That may actually be a Flash thing.
That may actually be a Flash thing.
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.
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.
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?
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.
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.
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.
A perfectly reasonable example is a Twitter client that switches from auto-refreshing to manual refresh when the battery is low.
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!
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!
Save prompts when the battery is low?
Quick poll: Which is worse...
a) Battery-aware HTML5 apps
b) Having a save command
a) Battery-aware HTML5 apps
b) Having a save command
Ok, what about more frequent autosaves?
Android's APIs enable easy implementation of a sqlite-based data model, where changes are always persisted.
That doesn't solve the problem for things like CAD that need an in-memory object-oriented data model, but the Android support for observer patterns can be wrapped around any data model, and the ability to quickly, which means, in practice, incrementally, persist changes is driven by both Android-specific issues like needing to respond to lifecycle events quickly, and by general mobile considerations like a battery that could fail unexpectedly.
In other words, you need to solve the "don't explicitly save" problem for reasons ranging from "it's more robust" to "it fits Android UI conventions" anyway.
That doesn't solve the problem for things like CAD that need an in-memory object-oriented data model, but the Android support for observer patterns can be wrapped around any data model, and the ability to quickly, which means, in practice, incrementally, persist changes is driven by both Android-specific issues like needing to respond to lifecycle events quickly, and by general mobile considerations like a battery that could fail unexpectedly.
In other words, you need to solve the "don't explicitly save" problem for reasons ranging from "it's more robust" to "it fits Android UI conventions" anyway.
Wouldn't those drain the battery?
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.
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.
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.
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.
It makes sense in combination with the fullscreen API for example, which hides the native indicator.
Nice! I like the link prefetchin
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
Minor nitpick: prefetching is not an API. Still cool, though.
[0]: http://en.wikipedia.org/wiki/Link_prefetching
Yeah, definitely going to try that out my next mobile app. Great article.
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.
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.
[deleted]
Does it hurt to support it? As in, why did you stop supporting it if the infrastructure was already there?
Oh its not that. When I re-wrote the pages, or upgraded services, I just stopped including/thinking about prefetching for Firefox.
So it pretty rapidly disappeared from all the sites that I support/operate.
So it pretty rapidly disappeared from all the sites that I support/operate.
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
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
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
:( No love for the Audio API? http://www.w3.org/TR/webaudio/
(Admittedly, it's only supported in Webkit at the time)
(Admittedly, it's only supported in Webkit at the time)
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!
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.
Well, you can rel="prefetch" it just won't do anything unless you're using Firefox (AFAIK).
you can also use "prerender"[0] which will work in chrome but has a slightly different behaviour
https://developers.google.com/chrome/whitepapers/prerender
https://developers.google.com/chrome/whitepapers/prerender
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.
I hope they start to provide, when appropriate, non-JavaScript APIs for some of these things. Full screen is one that could be useful.
Non-JavaScript? Like what?
Say, <a href="foo" fullscreen="true">, I'd guess.
Probably something new would have to be invented as there is no mechanism to send messages to the browser in plain html. Something equivalent of a form element but without the action attribute. It would be nice to have something like (spitballing)
<some-new-form>
<input type="hidden" value="fullscreen" />
<input type="submit" value="Go fullscreen" />
</some-new-form>> Probably something new would have to be invented as there is no mechanism to send messages to the browser in plain html.
Web components. At least their usage is plain HTML and could do what you want internally with the JS API.
Web components. At least their usage is plain HTML and could do what you want internally with the JS API.
Oh please no, we barely got rid of the target attribute /:
Most browsers have keyboard shortcuts to go to full screen already.
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.
Is there an issue with the code? I know Chrome supports the full-screen API.
PeerConnection is an API now enabled in vanilla Chrome.
http://www.webrtc.org/blog/seeyouontheweb
http://www.webrtc.org/blog/seeyouontheweb
Interesting fact learnt from the Phonegap creator at Web Directions: calls to the battery API actually decrease battery life.
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?
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?
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.
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.
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.
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.