Flowplayer Flash Video and SetReturnValue

I recently set up a HTML5 video system with flash video fallback, for those crazy people with old browsers. VideoJS.com is a great site for explaining how to do this. Use this with the site with the info here for a great solution.

Anyway, the flash fall back using Flowplayer commercial was giving me a bunch of issues on IE7 & IE8. One was there was an error that was being logged in the console about 'SetReturnValue' not being defined. Turns out, the <object> tag must have an ID. The example code I copied from VideoJs's front page didn't have this. So, make sure you have a unique id set.

The other issue had to do with Flowplayer's branding removal (with a commercial license). Turns out, the registered domain name is not for the domain the video is being played on, but the domain the swf file is loaded from. I had the swf files on a CDN and the branding was not removed. Just had to move it back to the main site and all was good.

A Better Browser

This is my PSA to help the world rid itself of bad browsers:

So I just wrapped up major development on a 3-month project and I am stoked to be done. But, I am also more and more convinced of Internet Explorer's ... deficiency.

Now there are the normal "quirks" with IE that every web designer runs into (e.g., version 7's inline-block problem). These "features" are annoying and I have to deal with them often, but at least there are a number of known work-arounds to help me.

There is one major thing that I've come to see about IE in these past 3 months for which there are no work-arounds. It is dreadfully slow and clunky. Things that will run smoothly and look great on Chrome, Safari and Firefox, will look awful slow on IE. This last project uses a lot of DHTML and it has a really high level of user interaction, so naturally there are a lot of animations and fading of images, etc. IE just cannot handle it and I've had to remove a lot of animations for people who are visiting the site with IE.

So, now that the browser Google Chrome is celebrating its second birthday, I thought I'd share my thoughts about browsers once again. Use Chrome if you want a fast, responsive, useful browser. I particularly enjoy the streamlined UI. Switch between Chrome and IE and you'll notice MAJOR speed enhancements. I love Chrome and you will, too.

Browser detection with jQuery

Those who create web apps to work for the widest possible audience, know that overcoming browser quirks is an unfortunate part of the job. The two greatest pains for me are IE6 and IE7, both common browsers with an uncommon ability to screw up my pages. (I think IE8 is a wonderful improvement to this line of browsers.) Recently I found out how to determine if a browser is IE7 or lower using this handy jQuery statement:

<script type="text/javascript">
if ($.browser.msie && (parseFloat($.browser.version) < 8)) {
     // Do something for IE7 or IE6
     // Like replace some image src with a gif (instead of transparent png)
     // or change a style to look right
}
</script>

Of course, you must have the jQuery library included on the page before this. But this little script is great for dealing with those demanding IE-specific quirks, like display:inline uniqueness, select-box borders and transparent png support.

CSS: inline-block

So much time spent on one CSS statement - "display: inline-block;"

This statement is perfect for a new site I am working on. I want three columns of data to display side-by-side. But, I had many frustrations trying to get it to work cross-browser. This is what I found...

Inline-block works great on IE 8, Chrome and recent versions of Safari.

I had issues when it came to IE6 and IE7, no big surprise there. I fixed this with some conditional comments and the CSS property "display: inline" which acts the same as inline-block in IE.

I also had problems with Firefox 3! My old love of a browser takes issue with this statement (when used with other specific statements). Apparently "display: inline-block" does not play nice with "overflow: hidden" and "text-align: center". This strange alignment of the planets causes my text to align left, instead. Quirky. I ended up commenting out the overflow property, and everything worked for Firefox 3. (I also added a strange Firefox style statement to make sure it worked on FF 2: "display: -moz-inline-stack;".)

jQuery's getJSON

I recently had a struggle getting jQuery's $.getJSON function to work on Internet Explorer (IE6 & IE7). I tried and tried to debug the javascript, but was getting no where. After giving up for a while and coming back to it the next day, I thought of checking the target file—the file jQuery was fetching asynchronously—for problems.

It turns out that IE doesn't like JSON encoded documents that are specified as UTF-8. Not sure what the problem is, but the document has to be returned in a format IE likes. If not, IE will not allow jQuery to process it. Now, I had a header on this file that specified the content-type and charset. But, I changed it and instead I put only the content-type at the top of my JSON-returning PHP files:

<?PHP
header("Content-Type: application/json");
?>

Why does IE balk at UTF-8 specified charsets for JSON-encoded responses?? Who knows. But, from the research I've done, specifying the charset in the HTTP header is not something that is required. I am sure there are good reasons to specify the charset, but this (above) works great for me.

Virtual PC

As a web designer, I want to make my web pages look pretty in any browser people may use. And, one of the hardest browsers to test for is Internet Explorer 6 (IE6). Unfortunately, my Google Analytics show that a little under half of all IE users use version 6. A slight majority have switched it IE7. But not enough to forget about IE6 users.

To really be certain that my page will look right in nearly every visitor's browser, I test in Firefox, IE7, Safari and IE6. I figure this will cover 95% of my visitors, plus if it works in these there is a good chance it will work in the others (e.g., Opera, Mozilla, etc.).

The problem I ran into is being able to test a site in IE6 and IE7. You can't have both versions installed on your PC at the same time: Microsoft forbids it. To help us designers out, Microsoft has virtual hard drives (VHDs) available with IE6 installed. So, if you download Virtual PC (free) and the install the VHD for IE6 at http://go.microsoft.com/fwlink/?LinkId=70868, you can easily test your design with IE6 on the same computer that has IE7 installed.

There you go. But, this would all be a lot easier if everyone just upgraded to IE7! What are they waiting for?