When a person making an audio or a video, chooses a format to encode their multimedia content. To view this encoded content, the viewer should have a corresponding decoder installed in their system. This encoder and decoder software is often referred to as a codec (meaning; coder/decoder or compressor/decompressor). Some video encoding formats are H.264, VP8, DivX, Theora, etc. Some audio codecs are MPEG-4 Audio, Layer 3, which you might recognize as MP3, and AAC, which is mostly used by Apple. Vorbis is another audio format, mosly used with an Ogg container. Earlier mentioned WebM is meant to be used exclusively with the VP8 video codec and the Vorbis audio codec.
As mentioned earlier, to view audio/video files, browsers should either support those formats or use a plugin program to decipher these formats. Luckily all popular browsers support or have some plugin program for it (mostly 3rd party programs - e.g: Adobe flash). With HTML5 however, the need for such 3rd party plugin is expected to diminish.
The most common way of including multimedia content into a web page has been to embed an audio/video file and making the user click a button and make the content play within the page. For this to happen, the browser that you are using should support the format of the media. Otherwise you'll have to install a plugin (helper program) to support those formats.
In older browsers the way to include multimedia has been to use the <object> or <embed> tag.
In HTML5, there are new tags for these. <audio> and <video>
So how to cope up with all these formats in new HTML5. It's indeed complex. Answer is to use multiple formats and let your web page in clients browser try to use all those formats, so that there's high chance of making your web page viewer view or listen to the content. So to have multiple formats of your audio/video content, you'll have to use some Software that can convert your main data file to those needed formats. Popular VLC media player can be used for basic usages. You can still include flash formats since flash plugin support is still widely used.
To include a video content, in HTML5 we may use the following format for example.
<video src="myvideo.mp4" width="360" height="240" controls></video>Some possible attributes of <video> are -
- autoplay - Plays the video when the page loads. generally not a good idea in usability perspective
- preload - This attribute will pre-load the video. This is good if the video is the central part of your page. Not good if it's not since it'll be a wastage of the bandwidth
- controls - Controls attribute determine if a default set of control buttons should appear. Highly recommended to include this
- loop - Restarts playing the video once it finishes playing
- width - Sets the width of the media box
- height - Sets the height of the media box
<video width="360" height="240" controls> <source src="yourvideo.mp4" type="video/mp4"> <!-- Helps in IE and Safari --> <source src="yourvideo.ogg" type="video/ogg"> <!-- Helps in Chrome and Firefox --> <source src="yourvideo.webm" type="video/webm"> </video>What if someone visits your site with browser that still doesn't support HTML5, we may use the older <embed> tag and use the flash application/x-shockwave-flash type to work with the flash plugin.
<video width="320" height="240" controls> <source src="yourvideo.mp4" type="video/mp4"> <source src="yourvideo.ogg" type="video/ogg"> <source src="yourvideo.webm" type="video/webm"> <embed src="yourvideo.mp4" type="application/x-shockwave-flash" width="320" height="240" allowscriptaccess="always" allowfullscreen="true"> </video>Similarly <audio> tag supports all the parameters as the <video> and the syntax is very similar.
No comments:
Post a Comment