TechEducationClone

Audio Video and Images

Reading

Video and Audio content
Complete guide to grid
Responsive Images Images in HTML
Other Embedding Technologies

Q&A

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

    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.

  2. Describe the use of the src and controls attributes in the ‘video’ element.

    we include a path to the media we want to display inside the src attribute. we then attach other attributes to the control the video such as video and height. auto play.

  3. Why is it important to have fallback content inside the ‘video’ element?

    some browsers don’t support some types of audio and video content so having fallback information can be useful

  4. Write a very short story where ‘audio’ and ‘video’ are characters.

    all i can think of is jokes :D none of them good.

  5. How does Grid layout differ from Flex?

    Grid is two dimensional. Flex is one

  6. 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.

    Container - parent element where Display: Grid is applied Item - Direct child of the parent element Line - vertical and horizontal likes between the rows and columns

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

    Responsiveness can aid in performance across different devices, can also aid in displaying some images with lower bandwidth instead of it being unreadable or pixellated.

  8. Define the following ‘img’ attributes srcset and sizes. Write an example of how they are used.

    srcset = conatins comma-separated list of different image URLs sizes = lists sizes at which the img should be displayed along with media queries

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

    it can render small cropped images on things like mobiles and smaller devices without compromising bandwidth

Setting up custom audio
worst controles