Add to Flipboard Magazine.
One of the most exciting features of HTML5 is the ability to embed audio and video files without the need of the Flash plugin. Browser support is still a little iffy but there’s enough documentation and workarounds available to get your multimedia content up and running to your entire audience. This post rounds up a range of useful articles, tutorials and resources that will help you embed video content on your website using pure HTML.
HTML5 Video Tutorials & Articles
The best way to learn anything in life is to dive right in and get your hands dirty. This collection of articles and tutorials will fill your brain with all the necessary information and take you through the process step by step.
Just want the skinny on HTML5 video embedding? This handy overview from Camen Design provides the full code required to not only embed a video using the
<video> element, but also falls back to a Flash player for non-supporting browsers. Simply fill in your video details and away you go!
HTML5 Rocks is a fantastic site for getting to grips with all the new elements and features of HTML5. The HTML5 Video section in particular describes the process of embedding video using the
<video> tag, as well as an example of integration with
Moving on to some theory based articles, this first post by Webmonkey talks about the challenges of browser support, formats & codecs and provding a Flash fallback when dealing with HTML5 video embedding.
Nettuts+ provides a thorough presentation of everything you might ever want to know about HTML5 video, from a brief history of HTML5 multimedia to a complete dissection of the
<video> element and its various attributes.
Chapter 5 of the biblical Dive Into HTML5 website provides all the advanced details about the codecs and video containers supported by the various browsers and lists some handy tools you can use to convert and encode your videos to reach the widest audience possible.
HTML5 Video Players
Now you’ve learnt all about how to embed your own HTML5 videos, unless you’re getting stuck into designing your own skin, you’ll need a set of controls in the form of a nice UI for your video player. Here’s some ready made examples you can download for free.
The Easy Way Out!
If all this HTML5 video embedding business looks a bit complicated, there’s always the option of using one of the many video hosting websites – The two popular ones being YouTube and Vimeo. Both these websites not only allow HD video embedding with their custom players, but all the hassle of hosting and serving the video file is covered.