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.
- You can include video or audio in a web page just using HTML5 tags. But if you want to add some custom controls with it, then you do need to use javascript.
- Browser Support:
- All latest version browsers support HTML5 tags.
- The following browsers support HTML5 video and audio.
- IE9+
- 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:
- These are the basic tags needed to include a video in a webpage, but for extra functions and controls you need to use javascript.
- Audio Tags:
- Basic tags used for audio in HTML5 are:
- These tags have same function as that of the video tags.
- Javascript Audio/Vdeo Methods:
- Some of the extra functions for which you need the help of javascript are given below:
| Tags | Description |
|---|---|
| video | Define a video |
| source | Defines multiple sources for the video element. |
| track | Defines text tracks in media players. |
| Tags | Description |
|---|---|
| video | Define sound content. |
| source | Defines multiple sources for the audio element. |
| Functions | Description |
|---|---|
| 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.
