In this article, we are going to learn how to create custom HTML5 video controller. If you’d like to go over general features first, check out our previous posts:
HTML5 Video: Part 1 (Overview)
HTML5 Video: Part 2 (Adding to your site, using a fallback player, encoding video)
Before we start, be advised that basic knowledge of JavaScript is needed to create a custom controller. If you are not familiar with JavaScript or want to learn more, visit the W3 Schools website to get more information.
With so many different sites, blogs, forums, and online services coming out, it is hard and sometimes risky to register an account on all of them. What if a site gets hacked and gets passwords compromised, or a seemingly normal looking wordpress blog or forum was modified to record passwords in plain text?
Recently we talked about general features of HTML5 video and how to choose the right video format. Click here to read if you missed it. (HTML5 Video: Part 1)
Now let’s walk through how you can add HTML5 video to your site.
Most websites are designed and built around templates. When you strip away the content a site’s layout is typically a multitude of boxes with some type of straight edge along the sides of the content. This maintains consistency in look and feel and in the underlying structure, but sometimes we don’t want the exact same look from page to page. Subtle variations can help break a site out of the repeating doldrums. Read More
There’s been plenty of noise lately about Flash and its future on the web. While we think there’s still a place for Flash, newer technologies like HTML5 video are getting a big push as mobile devices and tablets (like the iPad) continue to resist calls to add Flash support.
So what is so great about HTML5 video? Well, for starters, its Core Markup Language does not require additional plug-ins to play video. This not only cuts down on user frustration but also improves performance by reducing CPU/memory usage.
But the big thing is that it’s simply not Flash. It’s part of what Steve Jobs calls the “full web” (see his open letter here), and because of this has the potential to be accessed by a wider audience going forward.
Sampling of HTML email received at Krate.
It can be deceptively tricky building a bulletproof HTML email template that looks good across different email clients. There are at least 15+ clients to test for, from web clients like Gmail, Yahoo!, and Hotmail to desktop clients such as Apple Mail, Outlook, and Thunderbird. Not only must you concern yourself with how each application behaves, but also different versions of the application. It’s not very easy to get your hands on all of these applications, without a cost, let alone all of the different versions.
Enter Litmus. Litmus is a web application that allows you to conduct both browser and email client testing. This is one of the indispensable tools we use here at Krate in order to provide the most compatible HTML email templates for our clients. The need for this tool arises because coding for emails differs so much from the web. Each web and desktop client can filter out different tags or styles so that they can keep the look consistent within their application and sometimes, as in the case with Outlook 2007, they use their own HTML interpreter.
In addition to the behavior of each email client interpreting the HTML its own way, CSS style tags (<style></style>) are usually stripped. The two main reasons this is done is so that desktop clients don’t have to build CSS interpreters and web clients won’t have to worry about the styles in their website being overridden (or changed by those inside the email as the browser processes it). Alternatively, you can use inline styles, but even those don’t work all of the time because clients restrict its use or don’t support the use of certain tags. For example, MobileMe email does not support the “line-height” attribute.
So there are lots of snares to watch out for along the way. Here are a few to be mindful of:
When you right-click (Windows/Linux) or control-click (Macintosh) on a screen or a website, you’ll see a pop-up menu known as a context menu. This small box typically provides a shortcut to menu items you access frequently (like ‘copy’ or ‘paste’) or menu items that don’t have a clear place elsewhere.
Flash Player also has a context menu and…you guessed it…we can customize it!
Serving a lot of images simultaneously is a real performance issue. When pages display 200+ images, usually the code is setup to just make simple HTTP requests for each file, and this is the wrong way to go about it. 200 might sound like a lot for a page, but this is not rare (example: image gallery or user listing with avatars). And even if the visitor is on a broadband connection it takes a while to download them all. But if you are using a medium that supports binary input for displaying images like Flash, you can use base64 encoding with JSON to group all images into one file, and decode on the client side, thus eliminating the many issues with large amounts of requests.
Did you ever need to build a website with clean URL’s without installing a content management system (CMS)? Tired of writing the same snippets of code in multiple files?
Krate’s simple PHP router to the rescue. We designed the router as a class to be modular as our primary use was to use it within our custom framework and CMS. Here we will provide you with an overview of the key components of our router.
