The thing that excites me most about HTML5 <video> tag
is none of the obvious reasons (better performance, better battery life,
removing dependence on Flash).
It’s the fact that the <video> element is now a
first-class citizen of the page, and you can treat it as you could
any other element.
Click anywhere to continue.
This is a doodle, created by Mike Dutton, that was published earlier this
year. It was a regular animated GIF, but what if we tried something
better?
Click anywhere to continue.
Let’s stop all the animations…
Click anywhere to continue.
…and zoom in on one interesting bit.
Click anywhere to continue. Note: Sound will start playing.
Now let’s add a vanilla <video> element with
repeating opening credits. Since it is a regular page element, we can
now transform it using CSS3 three-dimensional transforms.
Click anywhere to continue.
Doesn’t look so bad! (Notice how the video was playing during
the transition.) Now, let’s put it underneath the image.
Click anywhere to continue.
Look how nicely it plays with the alpha channel of the image. It
really does feel like an organic part of the image. This would have
been impossible or really hard to achieve with Flash.
We can now do things like this…
Click anywhere to power the TV off.
…and this, using simple CSS3 transforms and transitions over those
transforms. The ease in and out curves make it seem like truly
analogue television.
Click anywhere to turn it back on again. Thanks for playing!
The thing that excites me most about HTML5
<video>tag is none of the obvious reasons (better performance, better battery life, removing dependence on Flash). It’s the fact that the<video>element is now a first-class citizen of the page, and you can treat it as you could any other element.Click anywhere to continue.
This is a doodle, created by Mike Dutton, that was published earlier this year. It was a regular animated GIF, but what if we tried something better?
Click anywhere to continue.
Let’s stop all the animations…
Click anywhere to continue.
…and zoom in on one interesting bit.
Click anywhere to continue.
Note: Sound will start playing.
Now let’s add a vanilla
<video>element with repeating opening credits. Since it is a regular page element, we can now transform it using CSS3 three-dimensional transforms.Click anywhere to continue.
Doesn’t look so bad! (Notice how the video was playing during the transition.) Now, let’s put it underneath the image.
Click anywhere to continue.
Look how nicely it plays with the alpha channel of the image. It really does feel like an organic part of the image. This would have been impossible or really hard to achieve with Flash.
We can now do things like this…
Click anywhere to power the TV off.
…and this, using simple CSS3 transforms and transitions over those transforms. The ease in and out curves make it seem like truly analogue television.
Click anywhere to turn it back on again. Thanks for playing!