The fifth standard of HTML introduced by W3C introduced many new media elements. In the previous versions of HTML, it was a pain to add a video or audio in your webpage. It was usually achieved by adding plugins and a lot of code.
HTML5 has made it much easier by introducing media tags. These tags include
<video>, <audio>, <source>, <track> and <embed>.
How HTML5 has made things easier for use, lets checkout the following snippet.
This is code for creating a FLASH Player.
And this is code for HTML5 Video Tag. See all above code is replaced by a line of code and it gives us a great video player.
Note: In my experience some browsers like Firefox was not running mp4 video instead it played .ogg file. so a try to include
src = "myvideo..ogg"
You can convert mp4 files to ogg file format from http://media.io/.
This is video tag, its possible attributes could be:
|| to provide the URL of the video.
|| defines height of video element in pixels.
|| defines width of video element in pixels.
||to display default video control set of browser.
|| to start video automatically.
|| to mute the video initialy.
|| to play the video continuously in a loop.
|| displays an image instead of first frame of video.
|| to tell the browser how it should preload the video. It may have three values. None(no preloading), metadata(just load the metadata of video eg. timing etc) and auto(its default and lets the browser to decide by itself).
If we want to add a video which start playing automatically and is muted when web page is loaded or we want browser to provide control set then, just need to add the following code
In the same way you can use the other attributes as you need. We should provide height and width of video element so that it does not disturb the layout or design of the whole page. Look at the video tag’s src attribute, we want to serve a video file of mp4 format.
If some browsers like Firefox does not run mp4 video or if my browser doesn’t support this format or video tag? the question is how can we handle the cross browser issue? The solution of this problem depends on the placement of proper source. We can add different video type formats using multiple source elements inside video element. As you know HTML code interpreted browser read the code line by line so if the browser does not support html5 or any file format it will ignore what it does not understand and will move to next line where it can find a suitable format.
<video controls width="200" height="210">
<source src="myvideo.mp4" type="video/mp4">
In the code above if browser does not support mp4 format it will ignore mp4 format and will pick webm format.
Possible attributes those can be passed to source element.
||specify the type/format of the video, we can also specify the codec used to encode the video.
|| to specify the intended media, using css3 media queries
vp8" ' media="screen and(min-width:1224px)">
This tag defines a video file of webm format encoded with the codec vp8 and intended devices are desktops and laptops.
HTML5 Audio Element
Before HTML5 there was not standard control for playing audio, but instead developers / designers used some 3rd party code plugin like flash in their code. But now in HTML5 an audio control is provided , which provides a standard way to embed audio inside a web control. To play audio file in HTML5 page we use audio tag liek code below.
<source src="myaudio.ogg" type="audio/ogg">
<source src="myaudio.mp3" type="audio/mpeg">
If we add controls attribute, browser will display play, pause, or volume controls. We can add multiple source tags inside audio for multiple file formats so that if some file format is not supported by some browser it will move to next file format given and if it supports then will play. Currently mp3, wav and ogg formats are supported.
HTML5 Audio formats
||Defines sound content
||Define multiple source elements for audio or video plugin
There are other events that can notify when an audio is paused or or played.