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.
Eric, this played really smoothly on my MacPro running Safari 4.0.4
I’ve been building Flash based media players for years as part of my job, but lately I have learned to hate Flash based media on the web thanks to its shoddy memory handling (read: leaking). I’m frankly quite sick of it. This is refreshing to see, the future of web media is plug in free. I’m tempted to reauthor all my video content for my site to use a HTML5 player.
However, the Flash environment allows easy fullscreen modes, data loading/preloading, event listening/triggering etc. I’d like to see what you can do to address those parameters as that would be killer once solved. I hate not being able to view most web video on my iPhone too, I cant wait for everyone to catch up
Good work sir!!
Fullscreen is something that I will tackle later on, but preloaders are very possible. I will have a working preloader up for the next version of the player. The current issue with buffer status and preloaders is that Firefox has yet to implement any sort of buffer status for HTML5 video so I’ll have to think of a solution that only shows the preloader on Safari/Chrome while remaining preloader-less on Firefox until buffer status functions are implemented.
As for listeners, JavaScript can handle almost anything that Flash can, and more reliably so. The IE crowd will have to stick with flash for now since who knows when the video tag will be implemented in their browser.
Looks nice.
You should probably make your controls keyboard accessible — you can do this by adding tabindex=”0″ on the buttons, and listening for keydown events or so.
You should maybe also add the controls with script or at least make sure they’re hidden when script is disabled so that the user can use the browser’s controls instead.
The controls don’t seem to work fully in Opera; the play button doesn’t turn into a pause button, and the controls aren’t hidden when moving away the mouse. I could also drag the seek knob outside the seekbar.
In the error console I see WRONG_ARGUMENTS_ERR being raised for buffered.end(). The spec requires an argument there. You should probably use buffered.end(bufferend.length-1), but you need to check that length is greater than 0 first, since in Opera it’s always 0 currently, and end(-1) will throw INDEX_SIZE_ERR.
This initial version is a little sloppy, but so far I’ve been including all of the necessary arguments for functions in the new version I’m working on. I’ll make sure I covered the ones you pointed out above as well. Thanks!
And I did add the controls with a script in the new version, the javascript looks for <div id=”videoControls”></div> and inserts the appropriate code within that div. Version 1.2 should be finished up and posted by the end of the week, so watch for that. I’m not planning on this player being completely usable and distribution worthy until version 2, but it does help to get some extra eyes on the code and opinions along the way.
The next version is also working with FireFox.
[...] What’s up with HTML5 video anyway? For the original project outline check the version 1 post here. [...]