var a = function() { alert(arguments[0]) } (1,2,3);
What’s the alerted value and how that works?
Today I saw a interesting article in one of my favorite blogs – ajaxian.com. From now on Opera will support the <video> tag in the new version 10.50.
Actually there is a bunch of new features in that version, but I was curious which codec will be supported, as I was interested in that from my previous post!
supporting OGG. Vorbis and Theora!
HTML5 is mentioned as entirely new “thing” out in the web, but what it actually means is rather a collection of new, unknown for the current HTML version, features. One of the most interesting and used things in HTML5 are the support of a video in a entirely new “video” tag. Until now the playing of a video was either with Flash player or with Quick Time. But in both cases it relied on a third party plugins. Of course normally the question about performance was inevitable. Which is faster? But imagine we didn’t have the IMG tag? This give you the answer – using third party plugins always slows down the page, and today most of the web is based on video sharing and therefore the browsers become slower!
As I mentioned above the performance of HTML5 video should be way better than the performance of any Flash video player. To be more precise I’ll reference an article from ajaxian.com, where the author points on his turn an interesting presentation. Indeed the performance of HTML5 video was way, way better:
But sometimes this doesn’t resolves all the problems. Normally with this “new” technique of putting a video into the page, come some additional issues.
First of all there are many codecs that the browser should support and almost always there is something “your” browser don’t support. That makes the task bigger. Now you should support more and more video file formats for the different browsers. And yet another problem is the detection of this codec support.
Lucky enough, I found a great article and tutorial describing how to integrate HTML5 video with progressive enhancement. First of all you can check for it’s support than downgrade to Quick Time and Flash and if the client doesn’t support even that – render an image.
You can find the source here.
Thanks to this technique you can fully integrate new video tag into your page. Remember that most of the clients for sure will be happy to watch video in a more user friendly manner.
After submitting the HTML5 localStorage wrap plugin for jQuery, there comes the new version, hopefully more stable and reliable!
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | (function(jQuery) { var supported = true; if (typeof localStorage == 'undefined' || typeof JSON == 'undefined') supported = false; else var ls = localStorage; this.setItem = function(key, value, lifetime) { if (!supported) return false; if (typeof lifetime == 'undefined') lifetime = 60000; ls.setItem(key, JSON.stringify(value)); var time = new Date(); ls.setItem('meta_ct_'+key, time.getTime()); ls.setItem('meta_lt_'+key, lifetime); }; this.getItem = function(key) { if (!supported) return false; var time = new Date(); if (time.getTime() - ls.getItem('meta_ct_'+key) > ls.getItem('meta_lt_'+key)) { ls.removeItem(key); ls.removeItem('meta_ct_'+key); ls.removeItem('meta_lt_'+key); return false; } return JSON.parse(ls.getItem(key)); }; this.removeItem = function(key) { if (!supported) return false; ls.removeItem(key); ls.removeItem('meta_ct_'+key); ls.removeItem('meta_lt_'+key); return true; }; jQuery.localStorage = this; })(jQuery); if (!$.localStorage.getItem('test')) { $.localStorage.setItem('test', ['stoimen'], 5000); console.log('dynamic'); } else { console.log('from cache'); } |
I’ve decided to wrap the functionality of HTML5 localStorage in a jQuery plugin, with the simple functionality of a lifetime period for every cache. I’m going to post only the pre-release with the idea to clean up the code in the recent future.
(function(jQuery) {
var supported = true;
if (typeof localStorage == 'undefined' || typeof JSON == 'undefined')
supported = false;
else
var ls = localStorage;
this.setItem = function(key, value, lifetime) {
if (!supported)
return false;
ls.setItem(key, JSON.stringify(value));
var time = new Date();
ls.setItem('meta_ct_'+key, time.getTime());
ls.setItem('meta_lt_'+key, lifetime);
};
this.getItem = function(key) {
var time = new Date();
if (!supported || time.getTime() - ls.getItem('meta_ct_'+key) > ls.getItem('meta_lt_'+key))
return false;
return JSON.parse(ls.getItem(key));
};
this.removeItem = function(key) {
return supported && ls.removeItem(key);
};
jQuery.localStorage = this;
})(jQuery);
if (!$.localStorage.getItem('test')) {
$.localStorage.setItem('test', ['stoimen'], 600000);
alert('dynamic');
} else {
alert('from cache');
}
Any feedback is welcome! Yet again the code isn’t tested at all.