Category Archives: html5

Changing the aspect ratio of html5 video.

You can not directly change the video aspect of a video in a html5 video tag; however you can read the video (assuming it is on the same domain) and place it into a canvas … first create a canvas to hold the aspect ratio of the video 640 x 480 and use the style to size it in this case to a 100 x 100 box.

<canvas id=”processCanvas” height=”480″ width=”640″ style=”width:100px; height:100px”>


Now use straight javascript with canvas functions to copy the video from the video tag onto the canvas.

function draw( )


gold = document.getElementById(‘vid’);

process.drawImage(gold, 0,0,640,480);


var canvas = document.getElementById(‘processCanvas’);

var process = canvas.getContext(‘2d’);

setInterval ( “draw()”, 30 );

The aspect has now been changed from 640×480 to a 1 by 1 aspect or any other aspect ratio that I need. And is displayed in the canvas tag.


Using Canvas Processing.js to build custom fonts.

When dealing with logos and intellectual property rights (copyrights). It becomes necessary that the font used is not a standard font. You can not for example type your company name in times roman and then get copyright protection for it as a logo. Instead you must build your own font then you can get copyright protection. For either or both the font and the logo.

processing-js allows you to build a font using svg. Then displays text using your custom font. It also allows you to have fonts on your site that do not exist in the computer browser. But there is a limitation – the text is rendered as graphics so it is not seen by search engines. None the less there are many uses for custom fonts not seen by search engines: when somebody logs in to a web 2.0 site their name is normally shown; Shopping cart items are based on a secession with the visitor …

Although the canvas tag renders as a graphic for downward compatibility alternative content (the same words in a normal font) are included on the page – it is up to the search engine if the alternative content is given the same weight as if a canvas tag was not used. It is not a given that it will or will not be – or that search engines will not make adjustments in the future.

Another benefit of using Canvas is the content can be animated to focus the attention of the visitor.

As side notes: True Type Fonts can be converted to SVG fonts using Batik TTF to SVG Convertor. Changing a font into vectors is the first step to changing them into a true 3d object for use in webgl or other 3d animation applications.

SVG animations with IE9 using canvg

Google’s Canvg takes an SVG file and renders it with canvas. May seem like there is no need for this; However, it supports and renders svg animations … IE9 supports SVG and canvas but not SVG animations. With Canvg SVG animations work in IE9

Bypassing mime types using data URI

data URIs, defined by RFC 2397, allow content creators to embed small files inline in documents.

Specifies a data URI, which is a resource, typically an image, embedded in the URI as opposed to one loaded from an external URL.

Why The data: URI Scheme Could Help Save Your Slow Site

This is why reducing the number of HTTP requests a browser needs to make to finish loading a page is a fundamental step in optimizing web sites for speed. One (perhaps underutilized) way to do this is by embedding binary data such as images for oft-used icons inline with other assets using the data: URI scheme.

There are many uses for data uri — I’ve had the need to send html pages by email (sorry don’t know of anybody who has already made an interface to take a complete page content from a URL address and make it into a single file). However with new file formats coming out and many web hosts who have not updated their mimi types — people are having difficulties in implementing some file formats on their web site. Normally not a difficult configuration and should be able to be accomplished by one line in the .htaccess file. However sometimes it may be difficult to reconfig the server.

Resources — converting to base64 can be done with ease online …

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>

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


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



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 the live example will likely use jquery mouse enter on the divide instead of mouse over.

HTML5 features now live in 2011

Many people do not understand the “standards” process. Specifically the standard is not made into a standard until the features are being used. For this reason HTML5 may lose the version number. Many of the features are already in use, others may have problems in implementation and never become part of the standard. Web connections for example have some implementation problems – these allow browser to IP address communications but open up a number of security concerns.

What is important to understand is that HTML5 is here today. The question for sites is are they going to use these features? HTML5 browsers have already been released; Ipad uses HTML5 features as well as chrome and firefox. IE 9, Microsoft, has taken the position of waiting to see how well other browsers work so they have the potential to outdo them! There is no question that IE9 supports HTML5! Microsoft has been working with benchmarks comparing IE9 to the others to position themselves as the fastest rendering of HTML5.

Shortly, with IE9, all new browsers will support: Static SVG (animated using javascript), Canvas, HTML5 video (made interactive with javascript and pixel level video processing can be done using canvas). The list goes on.

For more on html5 implemenations in 2011 of wsmithdesign see San Diego Freelance • HTML5


Thoughts on CSS width:calc()

When I dig through all the CSS3 toys, I ask myself several questions:

How can I use it?

What need does it fill?

How can I work around it for browsers that don’t support it?

I am having trouble with justifying using width:calc()! It is not that it is not needed; IE6 needs it badly; And, coding for other browsers to include non-standards IE6 needs it. But IE6 does not support it!

So when IE6 leaves the picture we have a standard compliant browsers. In a standard compliant world we have padding-left:fixed value and width:100% and absolute:position to overlay content from another divide onto the padding-left space. It works and with or without width:calc() I use two divides and a wrapper, which is the parent document or a parent divide. In other words I only need width:calc() on the browser where overlays do not work to standards and does not support the property as a fix.

To design for IE6 I need <table width=”100%”><td></td><td width=”fixed?”></td></table> something that should make even a hobbyist say, “No! don’t do it!”

I like the property though. I just can not honestly see where I need it. For Javascript makes it possible to change one value instead of two — which can lead to smoother animations — But for attractive animations many properties need to be changed at the same time anyway.

Specifically IE6 has a problem with hiding other content on a <div style=”position:absolute; top:0px;width:100px; float:right”> This should fill a 100 pixel area on the right part of the screen – it does but it blocks the content on the left part of the screen. z-index can correct it when used only with IE6 as IE6 implementation is different and breaks other browsers.

WebGL now live in Chrome’s stable build.

Today, we’re excited to bring several new features from Chrome’s beta channel to the stable build, including WebGL, Chrome Instant, and the Chrome Web Store. …

Google Chrome Blog

Hat Tip: learning WebGL

Make wordpress stop changing object tag data.

The object tag can be used to embed any type of content into a html page. From flash through SVG and including html documents. It is similar to an iframe tag but the standard does not require it to have as much overhead. Hence it may be a better choice for an HTML5 based slide show.

The quick solution is to use a script


document.write('<'+'object data="something" width="200" height="200"></'+'object>');


The object tag in the script is still spotted by MCE editor used by wordpress but if it is spaced apart using javascript then it will not be changed by MCE editor.

Using jQuery as an alternative to csshover3 works to add hover to all elements in IE However, it does come with a performance hit. It is always good to have alternative; sometimes different scripts cause problems for each other.

If jQuery is being used hover can be added by this code:

function (){
$(".dropdown", this).css("display", "block");

function (){
$(".dropdown", this).css("display", "none");

It actually is using the mouse enter event.

A few of the IE bugs to watch out for include.

1> When “LI” is displayed as a block inside a container even when it it filled a position:relative element appears to the right not below the tag. However making the “A” anchor tag a block works properly. Both need to be used as blocks so the drop down remains a child of the ul or li element.

2> When an element is even a position relative element is displayed in a UL, which should not cause the size of a ul to change it does; the ul element needs to be changed to a block with a specific size.

3> When the anchor tag is sized to a block the width of the container the links in the container also overflow and space is created below the link. These tags need to be changed back to display inline with proper usage of CSS rules.

Stats normally confirm that the dropdown get a considerable amount of attention. These should be styled.