latest and coolest html5 media

| No Comments | No TrackBacks
This is a talk by Silvia Pfeiffer. She was introduced as an internationally renowned expert on web video. Looks like she has written at least one book (as she's giving one copy away). It's a website that tells you which features are supported in which browsers. She includes more than just the new HTML5 markup tags, but CSS3, web workers API, etc. The whole HTML5 platform. So SVG, Canvas, audio, video.

She said her book is already out of date, she's running for updates to the book content (but I must ahve the wrong domain, because that site doesn't look right). She showed a html <video> tag, with 3 source elements for different movies, and a little bit of css. CSS3 allows for transitions, she showed how a video can expand when you hover over it using that. You can also use a rotate tranformations. In safari she showed a 3D cube that has videows on all the sides.

She showed using some javascript to manage a video element. Not only that you were able to catch these media events and report on them, and display all the media properties. She also showed using SVG filters ontop of videos, which was interesting.

Apparently canvas is better supported across the browsers. She demonstrated catching some events from the video element, and then drawing the video image onto your canvas frame. She showed some javascript programming where she grabbed the pixels from the video frame and used that to do some cool stuff, like change the colour of the border, or grabbed the white writing off a video and draw it onto another picture, or add a reflection to the bottom of a video.

She showed a demo where she had a web page that we all connected to, and we all watched the video together. When she clicked play on the presentation laptop, it started to play on all of our browsers.

She showed a demo by mozilla, where they started playing an audio clip. Then showed the audio samples. Then displayed them, then filtered them, then visualized them, including a 3D visualization.

She showed some subtitle stuff, called WEBVTT. These are used as <track> elements within a <video> element that reference this .vtt files. These can be styled with CSS using ::cue. At the moment these vtt are implemented in Javascript.

So it was a very fancy presentation, and it looks like at some point that future websites will get even more annoying. <video> isn't really the new <blink>, but I'm sure some people are going to use it like that.

No TrackBacks

TrackBack URL:

Leave a comment

About this Entry

This page contains a single entry by Geoff Crompton published on January 26, 2011 4:39 PM.

systemd was the previous entry in this blog.

Eric Allmans keynote is the next entry in this blog.

Find recent content on the main index or look in the archives to find all content.



Powered by Movable Type 4.23-en