Bonus Barrel! Check out some of these remixes from the Justin Faust archives.
Missy Elliot – Work It (Justin Faust Remix)

Daft Punk – Harder, Better, Faster, Stronger (Justin Faust Remix)

Want Crizzly to close its mouth and play more music?
Hit play below.

Compatibility: Chrome, Firefox, Opera, Safari
Powered By: HTML5, CSS, JavaScript
Extra Libraries: MooTools (Sliders, Fades)

What’s up with HTML5 video anyway?
For the original project outline check the version 1 post here.

Version 1.2 Functionality
Version 1.2 is a core functionality update instead of an addition of features as I had originally planned. Everything from version 1 remains intact with the javascript controls optimized for smoother operation. The most recognizable difference in controls between versions 1 and 1.2 is the seek bar. Take a quick look at both versions and move the seek bar from left to right. Version 1.2 has removed most (if not all) of the stutter from the seek bar while dragging.

Player control code in version 1.2 has been corrected to allow video playback in Firefox and with the recent release of an Opera update (version 10.53) the video player now works with Opera as well.

Next Release Additions
The next version of the player will have an option for Flash fallback. If no Flash fallback is set, the player will display a graphic showing that HTML5 video isn’t currently available for their browser. Code from the user end will be minimized by using a custom tag that will be read and handled appropriately by the video player and multiple instances of the HTML5 video player will be possible.

Running Into Issues?
Did you try using the video player with Chrome, Firefox, Opera, or Safari and it didn’t work? Let me know in the comments and I’ll try to track down the issue. Before I posted the final version 1.2 code here I tested the player in Chrome, Firefox, Opera, and Safari on Mac OSX and Windows Vista, so there shouldn’t be any issues.

Compatibility: Chrome, Safari
Powered By: HTML5, CSS, JavaScript
Extra Libraries: MooTools (Sliders, Fades)

How does it work?
In HTML5 you won’t need any Flash components to present videos to your viewers. With HTML5′s video tag you’re able to embed video into your webpage with minimal effort and the browser will take care of the rest. A simple, barebones video embed in HTML5 looks like this:

<video width="512" height="288" controls>
    <source src="your_video_file.mp4" type="video/mp4"/>
</video>

When the page is loaded the above code will display your video with a width of 512 and a height of 288 along with the default video controls for the browser. Easy enough? Currently, you have to put in a little extra work to ensure that each browser (Safari, Chrome, Firefox) can play the embedded video file. Safari and Chrome can display h.264 video while Firefox supports OGG Theora video. Luckily, HTML5 helps us out by allowing us to include multiple video sources within the video tag. If your browser doesn’t support the first source listed then it will check each source listed after until it finds one it can play.

Now Change It Up
The browser’s handling of the video tag is perfectly fine when the word “controls” is present in your video tag, but remove that part of the code and the video loads with no player controls. Now that the browser’s version of the video controls are gone, people who really want to get their hands dirty can build their own HTML5 video player controls. The video player controls that I built use a combination of CSS and JavaScript. The CSS controls the look of the player; the JavaScript gives the player functionality.

Writing these controls yourself requires a lot more work than using the basic HTML5 video tag so why bother going through the trouble of writing your own player controls? Writing your own controls allows you to control the user experience and deliver the same experience across all browsers. Want to have a button on the video player that allows the user to find out more about the content within the video? Add it. Want to add a brand to the video similar to the way network television does? Float it over the video. With custom controls you’re able to create a unique user experience that they only get by using your video player.

All of the above reasoning can be tossed out of the window if you’re like me. The capability is there to create custom video controls for HTML5 video content. Let’s try it out!

Version 1 Functionality
This initial version of the HTML5 video player is fairly straight forward and offers all of the basic controls you’d expect a video player to have. The player controls are visible when the video is paused or when the user’s cursor is over the video.

• play/pause button
• seek bar
• buffer indicator
• volume bar
• time information

Next Release Additions
The next version of the player will add Firefox support as well as a Flash fallback for browsers that don’t currently support the HTML5 video tag. For browsers that support HTML5 video the player will include a preloader graphic which will preload the video controls and a portion of the video before showing the video and video controls.

Running Into Issues?
Did you try using the video player with Safari or Chrome and it didn’t work? Let me know in the comments and I’ll try to track down the issue. Before I posted the final version 1 code here I tested the player in Safari and Chrome on Mac OSX and Windows Vista, so there shouldn’t be any issues.

Parliament – Chocolate City (original print, still sealed)

Frank Zappa – Apostrophe (‘) (original print, VG condition)

The Mothers (of Invention) – Fillmore East – June 1971 (original print, good condition)

The Mothers of Invention – Over-nite Sensation (original print – near mint condition)