HTML5 and related technologies in depth (#lwsdeep) – Live blog

by nicksmith. 3 Comments

18: 55 – Event is about to start.

17:02 – Last minute preparations before Michael Mahemoff goes on stage.

Jeff’s updates:

There are some jobs which you could talk to us about.

Jeff is going to be stepping down as one of the organisers of London Web Standards – other organisers are going to be taking over some of the key roles around the organisation and getting the blog updated on time and regularly.

Roles of the new team have been assigned out. Still the old organisers stay on board other than Jeff.

We also need volunteers to check out venues where we might be able to migrate LWS to. Bigger venue with beer, wifi and projector is required.

Let us know about any future good speakers who you might know of.

We are going to be collecting donations for the next meetup for Remmy Sharp who recently had a still born baby in family – he has been a great help and contribution to the web standards community. Donations are completely voluntary.

Jeff passes over to Mr. Mahemoff at 19:12.

Michael Mahemoff works at Google Chrome. Also runs AjaxPatterns.org which became a book called ‘Ajax Design Patterns’.

We are now extending the browser platform.

We are going to show off some features which you don’t usually see, because they are not visual, they are more on the functional side.

We will not debate the definitions – Michael might have strong opinions which may not be the same as ours.

Application caching

Now people think more in terms of applications (show iPhone app), but also in terms of web apps. There are more and more Chrome Apps around.

One of the things you have to make sure these days is that the apps work offline – casual games for example need to be able to do a whole lot when offline – so it would be nice to cache the application.

With wifi problems tonight there is a need for all of us to have application caching! 🙂

Shows a timer which works on the local machine and has been cached.

The same URL works on the iPhone – looks like a native app and works from the same source like desktop solution.

< html manifest=”timer.manifest” > …. type code handles this type of functionality/feature.

We can do fallbacks for particular URLs which have to have internet connection in order to work meaningfully.

Client side storage

Old thing: cookies and file hacks.

Local storage object – sand boxed and only accessible by local domain.

Demonstrates the local storage capabilities of the browser.

We can inspect our local storage via Chrome built in firebug type tool.

We can also use client-side storage in the form of Web SQL Database.  Uses simple SQL to create table and drop table and run simple INSERT and SELECT commands.

Again there is support in the browser for this functionality.

There are couple of more technologies to consider here: IndexedDB is one of them and the other method is ‘File’.

Cross-origin resource sharing. In the past we had JSONP. This is the old thing.

Currently you can only request data from the same server which sent it.

If you include a script tag from another domain you are trusting it to do anything it wants on your domain.

It’s not a very nice programming approach. It’s not clear what the user wants to do.

You can try this on Mahemoff’s domain which allows get requests from other domains.

‘The Web Is My API’!

If you have a web site which is showing structured data, then consider exposing it to almost anyone to reuse however they want to.

The next feature is Ping.

The old thing: redirects.

We can now do: < a ping=”http://…” >Web site< /a >

Another thing is live server data.

Old thing: Comet. Million and one hacks for keeping the data alive. iFrame hacks are also there.

The new thing is: WebSockets.

History

The old thing: hash polling and hidden iFrame.

Now there is a history API which lets us know what the user has been up to in the past.

There are also Web Workers. These enable threading. Old way the user’s session would just halt up when two tasks have been triggered on at once. Now we can run these concurrently and not have an impact on the user experience. It does take slightly longer to start up the delegation.

We have to set up the Web Worker in a separate JavaScript file and post messages to Web Worker to do the tasks.

There is a lot of inter-thread communication going on between Workers when using this feature, so it’s not a silver bullet – it can actually slow things down.

Geolocation

The old thing: Geo IP (database usage). This is very expensive and not accessible to every day users.

HTML5Rocks.com captures GeoLocation on the fly. ‘The only application I ever had to run on the bus to actually debug it!’

We can use ‘watchPosition’ to track things that are moving in the real time.

http://softwareas.com and follow @mahemoff for more interesting updates. At 19:54 Michael finished his presentation.

15 minute break and the talks continue at 8:15pm with Patrick H Lauke coming on board to start his talk.

Patrick H Lauke takes the stage at 20:23

Patrick starts the talk with discussion around < video > and < audio > as they are very similar in nature.

We can now have video as the native object within the web page.

With video as a native object the browser knows what is going on with the video object and has more control over that video object, unlike when the plugins are being used.

There is usually no way for users to jump into the Flash movie and jump back out of it without developers doing major things in order to make this happen and work.

Patrick shows a demo of ‘Big Buck Bunny’ video playing in HTML5 video.

There are options built into the browser for controlling the video playback. Browser puts in the native video controls into the video section of the page.

It is possible to control the video using the keyboard and it’s all accessible in that respect. Opera supports all this right now and other browsers are on board to do the same very soon.

Patrick shows an example of video using CSS transitions on hover with the video element.

In HTML5 video we can set the wmode attribute in order to prevent the video being top of the stack on the web page.

Video formats

MP4 / H.264 – ubiquitous, patent encumbered, licensing/royalties

The other format is: Ogg Theora – ‘free and open’, no licensing/royalties, not many tools for it, not web optimised

http://webmproject.org – Google, new container format for video and video format itself. Open and royalty-free, web optimised and supported by all browsers

Actual tool makers said they are going to build in support for it – from Adobe Premiere and so on for example

YouTube unveiled that they sneakily and secretly have been doing the WebM support before it was announced.

Currently you have to enable HTML5 videos on YouTube, you can see it in WebM format on YouTube already

In HTML5 we have the option to use separate sources in our video object.

The browser will use the first supported format which it encounters – there is also an option of providing fallback content for the video.

Powerful simple API

‘You want to be able to control the video via JavaScript’

http://icant.co.uk/easy-youtube shows an example of using YouTube API within Flash to make the video accessible

HTML5 has an API that is a given – there are standard controls/methods/attributes/events that are fired every time something happens with the video

When using JavaScript with the native HTML5 video API it is possible to create one’s own video control bar.

So now it is possible to brand up video players in the way the brand requires using JavaScript API

There is a facility to show subtitles for the video based on a separate text files which uses the video time information to load in external text file content via JavaScript. This is part of a separate specification to the HTML5 specification.

Audio

Audio in HTML5 works exactly the same as video in terms of controls

It is possible to trigger off another audio after the first audio has stopped playing – demo has been shown

Why are we bothering with all of this?

We can use HTML5 standard to play video and audio on devices that do not support Flash.

Is this safe to use?

Don’t do browser sniffing – we can do feature detection for audio/video

We can detect whether the video can be played within the given browser and depending on what is returned back we can then decide to play it or not

There are a number of pre coded HTML5 video players available online which can be used by downloading scripts and using them straight in your web pages

21:10 Patrick’s presentation is finished and we are ready for Q&A


3 comments on “HTML5 and related technologies in depth (#lwsdeep) – Live blog

  1. Patrick H. Lauke on said:

    Thanks for the write-up. Tiny amendment, maybe I wasn’t too clear:

    “In HTML5 video we can set the wmode attribute in order to prevent the video being top of the stack on the web page.”

    The demo was about Flash, and how it sits in front of everything (like css menus etc), and using wmode=transparent to suppress that behaviour for Flash (but not sure if there’s an equivalent for other plugins)

Leave a Reply

Your email address will not be published. Required fields are marked *

*

HTML tags are not allowed.