Friday freebies – replacing flash buttons with html5 video.


Apart from images flash uses video for flash buttons. The whole process can be done with canvas complete with links embedded in the script, but it is search engine friendly to expose the links. Video in html5 can be done easily and the interactions are not limited to inside the flash object.

In this case the video is created with daz 3d studio. It looks realistic because of the ray tracing rendering. Trust me no CD case was used, no CD, and there is no table. The CD case opens, CD comes out and the lighting changes in the two second video clip. The texture can be quickly changed allowing for a library of music to be sampled using the same effect.

The coding at this point is html5 with inline CSS and Javascipt:



<div style=”background:black; width:220px; height:160px;”>

<div style=”padding:10px”>

<video id=”v” >

<source src=”1.theora.ogv” type=”video/ogg”>

<source src=”1.mp4video.mp4″>

<img src=”1.png” > </video>

</div>
<a href=”#” style=”color:cyan;margin-left:10px”

onmouseover=”document.getElementsByTagName(‘video’)[0].play()”

onmouseout=”document.getElementsByTagName(‘video’)[0].pause(); document.getElementsByTagName(‘video’)[0].currentTime = 0″

>Listen</a>

</div>

As you can see the coding is not complicated and there no major impact that slows down the loading process. Video files of this size are around the same size as an image  — 80Kb and 130Kb respectively. The links can be placed on top of the video or not depending on aesthetics.

 

Update: a slightly better way to start the video event is to attach the script to the video element itself.

<video id=”v”onmouseover=”document.getElementsByTagName(‘video’)[0].play()” onmouseout=”document.getElementsByTagName(‘video’)[0].pause(); document.getElementsByTagName(‘video’)[0].currentTime = 0″>

By doing this when somebody uses a browser that does not HTML5 the tag and events do not exist and the fallback (in this case a mere image) is cleaner.

Update: Examples will be posted at http://wsmith-animations.cz.cc/ the live example will likely use jquery mouse enter on the divide instead of mouse over.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: