The advent of Html5 has radically changed how modern day web pages are coded. In many ways HTML5 code is less with more. A more condensed code base with more options than previous versions of html. One new aspect of HTML5 is the video tag. The new tag comes complete with a library of pre-defined audio and video controls built in that help condense code and frankly make it easier to look at and understand. That being said, I wanted to give a little explanation of new file formats and code configuration.
There’s been a lot written about the newish HTML5 video tag. This post’s purpose is to give more information about what the new file formats are and how to implement them on your own web site. As it stands there are 3 supported video formats one of which is a augmented version of the previous mpeg files of the past. The other 2 are developed by organizations interested in tools for all users.
Supported Html5 Video Formats Defined
MP4: MPEG-4 Part 14 or MP4 is a digital multimedia format most commonly used to store video and audio.
WebM: WebM is a video file format intended primarily for royalty-free use in the HTML5 video tag. The WebM Project releases WebM-related software under a BSD license and all users are granted a worldwide, non-exclusive, no-charge, royalty-free patent license.
OGG: Ogg is a free, open container format maintained by the Xiph.Org Foundation. The Xiph.Org Foundation is a non-profit corporation dedicated to protecting the foundations of Internet multimedia from control by private interests. The creators of the Ogg format state that it is unrestricted by software patents and is designed to provide for efficient streaming and manipulation of high quality digital multimedia. Thanks Google.
HTML5 Video Tag Implementation
< video controls >
< source src="simpsons-comeback.mp4" type=video/mp4/ >
< source src="simpsons-comeback.webm" type=video/webm/ >
< source src="simpsons-comeback.ogg" type=video/ogg/ >
Your browser does not support the video tag. You can download this video here.
< /video >
HTML5 Video Control Methods & Properties
There is a whole gallery of attributes that can be added to your video tag that can be seen here. The following are commonly used Html5 video methods and properties.
pause() - Pauses the currently playing audio or video
autoplay – Sets video to play as soon as it’s loaded.
controls – Adds controls to your videos.
loop – Control sets the video to loop.
muted – Mutes video
preload – Tells the web page to load video while page is loading.