Mobile Web Specialist Series: Responsive web design(Video and Audio Content)

Image via CommitStrip

Following the process to train me for the mws exam, I continue with the next topic: Video and Audio Content, the material shown below it’s taken from MDN docs.

We talk about the correctly way to add a video and audio players in our web site, We gonna look to the <video> and <audio> tags and how to add captions in our videos.

The <video> Tag

The video tag is used to embed a video in a easy way:

<video src="rabbit320.webm" controls>
  <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.webm">link to the video</a> instead.</p> 
</video>

the tag properties in the above example are:

src

In the same way as the <img> element, the src (source) attribute contains a path to the video you want to embed. It works in exactly the same way.

controls

Users must be able to control video and audio playback. You must either use the controls attribute to include the browser's own control interface, or build your interface using the appropriate JavaScript API.

The <p> tag inside the <video> tag

This is called fallback content — this will be displayed if the browser accessing the page doesn’t support the <video> element, allowing us to provide a fallback for older browsers.

The embeded video in the above example code will look like this:

Image from MDN

We have a problem with the above example, if you tried load with a browser like Safari or Explorer the video won’t play, this is because these does not support video format.

So how do we do this? Take a look at the following:

<video controls>
  <source src="rabbit320.mp4" type="video/mp4">
  <source src="rabbit320.webm" type="video/webm">
  <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
</video>

The we’ve taken the src attribute out of the <video> tag, and instead included separate <source> elements that point to their own sources with this we make sure that will go through the <source> elements and play the first one that it has the codec to support.

We also included a type attribute, this is optional, if they are not included, browsers will load and try to play each file until they find one that works, taking even more time and resources.

Another <video> features

There are another features that you can include in the <video> tag:

<video controls width="400" height="400"
       loop muted
       poster="poster.png">
  <source src="rabbit320.mp4" type="video/mp4">
  <source src="rabbit320.webm" type="video/webm">
  <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
</video>

width and height

You can control the video size either with these attributes or with CSS. In both cases, videos maintain their native width-height ratio — known as the aspect ratio.

autoplay

This attribute makes the audio or video start playing right away while the rest of the page is loading.

loop

This attribute makes the video (or audio) start playing again whenever it finishes. psdta: This can also be annoying, so only use if really necessary. 😵

muted

This attribute causes the media to play with the sound turned off by default.

poster

This attribute takes as its value the URL of an image, which will be displayed before the video is played.

preload

this attribute is used in the element for buffering large files. It can take one of 3 values:

• "none" does not buffer the file
• "auto" buffers the media file
• "metadata" buffers only the metadata for the file

Note: we haven’t included the autoplayattribute, if the video starts to play as soon as the page loads, you don't get to see the poster 🙃

The <audio> Tag

The <audio> tag works in the same way as the <video> tag, with a few differences as described below, and here a small example:

<audio controls>
  <source src="viper.mp3" type="audio/mp3">
  <source src="viper.ogg" type="audio/ogg">
  <p>Your browser doesn't support HTML5 audio. Here is a <a href="viper.mp3">link to the audio</a> instead.</p>
</audio>

This produces something like this:

Image from MDN.

Note: the <audio> tag doesn’t support the width, height and poster properties because this is not a visual component.

And the last topic “Display video text tracks or captions”

The way to provide the transript of the words being spoken in the audio/video is with the WebVTT format and the <track>element.

WebVTT is a format for writing text files containing multiple strings of text along with metadata such as what time in the video you want each text string to be displayed, and even limited styling/positioning information. These text strings are called cues.

This is an explample of a WebVTT file:

WEBVTT

1
00:00:22.230 --> 00:00:24.606
This is the first subtitle.

2
00:00:30.739 --> 00:00:34.074
This is the second.

  ...

To get this displayed along with the HTML media, we need to:

1. Save it as a .vtt file.
2. Link to the .vtt file with the <track> tag this should be placed within <audio> or <video> , but after all <source> tags. Use the kind attribute to specify whether the cues are subtitles, captions, or descriptions. Further, use srclang to tell the browser what language you have written the subtitles in.

Here’s the example:

<video controls>
    <source src="example.mp4" type="video/mp4">
    <source src="example.webm" type="video/webm">
    <track kind="subtitles" src="subtitles_en.vtt" srclang="en">
</video>

Image from MDN.

For more details about the use of WebVTT read the article Adding captions and subtitles to HTML5 video. You can find the example that goes along with this article on Github, written by Ian Devlin (see the source code too.).

Thanks for reading and see you in the next post of the Mobile Web Specialist Series 😬.