Note: If you are looking at this on the front page, you won’t be able to see the embedded font properties. I have used a custom template in order to feature this within a blog post and not have extra stylesheets that are redundant throughout my site
Typography has come a long way since the big bad early days of web design. Back then, you really had very few options when it came to typography and often you designed and coded around the limitations. Gone are the days of Font tags as well leaving us with far more interesting options for typography. Here are some things you can do with typography using the font-face attribute in CSS. Continue reading →
Codecs have been a problem with integrating video online for some years now. Due to the expansion and diversity of video technology an end user is often confronted with the unpleasant codec incompatibility. Like browser incompatibility UX designers and developers have strove to find a platform that can be easily access via any browser or device.
Thankfully html5′s <video> tag takes us a lot closer. Being able to add multiple sources allows the developer some modicum of relief that the video can now be seen. What are the codecs that are preferred in HTML5 Video
OGG – a free, open container format that provides a high quality streaming source.
MP4 – Mpeg4 layer 14, this format is most commonly utilized by devices that contain quicktime.
WebM – A variation on the Matroska container, WebM is a file format intended to replace the h264 codec and provide a high quality patent free experience. This project is sponsored by google.
If you are new to html5 video and you have your own host, you may need to go to your control panel and add the following mime types
Video controls have come a long way since the 90′s when several hours of work would get you a murky blob the size of a thumbnail. Since then we’ve seen the rise and fall of formats such as Real Player in favour of more accessible formats.
2002 heralded the arrival of Flash Video which allowed a more seamless integration of video into websites, but it still required a plugin; in this case the Flash Player.
Thankfully HTML5 is making Video embedding easier with the <video> tag. Below is an example of HTML5 video encoding.
To embed this video I used the following code:
{code type=html}
{/code}
Pretty easy. I used the Video for Everybody technique to ensure that my video was playable by not only browsers that support HTML5 but those that don’t with a fallback to Flash Video. Getting your video online is becoming easier than ever and this way you can ensure that your mobile users can also see your stuff. Pretty important from a user experience standpoint.
The base feature set of the player is pretty good, you get a slider and basic controls. In future posts I will look into adding a resolution switcher and full screen options for all browsers and I will explain what the different codecs are and how they work.
I’ve added a wordpress child theme for download. It’s a child theme that uses thematic and has plenty of custom functions. Feel free to download it, play around with it & if you have any cool mods to add let me know.
I’m sending this post from an iPhone so I can’t hook it up to this post ( yet) but it’s located on the development page of this site.