Washed Out H.264 Encoding Video Fix

Wednesday, September 9th, 2009

Category: Web links

Have you ever rendered an MP4 on your Mac using the H.264 codec to find that your newly encoded video was washed out? I have been stung by this phenomenon for far too long so I did some research to find the cure to this awful disease.

From my understanding the root of the problem involves an issue between QuickTime and Core Video. Since 2005, the release of QuickTime 7, this problem has resulted in a gamma shift that lightens the video on playback making it look washed out. source

The best solution I found was to render the video using the free x264 VideoLAN encoder. QuickTime can render this out as a .MOV file and ffmpegX can render it out as a .MP4.

Other solutions include changing your color profile settings on your OS, using a different video player that doesn’t utilize Apple’s Core Video such as Nice Player, or there are settings within Quicktime player to correct it:
“Select ‘Show Movie Properties.’ Highlight the video track then click on the ‘Visual Settings’ tab. Towards the bottom left you should see ‘Transparency’ with a drop-down box next to it. Select ‘Blend’ from the menu then move the ‘Transparency Level’ slider to 100%. Right after that, choose ‘Straight Alpha’ from the same drop-down and close the properties window. and finally, ‘Save.’ source

Written by Jeff McIntosh

JMDesign Website Technologies

Wednesday, August 26th, 2009

Category: Web links

In the spring of 2009 I created a new website for JMDesign and every time I make a new site I am always learning something new by adding a new technology or adapting an old one. Here is a rundown of the technologies I used to create JMDesign.

1. Wordpress – I used these open source platform to create my Pro Blog. Wordpress is the leader in blog development and holds a lot of amazing features.
2. Whiteboard Wordpress Theme – I used Wordpress for my last blog, but one thing that irked me is that it did not match the design of the rest of my site. Whiteboard is a squeaky clean for Wordpress that became the foundation of my own JMDesign Wordpress theme. I was able to sync in my own style sheets and code.
3. Shadowbox.js Media Viewer – The most important part of my website are the videos. They need to play and they need to look great. Shadowbox.js is a stylish AJAX driven media player that floats over your website whenever a video is played.
4. JW FLV Media Player – The JW FLV player is one of the best and well supported media players on the web. This player runs in the Shadowbox.js platform and plays my MP4 H.264 video files with ease.
5. MySql – With a combined inventory of two hundred clients and projects it only makes sense to keep everything organized in a database. MySql has been my lifesaver and with the help of PHP it is easy to pipe my data into the site.
6. PHP – I have been using PHP for years and it does everything I ever wanted it to do.
7. FormCheck – I chose MooTools as my JavaScript framework and FormCheck is an elegant AJAX form validation library.
8. Google Analytics – Google provides one of the best and free ways to track visitors to your site. Check out my post here on how you can track Shadowbox.js usage using Google Analytics.

Shadowbox.js Flash media and Google Analytics

Wednesday, July 8th, 2009

Category: Articles

One breakthrough that I made when developing my new website was the ability to track when Shadowbox.js was initiated to view an FLV file. Traditionally the standalone JW FLV Media Player that Shadowbox.js utilizes can call the flashvar “callback” with the value “analytics”. Unfortunately it looks like this flashvar is no longer supported and if it was it would not work because Shadowbox.js uses AJAX to load its player and content.

The premise of the solution comes from Google’s Analytics Help article: How do I track files (such as PDF, AVI, or WMV) that are downloaded from my site? The solution is to place a piece of JavaScript code within the HTML link’s <a> tag. Here is an example that relates to calling Shadowbox.js content from a website:

<a href="myvideo.mp4" rel="shadowbox;width=640;height=480;" onclick="javascript: pageTracker._trackPageview('/videos/myvideo');">Click here to play my video</a>

Here is the breakdown of what is happening: the video myvideo.mp4 is being called to play in my Shadowbox player at a resolution of 640×480. An onclick JavaScript is also being called at the same time telling Google Analytics to track the page view for the category “videos” for the item “myvideo”. The category does not have to be named “videos” however you will want to choose a name that helps keep things organized because this is what will come up in your Google Analytics Top Content Report.

One last note is that you need to place your Google Analytics Tracking code at the top of your page within your <body> tag and not at the bottom. This is necessary because the tracking code needs to be initiated before the onclick Javascript links can work.

Written by Jeff McIntosh