Build a Custom HTML5 Video Player: Free Premium Tutorial
Tutorial Details
- Topic: HTML5, Video
- Difficulty: Intermediate - Advanced
- Estimated Completion Time: 45 Minutes
Download Source Files
Much like the other various Envato marketplaces, our newly launched Tuts+ marketplace will offer a free file each month. For September, that free file/tutorial just so happens to mine! I’ll show you how to build a custom HTML5 video player with Flash fallback support.
Be sure to grab this one for free for the entire month of September. Next month, it’ll return to its original price.
Though the idea of a video-specific HTML element was suggested well over a decade ago, we’re only just beginning to see this come to fruition! Forget all of that “HTML5 2012” mumbo-jumbo; the truth is that you can use the video element in your projects right now! The only problem is that the video players are inconsistent from browser to browser, and full-screen support is, at the time of this writing, only available in certain browsers, via a right-click. Further, what if we want to brand our video player? Unfortunately, there isn’t an easy way to do so by default. The solution is to create a custom player that remedies all of these issues.
While we’re using a great deal of our Premium catalog to populate the new marketplace, it will quickly become dominated by unique tutorials, screencasts, and eBooks! Be sure to check it out if you haven’t already.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Jeffrey Way
Getting Good with JavaScript
Learn how to liven up your webpages, from start to finish. Veteran Nettuts+ author Andrew Burgess helps you Get Good with JavaScript.
Join our newsletter!
UberMenu - WordPress Mega Me ... only $16.00 
RoyalSlider – Touch-Enable ... only $12.00 
Kult House - More
Web Basix
Just getting started? Start with our basix tutorials on the fundamentals. View All Basix Tutorials
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
Nice work, I downloaded the files, but need a big cup of tea :D by the way I hate compatibility it will lead me to quit this field :(
here have a complete html5 video tutorial (video). you may refer it also.
http://click9.net/2010/09/04/html5-open-video-tutorial/
Oh Oh Oh!
Thank you so very much.
here, make hml5 video palayer and examples http://saidyavuz.com/2010/08/html5-video-oynaticinizi-olusturun/
Thx Esra :)
Great file Jeffrey! Will definitely come in handy.
Of course this is the file I just bought.
great job.. btw,, where can I find the video ? sometime it’s hard to find the button :)
Thank you Nettus!
Awww…
I was waiting for something like this to show up on NETTuts but not just for premium users.
hi sheraz you are right
What’s with the XEROX code?
That’s awesome Jeff. Good jorb!
Great! thanks!
Does it work on IE6?
how many premium tuts release in a month?Im just curious
anyway , another great tut from jeff
Arnold – We post one new one each week. And then, we also make the video tuts available for download there as well.
Of course, that’s just us. All the other Tuts sites have a bunch of stuff available each week too.
Really for each week, Thanks Jeff for letting me know
ok premium here we go..
Hey JW,
Great writeup! One critique I may off as I read through your code. You may want to change this line:
// Helpful, but might clobber other class names defined on the documentElement
document.documentElement.className = ‘js’;
to this:
// Helpful & Safe!
document.documentElement.className += ‘ js’;
Now, normally people don’t put class names on the document element, but ya never know =P So I’ve just found the += ‘ js” to be a bit safer.
Cheers!
So with this one there is no video?
Build a Custom HTML5 Video Player: Free Premium Tutorial …
it says FREE but you have to be a member …that’s not FREE
I was fooled by that 2…..
It is a free file of the month, So it is free :)
Download:
http://marketplace.tutsplus.com/item/how-to-code-a-custom-html5-video-player/122026
Hey Peter, membership to the Tuts+ Marketplace is free.
I cannot find the video to download… Is it still posted?
I would like to know if I put one premium tutorial for sale, in case tutsplus wants to publish it as premium on their network, do they pay an agreed rate as usual, or can they just take my tutorial for sale ?
I want to know if they reserve that right, so I can start doing custom tutorials as well.
What really do you need besides a browser that supports HTML5 and the video tag? *lol*
sorry but I have to say, a “free premium” tutorial? How ironic :P
owwww my firendd great great !!
very thanks
Pretty neat tutorial with a good amount of humor mixed in. However, I was kind of disappointed with the number of typos.
I’m happy that this covers fallback support for IE. Quality material.
great tutorial. I always enjoyed reading your article.
Great tutorial. Thank you!
Nice one, Jeff.
Agree with Brian above about the change to the init() function:
document.documentElement.className += ‘ js’;
A couple requests for the next one (in addition to what you’re already going to cover, ie Flash fallback & volume):
1. Making the poster frame be the displayed image until the player or play button is clicked.
2. Making the poster frame turn back on at the end of the movie. (In your playPause method probably??)
-John
Hello, Could you tell me where is the video?
I can’t find it anywhere in this post!
You have to buy it, which makes sense since it is free….
Thanks for the video tutorial :)
Thx. It’s great.
This isn’t working in chrome, the controls don’t show up. It works fine in every other browser, but for some reason it’s just not working in chrome. I even tried uploading the provided source files directly, it just plain doesn’t work.
Odd thing is it works in chrome via MAMP but not when it’s actually uploaded to the internet.
Anyone know why this might be?
I know this was written a while back, but is there a way to integrate a “playlist”.
Maybe an onclick to an image to change out the source of the video?