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.

View the live site here: 3ddotgameheroes.eu

Site home page + order info

Cast -> NPC page

System -> Character editor page

Tell a friend form (sends recipient an email)

Media page + language selection open

A little Easter egg: If you are at a page with a blinking arrow at the bottom right that you click on to move on to the next content you can also scroll through the content by pressing the “a” button on your keyboard. A fun NES-style addition to a retro homage for the PS3.

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.

Re: Last week’s mix – The Drums and Basses mix topped out at #3 on the front page! Thanks to everyone that listened last week, let’s see if we can keep up the momentum for this week’s mix.

I’ll give another update on my first mix’s progress once it gets close to the end of its week long run. Be on the lookout for more of my mixes on my mixcloud account.

It’s less than two weeks until Christmas! Want some free music?

Chromeo – Night By Night (Skream Remix) [found on XLR8R]

Gucci Mane – Danger’s Not a Stranger (Diplo Remix) [found on XLR8R]

Hadn’t paid much attention to tracks along those lines, but after hearing those two remixes by Skream and Diplo I’m going to start paying a lot more attention. Great tunes to slow it down with.

If you watch Adult Swim then you already know about the ATL RMX album that is up on their website for free. If you haven’t heard, or if you just haven’t gone to check it out yet, you can listen to it and download it here. The DJA and XXXChange remixes are the highlights of the album.

I also started doing some short (15 minutes) mixes for a podcast run by some friends. I’ll throw some links up to them once more are released. I think they’ll be serving up the mixes as MP3 downloads if you want to just listen to the music without all of the talk.

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.

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: