Creating the HTML5 Video

Years ago, before HTML5 you could not play videos and show them on web pages, well you could, however you could only achieve that with a plug in such as flash. Web developing and design have come a long way through the years with developing of HTML5 video element which specify the standard method to embed video into a web page. In regards to browser support that supports the <video> element are Safari, Internet Explorer 9 and higher, Firefox, Chrome, and Opera. Earlier versions including Internet Explorer 8 are not supported by <video> elements.

How it actually works

When you actually want to embed the video, you will also add a “controls” attribute as it add the controls needed for volume, pause, play, etc. Other attributes which are great to add is the height and width attributes simply because when you do not set it, the browser does not know the video size. Without that, in effect will cause the web page to flicker while it is loading the video. Currently only three formats support the <video> element and that is Ogg, WebM, and MP4, but all three support not all browser types. For example, Internet Explorer and Safari do not support WebM or Ogg, but only MP4. HTML5 effectively defines the DOM methods, events, and properties for the <video> element. It allows you to load, pause, play, adjust volume, and set the duration. Three different tags within HTML5 is the <video> tag which defines a movie, the <track> tag defines the text tracks within media players and the <source> tag defines the various media resources for media such as the <audio> and the <video>.

<video width="320" height="240" controls>
  <source src="forrest_gump.mp4" type="video/mp4">
  <source src="forrest_gump.ogg" type="video/ogg">
  <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
  <track src="subtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian">
</video>

However, there is no need unless you want to learn all the intricate ins and outs of web development and design to even worry about the coding and adding of video to web pages if you are a newcomer to the web developer’s scene and want to create your own videos on web pages. Several great resources online allow you to create videos in three easy steps. Intricate web developing does not even have to feature in your vocabulary when you use EASY HTML5 VIDEO to create and add it to your website. http://easyhtml5video.com is one of the best free html5 video wizards with simple to use and easy to understand instructions. You do not have hassles about browser support as it works equally well across all browsers including Android, iPhone and iPad.