Tuts+ Marketplace

How to Code a Custom HTML5 Video Player

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.

What this Tutorial Covers

  • The appropriate mark-up for the new video element.
  • Add Flash fall-back support for IE.
  • Create custom controls.
  • Offer full-screen support
  • Scrub through videos

What’s Coming Next

A tutorial that covers far too much helps no one. This tutorial gets us started, and allows to build a working video player. In the follow-up to this Premium marketplace tutorial (which will be free to all purchasers of this tut), we’ll take our video one step further, and integrate a volume control, a clock, and a plethora of other cool features.

You must sign in or sign up to purchase this item.

$3Personal Licence

$3

Personal Licence self education and training in the techniques and methods shown. - Details

226 Purchases 26 Comments

Buyer Rating
12345 ( 26 ratings )
JeffreyWay

JeffreyWay

  • Has been a member for 3-4 years
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Contributed a Tutorial to a Tuts+ Site
  • Attended a Community Meetup
  • Interviewed on the Envato Notes blog
  • Envato Staff
  • Forum Moderator
  • Author had a Free File of the Month
  • Exclusive Author
  • Blog Editor
  • Sold between 10 000 and 50 000 dollars
  • Bought between 50 and 99 items
  • United States
  • Referred between 10 and 49 users
View Portfolio
Created 30 August 10
Compatible Browsers Chrome 4, Chrome 5, Firefox 3.6, IE7, IE8, Opera, Safari 4, Safari 5
Difficulty Advanced
Format Written
Files Included .HTML Files, JavaScript JSON
Web Development Languages Used CSS, CSS3, HTML, HTML5, JavaScript
by
by
by
by
by