Continuing with the entries that explain the HTML tags that in my point of view I consider the most versatile and complex, now we will see some tags that allow us to display multimedia content on our website through videos and audios of different formats:
- MP4
- WebM
- Ogg
- MP3
- Ogg
- Wav
The latter is what really makes them special and this is because each browser supports some of the browser formats listed above.
One of the great features that HTML5 brings with it is the inclusion of multimedia content such as audios and videos.
First we will talk about the <video> tag; As we will see in this entry, both tags (<video> and <audio>) have similar behaviors, definitions and attributes and hence the reason for writing a single entry for both tags.
1.0 The <video> tag
In order to use the <video> tag, it must be accompanied by some attributes and other child tags as we will see below.
1.1 Attributes for uploading a video
The width and height attributes are used to specify the width and length that we want the video to have.
We can also specify the controls attribute to indicate that it shows controls such as pause, play, volume...:
And the src attribute to indicate the source URL (video).
<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
Your browser does not support the video tag.
<video>In the HTML code above we specify the same video in two different formats so that it can be viewed in browsers with MP4 and OGG video support; It is also specified that the video display space will be 320x240 pixels and that it present controls.
The ideal is to add the greatest number of formats to guarantee playback in browsers.
If it is an outdated browser such as Internet Explorer 8, the following message will be displayed:
"Your browser does not support the video tag."
In the following link you will see a table with the video formats supported by the browser: HTML <video> Tag.
1.2 Otros atributos de la etiqueta <video>
| autoplay | Specifies to start the video as soon as it loads. |
| loop | Specifies that the video will play again when it finishes playing. |
| muted | Specifies that the video will not play audio (mute). |
You can see the rest of the attributes in the following link: HTML <video> Tag.
2.0 The <audio> tag
Having understood the operation of the previous element, now we go with the <audio> tag which has similar specifications to the <video> tag (apart from loading audios instead of videos); It also has multiple audio supports depending on the browser which you can see in the following link: HTML Tag
The <audio> tag also has the same attributes seen above and at least one audio must be specified:
<audio controls>
<source src="audio.ogg" type="audio/ogg">
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
Develop with Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter