Line25

Handy Tutorials & Tools for Embedding HTML5 Video

Read the full post

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.

Video for Everybody!

Video for Everybody!

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 Video by HTML5 Rocks

HTML5 Video by HTML5 Rocks

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 <canvas>.

Add HTML5 Video to Your Site

Add HTML5 Video to Your Site

Opera’s Vadim Makeev shows the way to embed HTML5 video without the use of plugins in this article for .net magazine. As well as looking at serving a fallback Flash player, this tutorial also covers the process of developing custom player controls with Javascript.

Embed Videos In Your Web Pages Using HTML5

Embed Videos In Your Web Pages Using HTML5

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.

HTML5 Audio and Video: What you Must Know

HTML5 Audio and Video: What you Must Know

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.

Dive Into HTML5 – Video on the Web

Dive Into HTML5 - Video on the Web

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.

SublimeVideo

SublimeVideo

Video.js

Video.js

MediaElement.js

MediaElement.js

Projekktor

Projekktor

HTML5Media

HTML5Media

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.

YouTube

YouTube

Vimeo

Vimeo

Free web shadows pack for every subscriber

Join the mailing list to have new content delivered straight to your email inbox. Every subscriber gets a free pack of realistic web shadows.

Written by Chris Spooner

Chris Spooner is a designer who loves experimenting with new web design techniques collating creative website designs. Check out Chris' design tutorials and articles at Blog.SpoonGraphics or follow his daily findings on Twitter.

  • http://www.sedatkumcu.com Sedat Kumcu

    Thanks for this great article. Best regards.

  • http://techonamission.com Tim Kaemmerer

    I recently used video.js on a project. It's a great video player and the fallback to flash is nice for those browsers that don't support HTML5 video. I didn't know about the others. I'll have to check them out.

  • http://www.digitalcrew.ie/ web designers

    Agreed, these articles shows that web designing and development is not only about programing, it include lots of artistic things like color combinations, graphics, photo editing and animation with all these a very good and expert level knowledge of technologies. It is not easy like it seems.

  • http://www.incomefor.com Income For

    Its hard to imagine all the things we used to have to go through before HTML5. Man, did I hate flash with a passion.

  • http://www.jtechcommunications.com JTech Communications

    Excellent guide to move away from Flash, benefit from HTML 5 video and advance your website development.

  • http://www.meroserver.com web design nepal

    Thanks for a great article…

    • Vinoth

      Nice article

  • http://uptenlist.com uptenlist

    youtube is most easiest way for embedding videos

  • http://www.weblinksdo.com/ Web development

    your ariticles are very good.
    <a href="http://www.weblinksdo.com/">Web Development</a>

  • http://www.vironmedia.co.uk Viron Media Web Design

    Some great resources there for HTML video. Vimeo is really cool. It's growing more and more popular.

  • Adnan

    Hi Chris
    I have a big problem :(
    I have site where people can watch movies with translate from balkan area(bosnian/croatian/serbian)
    So first in lot situtations even if I add translate it doesnt show and second there are not letters that we use in this language area(š,đ.ć.ž.)
    Thank you

  • http://www.sysites.com Set Your Sites

    I really like the Vimeo interface. Very clean and simple. Very good information in your article. Thanks

  • http://www.tutosytips.com johanso

    Thank you very much for the tip, I was just looking for a player to html5

  • http://wemakedesigns.org/ Hyip

    All the videos are preferably good for all the newbies who are just into the web developing and designing world.

  • http://twitter.com/ptamaro ptamaro

    Video.JS is awesome and super easy to work with, Projekktor is cool as well. Good post…