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.

The VideoWrangler project is my work on the old VideoPress plugins by Charles Iliya Krempeaux as well as the vPIP plugin by Enric Teller in order to make the plugins compatible with the newest versions of WordPress and to reduce script size at plugin runtime.

The VideoWrangler plugins and complete documentation can be found on the VideoWrangler documentation page here.

The two blogs that I used as the basis for the plugin updates are http://www.ryanishungry.com and http://www.mikemoon.net. Their problem? When upgrading to the newest version of WordPress the plugins which drove their site quit working, yielded errors, or stopped the entire page from loading. Tracing through the plugin code I narrowed the problems down to two main sources: WordPress’ database structure had changed and the large amount of information contained on these blogs was exceeding the maximum allowed php script size on their servers.

With problems pinpointed, VideoPress was on its way to working once again within a few hours by updating references in the VideoPress code to entries in the WordPress database. The script size issue lead me back to vPIP to create a leaner function used to fetch chunks of data from the database. The original way VideoPress would gather vPIP data was for vPIP to supply VideoPress with a list of every single video entry that existed on the blog. While that works fine for small numbers, Ryanne and Mike’s blogs had years of back video catalog that made calling all of that data at once an enormous waste of space and resources. To scale back demand on the server I created a new function within vPIP that was only used to recall chunks of archive video data to be displayed on each archive page or to be displayed in the recent videos reel. This way the function would only return a set number of entries (which is specified in the plugin’s preference) as opposed to retrieving all of the site’s entries.

The updated version of the VideoPress project has been renamed as VideoWrangler to signal a fork from the original set of plugins and a change in project management. Updates to the VideoWrangler plugins will begin in November (time allowing) and will address the functionality requests from the video blogging community. The most up-to-date version of the plugins will always be available for download as a complete package or separately on the VideoWrangler documentation page.

Built using: Flash CS3 and ActionScript 3
Based on: ‘Flash video template: Dynamic video playlist‘

Video Player Demo Page

Version dev.3
This version brings the Flash Player even closer to complete. The sharing options in the right pane are now all functional as originally planned. The email button pops up a form that asks the user for their name, email address, and a friend’s email address and emails the current video that the user is watching to their friend’s email address. The link button pops up a form that displays the current video’s URL along with a copy button that copies the URL onto the user’s clipboard for them to paste elsewhere.

Small bug fix:
Links no longer return null link values.

I am going to do some more testing on the flash player itself to make sure there that no more bugs exist on the player and then working towards creating a control panel for the flash player to make maintenance easy. It will include the ability to upload videos and tag them with content tags. Those content tags will be used to generate related video reels for all of your videos. The control panel will also eliminate the need to update any XML by hand, streamlining the process of adding videos to the player. If you find any bugs in the flash player leave the bug below in the comments section.

Built using: Flash CS3 and ActionScript 3
Based on: ‘Flash video template: Dynamic video playlist‘

Video Player Demo Page

Version dev.2
UI bugs addressed:
UI panels no longer stop mid-animation.
UI panels no longer stick on screen.
Adjusting the seek bar no longer causes the bottom UI panel to stay visible.
Cursor no longer flashes when placing it between related videos thumbnails.

Plans for Version dev.3
The next release of the player will address the sharing options of the player. Email and link options will pop up a new window within the flash player that will allow the user to fill out a form to send the video to a recipient (email) or display the videos URL along with a copy to clipboard button (link). The video player will also be updated with the ability to link to a specific video in the playlist so that you can share the single video you want to share as opposed to the entire playlist. After dev.3, focus will turn to building an administration panel in PHP to allow for easier control of the video playlist. Once the administration panel is completed, the player will be packaged and released for general use.

Rock School Website
I believe this site was put together back in mid-March. Most information on the pages were static and didn’t need to be updated much so the site does not utilize any content management system. To make it easier for the client to make future updates I split up the files into small sections to make them easier for a normal person to digest and put them all together using PHP files that gather up all the pieces for display. The “page” that gets update most frequently is the “Latest Updates” column. Updates to that are made simple to do by only needing to copy and paste some outline HTML code into the latest updates HTML file and fill in the rest. All elements are named and commented sufficiently enough for updates to remain simple and self-explanatory. The site has since been turned over to the client and reflects not only my own work, but also the updates made by the client over the past few months as well. Site designed with Omar Mejia who was also behind the Rock School’s new logo displayed on the top left of the site.

ForThoseAboutToRockSchool.com sample:

Yoga Studio Website
A very simple website with quick-to-access information and a lot of impact, MYWStudio.net was designed by Omar Mejia and then turned over to me for implementation. Before getting to work on turning the photoshop files into living renditions of CSS and HTML, I made small edits to the site to make it into a more searchable and SEO friendly website. This site is definitely one of the more lightweight designs I have implemented and it was fun working with the design to make it even lighter on load times and file sizes. Due to the lightweight and fairly static nature of the content on the pages, future updates on this project will be straightforward.

MYWStudio.net sample: