Blog on hold: This blog is currently on hold. Please visit thoughts.keranmckenzie.com for new blog posts

Watch Keran's YouTube Channel #theRandomnessProject


To video or not to video?

Tweet I only need to cast my mind back a day or two in my web history to remember the web the way it was. Way back in 1994 I tried to start a music sharing website for christian music – I even had some chats with big radio stations and such like, but the [...]

I only need to cast my mind back a day or two in my web history to remember the web the way it was. Way back in 1994 I tried to start a music sharing website for christian music – I even had some chats with big radio stations and such like, but the web then just wasn’t ready.

Fast forward a few years (dang is it 15 years already?) and the web is a fundamentally different place and rich media has taken on a whole new meaning.

Tonight on Twitter @CoryOBrien sent out the following tweet

Safari 4 has a video intro similar to the vid that plays the first time you start your Mac. Slick! http://www.apple.com/safari/welcome/

I took a look (I’ll pause here while those of you with Safari 4 go take a look at the link) and thought, you know what … yeah that’s kinda neat. But then it dawned on me, something wasn’t quite right. So I took a look a little deeper and discovered it wasn’t actually a video, but rather a collection of media and some very subtle use of HTML5 and CSS3.

But more on that in a second.

Cory then pointed me to an article he’d written about the Honda Let it Shine commercial on Vimeo – which if you haven’t seen you should take a look on Vimeo, go on, we’ll wait for you ….. Cory talks in his post about how this advert breaks past the traditional video box to take ownership of the screen to really draw the user in.

We started to wonder how they both did what they did, which might be better and which if either we might use.

So how do they do it?

I was simply going to explore the Safari 4 ‘video’ when Cory suggested a comparison of the two techniques. Now I’d love to spend a few hours and dig around work up some examples etc – but someone else can do that, I’m sure someone really smart will write some tutorial about it too. Me however, I was up at 4:30am this morning getting ready for a code release, so my brain blurry good it not is ….. STILL, I did want to explore a couple of things.

Fundamentally these two systems use the same idea – that is Javascript to place content into an existing or create a new HTML element. What they do with those elements is … well where the magic lies.

Vimeo & Honda

Lets look at this one first as it’s shall we say, the more traditional of the two. The way they do this is they’ve allowed the Vimeo player to have an extra attribute set ‘allowScriptAccess’ is set to always. This means their video controller can now interact with javascript on the page.

So when you click the PLAY button, it doesn’t play, instead it triggers a bit of Javascript that writes into the page a new SWF object that overlays the entire page. This object is full screen, set to scale and has some trickery around it to make sure it lines up with the Vimeo page.

Combine the line up magic and some nice masking and transparency in the now full screen (not full page, if you scroll down far enough the effect falls off), and theillusion to be complete – making it look like a set of different movies working together when it’s simply one overlay. For example, the “avatar” icon suddenly is a live and is an animated version of the insight logo – the background is alive with animation. No not really it’s one big animation, it’s just got some masking and animated transparency allowing you to see (or not) the HTML underneath.

Safari 4

This one is a little more clever, and only works in Safari 4. Actually technically speaking it probably could work in Firefox 3.5 and Opera – although you’d have to hack the JS a little. There is nothing (that I can see) that is particularly Safari 4 specific.

Okay in a nut shell this is what they do: They have an HTML page, with some empty DIV tags, they have an AUDIO tag and a VIDEO tag – these are both new to HTML5. The audio is an MP4 that plays in the browser and the video is an MOV that again just plays in the browser – no plugins needed and controllable by CSS. The Audio is hidden by the CSS – yet the audio still plays. The video (a small compass with the needle moving) has no controllers either.

There is some Javascript that sets up a CANPLAY function – used to test if this is Safari 4 a WELCOME MESSAGE function and a couple of other things – nothing overly complex really – other than some language stuff. Without looking too deep the WELCOME MESSAGE bit swaps out the welcome image based on your language settings.

The CSS is where it gets a bit funky. They make use of some really nice CSS features and this really shows the POWER of where the web is going. The ENTIRE animation is done with CSS, including the timings. Okay that’s a lie, the JS does a little of the timing work to ensure it’s all loaded before starting (I think) .. but CSS pretty much does it all.

Sure they have chosen to use CSS such as -webkit-animation-delay, however according to the working draft for CSS3 the code animation-delay css tag should work. (When I’m awake – I’ll work up some examples)

Which would I use

Right now I’d have to say – reluctantly – that if I was building something like this I’d have to go down the JS & Flash path. Why? Well because we have a lovely browser called IE – the bane of the interwebs. We have older browsers etc etc. However having said that, I’m currently building a site and am using CSS3 in it a fair bit.

Which is better?

The Safari 4 model is better! It’s faster to load, faster to build, it requires NO plugins, it’s … elegant. It’s great from an SEO point of view, your content is still your content in an open HTML format, your JS is light and your CSS simply does what CSS does – tells the browser put this here, now, do this with it.

Digging Deeper

Want to take a look for yourself try these:

With this collection of media – just jpg’s png’s and mp4′s Apple web designers have built what looks to be a high end video with HTML5 and CSS3

Summary

The reality is most of this is nothing new, and yet at the same time it’s brand new. Finally with HTML5 and CSS3 we have browsers that remove the barrier to content, we don’t need to rely on 3rd party stuff. Flash can do what it was designed to do – be a PART of the web, not be the web. Although having just said that – is this the beginning of the end for Flash & Silverlight? I mean why would you even bother to invest time and effort into developing these rich media “videos” when a few isolated elements whipped up in Photoshop with some CSS can do such rich content? Ajax, HTML5 & CSS3 could well spell the END of an area for Flash & Silverlight

My last comment – I love that CSS & the browser can do all the animation, timing and scaling not just of graphics but also of Video. If you haven’t seen it yet, grab Firefox 3.5 Preview and check this link out demoing some of the video ability in Firefox 3.5. This will show you some of the true power of a REAL modern web browser.

Links

» Safari 4 welcome ‘video’ – only works in Safari 4
» Honda Insight advert on Vimeo – click play to see effect
» Cory O’Brien looks at the future of adverts
» Download the latest Safari 4
» Download the latest Firefox 3.5 beta

Support Studiowhiz.com

2 Responses

[...] This post was Twitted by oo00_Mr_K_00oo – Real-url.org [...]

[...] To video or not to video? A look at new video tricks in the modern web – is this the death of Flash?… HTML5 and CSS3 introduce new ways to create rich media content – this article takes a look at how Apple created the new Safari 4 intro video and compares it to another great Vimeo & Video campagin (tags: video html5 css3 safari4 firefox opera web vimeo apple javascript html css design) [...]