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.
