reading-notes

Code Fellows 201

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.

src
- In the same way as for 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 (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.
The paragraph inside the <video> tags
- 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. This can be anything you like; in this case, we’ve provided a direct link to the video file, so the user can at least access it some way regardless of what browser they are using.

so the user can at least access it some way regardless of what browser they are using.

Once upon a time audio and video fell in love and had a baby; they called it mkv.

Grid Container: The element on which display: grid is applied. It’s the direct parent of all the grid items. In this example container is the grid container.
Grid Item: The children (i.e. direct descendants) of the grid container. Here the item elements are grid items, but sub-item isn’t.
Grid Line: The dividing lines that make up the structure of the grid. They can be either vertical (“column grid lines”) or horizontal (“row grid lines”) and reside on either side of a row or column. Here the yellow line is an example of a column grid line.

Responsive image technologies were implemented recently to solve the problems indicated above by letting you offer the browser several image files, either all showing the same thing but containing different numbers of pixels (resolution switching), or different images suitable for different space allocations (art direction).

srcset defines the set of images we will allow the browser to choose between, and what size each image is. Each set of image information is separated from the previous one by a comma.
sizes defines a set of media conditions (e.g. screen widths) and indicates what image size would be best to choose, when certain media conditions are true — these are the hints we talked about earlier.

If you’re supporting multiple display resolutions, but everyone sees your image at the same real-world size on the screen, you can allow the browser to choose an appropriate resolution image by using srcset with x-descriptors and without sizes — a somewhat easier syntax!

Images in HTML This article is review from Class 05.