HTML5 Video, .OGV, Servers, and You

Just before launching a custom HTML5 video player for my last project I ran into two small, maddening bugs. Everything on my dev server worked just fine but when moved to the production server Firefox wouldn’t play the video.

The first issue was expected and easy, just had to add the proper Mime types to the .htaccess file:

AddType video/ogg .ogv .ogg

Done, done, refresh and…

… well, the video was playing fine but the normal, native controls were breaking, with the progress bug jumping right to the end of the timeline. Odd. I don’t really deal with server configurations much so I was at a loss and frustrated. A day’s worth of Google searches led nowhere until this post. “Don’t use gzip/deflate compression.” Okay, that seemed to be worth trying, but how… HOW?! Plenty is written about the benefits of turning it on and how to do it, not so much the opposite. Now to find a way, one that didn’t involve messing with the server configuration, and something that a front-end person like me could understand. Here it is, ready for your .htaccess:

RewriteRule ^(.*)\.ogv - [E=no-gzip:1]

Ogg video files, no gzip compression. Problem solved. Hope it helps someone else out.

If any experts out there take issue with that regular expression please let me know in the comments.

Update: It seems Chrome needs gzip turned off on MP4’s in order to play them as well, if you have them listed first in source order as I have.

RewriteRule ^(.*)\.mp4 - [E=no-gzip:1]

Ampersandrew.com Launches

While all the programming and development was done by me, all design and content of this site has been created Andrew Smith.

The best clients are also the toughest.

I’ve partnered with the talented Mr. Smith as a developer on a variety of projects in the past, many of which can be seen right here in my portfolio. The Flash version of his portfolio had been in development for months with another dev but bugs were preventing it from being completed without delay. Andrew reached out to me to create an HTML version that would retain the same look and feel and could keep the smooth transitions and animation of the Flash version.

This was a great opportunity to practice what I’ve preached for years about the benefits of HTML+CSS over Flash, as well as stretch my legs with the animation side of jQuery. As an added bonus, delivering a site that would work, as is, in an iPhone or iPad was fantastic for him, especially when we started this site at the height of the great Apple vs Google & Adobe conflict.

The portfolio includes:

  • Design & Content by Andrew Smith
  • Single Page Layout
  • HTML5 and CSS3
  • Progressive enhancement with Webkit CSS3 transitions
  • jQuery Galleries and Lightboxes, based on a heavily modified Colorbox
  • Custom HTML5 Video Player
  • Completely customized WordPress theme, dropping almost everything from the traditional front-end yet leveraging it as full featured CMS
  • Site of the Day – The CSS Awards

View Live Site

El Cuarto Año High School Site Launches

This was the final project of a few students, with the initial idea being to take what was once just a printed literary magazine and put it online, but it grew into something that could be a larger web presence for the high school as a whole. Prior to this site El Cuarto Año had only a small paragraph under the Association House of Chicago website.

A few students were responsible for gathering and editing all of the content, while my faculty contact and all around great guy Mr. Zapata kept them on track. I set up the system and design, gave advice on hosting and domain selection, and will train them this fall so that they’ll be able to upload their own content without assistance.

Website includes:

  • All Design and Development
  • Customized WordPress Theme based on Modularity
  • Image Galleries and Music Players

View Live Site

Sharing is Caring

Based on a discussion with Andrew today I was inspired to research exactly how Facebook pulls the thumbnail images and description it uses when you share a link in your status, like so:

As I suspected, Facebook automatically picks up the title, meta description, and up to eight images it finds on the page to choose from. For greater control however there are a few specific tags you can use. This was great for Andrew because he was trying to share a full Flash site he just finished, so there was no static imagery or text to find (I’ve given him the Joel lecture of using proper alternate content ;). For me controlling Facebook share options was important because a lot of my posts don’t have much imagery with them.

If you’re a developer, then the title and description should be self explanatory, and probably already optimized for users and search engines. You can use <meta name="title" content="Your Facebook Specific Title" /> if you want to specify something different from the page title. <meta name="description" /> works as normal.

The new one to me was for an image to be specified and it’s <link rel="image_src" href="http://yoursite.com/path/to/image.jpg" />. The only caveat seems to be that its dimensions are larger than 50×50.

I wanted this information to change on a post by post basis of course so here’s a code snippet for WordPress. It gets the post’s excerpt to use as a description and the post thumbnail (now available in WP 2.9+) as the source image, all outside of the Loop in your HTML’s head.


<?php
global $wpdb;
$query = "SELECT post_excerpt FROM wp_posts WHERE ID = " . $post->ID . " LIMIT 1";
$result = $wpdb->get_results($query, ARRAY_A);

if ($result[0]['post_excerpt']) {
$description = $result[0]['post_excerpt'];
} else {
$description = "Static description if no excerpt exists";
}

$thumb = get_post_meta($post->ID,'_thumbnail_id',false);
$thumb = wp_get_attachment_image_src($thumb[0], 'post-thumbnail', false);
if ($thumb) {
$thumb = $thumb[0];
} else {
$thumb = "http://www.yoursite.com/path/to/static-image-if-no-thumbnail-exists.jpg";
}
?>
<meta name="description" content="<?php echo $description; ?>" />
<link rel="image_src" href="<?php echo $thumb; ?>" />

For my purposes it works great, but I don’t know how well it might interact with other SEO-type WordPress plugins. For other sharing-specific meta tags, such as audio and video, check out this article, or Facebook’s developer wiki.

And please, share away. Share