Reading 11 - Readings: Audio, Video, Images
Source: MDN, Video and Audio Content
Q1 Explain how the ability to use video and audio on the web has evolved since the early 2000s.
Early online videos and audio primarily used plugin-based technologies like Flash and Silverlight. However, they had security and accessibility issues, and now native HTML solutions (using and elements) with JavaScript APIs are preferred.
Q2 Describe the use of the src and controls attributes in the element.
The attribute is used to link to the source, the same as with an image. The attribute allows the user to start and stop playback, as well as adjust the volume.
Q3 Why is it important to have fallback content inside the element?gi
It’s important to have fallback content in case the user is on an older browser that doesn’t support the element.
Q4 Write a very short story where and are characters.
: Can you hear me now?
: Yes!
: Good! Can you see me now?
: No.
[Source: CSS Tricks, A Complete Guide to CSS Grid](https://css-tricks.com/snippets/css/complete-guide-grid/)
## Q5 How does Grid layout differ from Flex?
Grid layout lets you control in two diminsions - that is, both rows and columns. Flex layout can go either vertically or horizontally, but you can't control both at the same time.
## Q6 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 parent of the grid items. It forms the border of all of the items contained inside.
- **Grid items** are the children (*direct* descendants) of the grid container. These are the major items contained within the grid container.
- **Grid lines** are the dividing lines that make up the structure of the grid.
[Source: MDN, Responsive Images](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images)
## Q7 Besides making a site visually appealing across different screen sizes, why should developers make images responsive?
- Art direction problem - If a large image isn't cropped correctly for a smaller screen (art direction problem), it will either take up too much of the screen, or will be cropped in a way that you can't see the focus of the image.
- Resolution switching problems - If a large image, suitable for a desktop or laptop, is displayed at full size on smaller screens it will waste bandwidth. If an image intended for a small screen is shown on a large screen it will lose resolution.
## Q8 Define the following