This topic was an important factor for the creation of HTML5, because previously when we wanted to place our users some music player or video, only could interact those users who accessed our website through the use of a computer, being unable to enjoy this, the users who accessed a mobile device or tablet.

For many users this can be very frustrating, and it is not for less considering that currently most of the users who surf the Internet do so through the use of a mobile device or tablet.

One of the biggest advantages of using HTML5 is that it allows us to use dedicated elements for audio and video, which are called: <audio> and <video>. Because the HTML5 was launched several years ago, these elements have a great support in all browsers and it could be said that nowadays they can be interpreted by any modern browser, even those of mobile devices.

Its use is very simple and intuitive, because you only need the <audio> element or the <video> element accompanied by the <source> element, which indicates the address where the multimedia file is located. Below you can see an example for audio.

Code:

<audio controls>
<source src=".mp3 audio direction" type="audio/mpeg">
<source src=".ogg audio direction" type="audio/ogg">
</audio>

Result:

As you can see it is really very simple, it is only necessary to have the audio file stored on line that you want to play. Although most browsers currently play audios in .mp3 format, we recommend that you continue to use an .ogg file as a second option, since Firefox and Opera previously only could play it.

In the case of wanting to play a video, the code is similar, however this time it will be necessary to add the width and height attributes to the <video> element, below you can see an example.

Code:

<video width="320" height="180" controls>
<source src=".mp4 video direction" type="video/mp4">
<source src=".ogv video direction" type="video/ogg">
</video>

Result:

As you can see, it's just as simple as the example of the audio we showed earlier.

Now, as it always has been, all the HTML elements have attributes to be able to modify them and this case is not the exception. The attributes of the <audio> and <video> element are: controls, autoplay, loop, muted, and preload.

controls: allows the controls and the player itself to be displayed.
autoplay: causes the file to be played when the page is loaded.
loop: will play the file again and again.
muted: will remove the audio from the file.
preload: defines if the player should load when the page loads.

An example of using the above attributes with the player would be as we show you below.

Code:

<audio controls autoplay loop>
<source src=".mp3 audio direction" type="audio/mpeg">
<source src=".ogg audio direction" type="audio/ogg">
</audio>

This time we do not show you the result because we are using the autoplay and loop attribute, which would cause that from the moment you entered this post you would have started to listen to an audio which will not stop repeating unless you stop it.

Perhaps the biggest drawback of using this type of players is having to use different audio and video formats due to the incompatibilities with some browsers, however, until now it is the best alternative to place audio on your website, and the second best alternative for video, being the best alternative YouTube