Course 201 Class Eleven “Audio, Video, Images”

Video and audio on the web

The first influx of online videos and audio were made possible by proprietary plugin-based technologies like Flash and Silverlight. Both of these had security and accessibility issues, and are now obsolete, in favor of native HTML solutions <video> and <audio> elements and the availability of JavaScript APIs for controlling them. We’ll not be looking at JavaScript here — just the basic foundations that can be achieved with HTML.

The <video> element allows you to embed a video very easily. A really simple example looks like this:

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

controls

Users must be able to control video and audio playback (it’s especially critical for people who have epilepsy.) You must either use the controls attribute to include the browser’s own control interface, or build your interface using the appropriate JavaScript API. At a minimum, the interface must include a way to start and stop the media, and to adjust the volume.

Responsive images

images that work well on devices with widely differing screen sizes, resolutions, and other such features — and look at what tools HTML provides to help implement them. This helps to improve performance across different devices. Responsive images are just one part of responsive design, a future CSS topic for you to learn.

Questions

• Explain how the ability to use video and audio on the web has evolved since the early 2000s.

In the early 2000s you had to use plugin technologies like Silverlight and flash but now days you do not use those and use HTML <video> and <audio> tags.

• Describe the use of the src and controls attributes in the <video> element.

src tells where the source of the audio or video file is and controls adds the control panel for that video or audio

• Why is it important to have fallback content inside the <video> element?

In case an older web browser cant play the file we have linked.

• How does Grid layout differ from Flex?

grid was dewsigned for 2 dimensional layouts columns and rows at the same time, but flex is one dimensional.

• Grid container, grid item, and grid line are a few important terms to understand when using Grid. Please describe these terms in a few sentences.

Grid Container is the command that sets the container, grid item are contained with in the grid container and a container has 1 grid item per for each column, grid line can be a number or name that refers to an individual grid line.

• Besides making a site visually appealing across different screen sizes, why should developers make images responsive?

Because it helps to deliver the optimum file size for increased user experience.

• Define the following <img> attributes srcset and sizes.

srcset defines the images the browser is allowed to choose from and sizes defines a set of media conditions and indicates what image size would be best to choose, when certain media conditions are true.

• How is srcset more helpful for responsive images than CSS or JavaScript?

Because it allows for the use of more than 1 image.

Resources

Video and audio content

A Complete Guide to Grid

Responsive images

Return to the Table of Contents:

Table of Contents