We have learned new things in HTML5 such as canvas, drag and drop operation etc. Today also, we are going to see a very interesting topic. Placing images on webpage has become quite common. But now we will learn to put videos and audios on web pages using HTML5. Is’nt it interesting. Let’s have some introduction about it.
- We finally have a simple way to include videos and audio clips in web pages.
- Until now, we always needed to download plugins such as flash to display videos in a web page. Now it is almost as simple as including an image.
- Browser Support:
- All latest version browsers support HTML5 tags.
- The following browsers support HTML5 video and audio.
- Chrome 6+
- Firefox 3.6+
- Safari 5+
- Opera 10.6+
- Types of Media(MIME types):
- There are many different types of videos and audios.
- Some of video types are Mp4, Ogg, WebM. Among these Mp4 is the most popular.
- Audio types are Mp3, Ogg, Wav. Among these Mp3 is the most popular.
- If you have a different format for your video, you can convert it with the video converter to a format supported by every browser.
- Video Tags:
- Here we come to the main point of our study regarding video on webpage.
- Some of the HTML5 tags used for video and their description is shown below:
|video||Define a video|
|source||Defines multiple sources for the video element.|
|track||Defines text tracks in media players.|
- Audio Tags:
- Basic tags used for audio in HTML5 are:
|video||Define sound content.|
|source||Defines multiple sources for the audio element.|
- These tags have same function as that of the video tags.
|addTextTrack()||Adds a new track.|
|canPlayType()||Checks if browser can play the type of video.|
|load()||Re-load the audio/video element.|
|play()||Starts playing the audio/video.|
|pause()||Pauses the playing audio/video.|
This was a small intro of audio and video with HTML5. More new things will be cleared while trying this concept practically. So, we will try it in next session.