Category: Projects

HTML5 Video Player – Version 1.0

Posted on March 12th, 2010 in Projects, Video, Web.
HTML5 Video Player Version 1

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.

2 Comments

A Very Daft Halloween

Posted on November 2nd, 2009 in Projects.

After going three straight years without dressing up for Halloween, I decided that I was long overdue for dressing up and pretending to be someone else for a weekend. Anyone following me on Twitter or connected to me on Facebook or Flickr has seen pictures for months of my build of Thomas Bangalter’s helmet. Thomas is one of the two members of the house sensation Daft Punk. You’ve heard them even if you think you haven’t.

Ingredients needed to become Thomas for a weekend:
1 Pair Black Leather Pants
1 Black Single Row Grommet Belt
1 Black Leather Jacket
1 Black Mask
1 Pair Leather Gloves
1 Pair Black Shoes
1 Skateboard Helmet
6 Sheets Cardstock
1 LED Belt Buckle
1 Pad Metallic Silver Origami Foil
1 Can Fiberglass Resin Jelly
2 Cans Bondo Body Filler
6 Sheets 80 Grit Sandpaper
3 Sheets 120 Grit Sandpaper
300 Screw-backed Studs
1 Safety Visor
3 Square Ft. Window Tint
1 Can Spray Primer
1 Can Metallic Silver Spray Paint
4 Tubes Super Glue

The three things that require manually labor to create are the helmet, the jacket, and the gloves. We’ll start at the top and work our way down.

To make the helmet I followed the instructions on the “Make a Daft Punk Helmet” Instructable available here. I substituted spray-on tint for a roll of tint and also added an LED display in the visor which was accomplished by taping a programmable display from an LED belt buckle into the helmet just above eye level. The entire helmet-building process took around 25 hours (not counting the time waiting for things to dry or cure) put in on weekends.


Right front of helmet (cardstock only) first layer applied
Cardstock and Helmet Layer of Fiberglass Jelly


Helmet w/ ears attached Full Layer of Bondo
Ears Attached Full Layer of Bondo


Front right of the helmet nearly-complete form Full Layer of Bondo
Sanded for Painting Almost Fully Painted

Moving on to the jacket, I had ordered a jacket from eBay that was to be the jacket for the costume, but by Thursday it hadn’t yet come. In a last-minute frenzy I used my lunch break last Thursday to scramble a jacket locally and found one that was good enough to work at Buckle. A week before I had the jacket I printed out the Daft Punk logo at a width of 12 inches and placed studs along the logo to create a dot-pattern to tape to the back of the jacket to know where to puncture the jacket for the studs. Using a knitting needle I sat down for five straight hours Thursday night and studded the entire pattern before passing out with a sever case of numb hands and exhaustion.


Logo Pattern for Jacket Altered Back of Jacket (finished)
Stud Pattern Completed Jacket

The gloves were fairly simple to accomplish after I found some metallic silver origami foil at a craft store. Before this project I was unaware of the existence of origami foil. It worked great and is much less prone to wrinkling and tearing like tinfoil is. With my hand in the glove, I measured where my fingers bent inside the glove and made segments of glove treatments cut out of cardstock. Those cardstock pieces I then traced onto sheets of the origami foil, cut out, glued the foil to the cardstock counterpart, and glued the back of the cardstock to the glove. The entire glove process took about two hours.


Cardstock bases for glove treatments Complete pair of gloves
Cardstock Base Completed Gloves

That brings us to the completed costume which I wish I had more pictures of. Plenty of people I didn’t know took pictures with me in my costume so I hope to find them somewhere on Facebook in the coming week. Make the jump over to my Flickr set dedicated to the project to check out all the pictures from the project as well as any more pictures of the entire costume I come across.


Rockin Fonz Pose
2nd Place Scopin

2 Comments

VideoWrangler WordPress Plugins

Posted on October 9th, 2009 in Projects, Web.

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.

No Comments

Previous Entries