8. Multimedia

Since the arrival of the HTML5 version there are some interesting tags that offer multimedia content: audio and video. We can play music or a whole movie without going through other services (like Flash or Youtube); in a simple, free and operating-system-integrated way.

Audio

<audio
    controls
    src="t-rex.mp3"
    >
    <p>
        Your browser does not support the audio format, click <a href="t-rex.mp3">here</a> to download it.
    </p>
</audio>

If what we're looking for is to add a description we'll play with <figure> and <figcaption>.

<figure>
    <figcaption>T-Rex:</figcaption>
    <audio
        controls
        src="t-rex.mp3"
      >
      <p>
          Your browser does not support the audio format, click <a href="t-rex.mp3">here</a> to download it.
      </p>
    </audio>
</figure>

Compatibility

The most used audio formats in web creation are:

• mp3
• wav
• ogg
• webm
• aac

Each one has its own advantages and disadvantages, but what's important are the codecs and their compatibility. Not all browsers can play the same formats; some require licenses that (the browsers) don't want to pay for, or there are certain economic interests in not providing support. So we can't guarantee that it plays on all devices? As we saw in the images lesson, there's a tag that solves the problem for us: <source>.

In the following example I tell the browser to play the audio in case it's compatible with mp3; otherwise it would try with ogg.

<audio controls>
    <source srcset="t-rex.mp3" type="audio/mp3">
    <source srcset="t-rex.ogg" type="audio/ogg">
    <p>
        Your browser does not support the audio format, click <a href="t-rex.mp3">here</a> to download it.
    </p>
</audio>

Video

If the goal is to include a video Youtube-style, in the catalog of tags we can find one that is an expert at the task.

<video controls src="te.mp4">
    <p>
        Your browser does not support the video format, click <a href="te.mp4">here</a> to download it.
    </p>
</video>

To avoid problems with browsers we can add more sources, as we did in <audio>.

<video controls>
    <source src="te.webm" type="video/webm">
    <source src="te.mp4" type="video/mp4">
    <p>
        Your browser does not support the video format, click <a href="te.mp4">here</a> to download it.
    </p>
</video>

And in case we want to use a preview image, which may or may not be related to the content, we'll use the poster attribute.

<video controls poster="previa.jpg">
    <source src="te.webm" type="video/webm">
    <source src="te.mp4" type="video/mp4">
    <p>
        Your browser does not support the video format, click <a href="te.mp4">here</a> to download it.
    </p>
</video>

If you want to use the autoplay attribute you must accompany it with muted. It's not allowed to autoplay videos with sound.

Compatibility

There are many video formats but in Web Design the ones that stand out for compatibility and use are:

• mp4: Highly recommended with the H264 and AAC codecs.
• webm: Good quality.

Third-party services: Youtube, Vimeo, etc.

Each platform has its own player. The most common way to integrate it is through an <iframe>.

For example, on Youtube we'll click Share.

Then on Embed.

And the <iframe> tag will be visible. Now we can copy and paste the HTML.