JMDesign compatability site updates

Saturday, August 21st, 2010

Category: Articles

Over time your website runs the risk of having out dated technologies and may lack features that allow it to play well with new technologies. When I created the JMDesign website a year ago Flash videos players were all the rage. I decided to use JW Player as my Flash video player because of its rock solid platform, options and support. Times have changed and as Apple steadily becomes a force in the web standards industry, HTML 5 is in and Flash is being phased out to play video on the web. As you probably know any iOS device such as the iPhone, iPad or iPod Touch cannot play Flash natively. I looked for alternatives, but none presented themselves until last week. Vimeo announced an embed code that detected device connectivity and delivered content accordingly. This was huge because I could now create a site that would work across any platform.

Over the past week I have made these updates to my site

• Changed all the video embed code (JW Player and Vimeo) on my website to Vimeo’s new embed code.
• Uploaded all the videos my website to Vimeo that were being played from my server as MP4 and FLV files.
• Added a Twitter feed to the Pro Blog and a Follow us on Twitter link to all site footers.
• Added social media links to every post on the Pro Blog.
• Added social media links to the player page.

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