This is important because…
as a developer, its important to know how to add image, audio, and video elements to a site in order to provide an engaging experience for the user, as well as knowing how to adapt for varying displays and resolutions and provide fallback/redundancy if needed.
Being able to style with CSS grid is a yet another tool along side Flexbox and regular displayb properties to structure page content.
Adding videos and audio was originally made possible through plugins (Flash and Silverlight), but now easily accessible through built-in HTML elements (<video> and <audio>) and javaScript APIs.
<video> Element<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>
You should nest a <p> element inside the <video> element in order to provide fallback content, which works like alt text for an image, with the difference that it provides the source as a link rather than embedding it.
controls attribute is as it says, provides controls (pause, play, forward, backward, etc.) for playback. Can be supplemented with JS APIs.
Not all browsers play and support the same video formats. Each browser also supports a range of varying codecs that convert to and from compressed a/v and binary. To ensure media will be compatible and play on browser, prepare to provide multiple formats and do research on video and audio codecs.
<video controls>
<source src="rabbit320.mp4" type="video/mp4" />
<source src="rabbit320.webm" type="video/webm" />
<p>
Your browser doesn't support this video. Here is a
<a href="rabbit320.mp4">link to the video</a> instead.
</p>
</video>
Is what an updated <video> element would look like to account for different sources. It will go down the <source> elements for the first one that plays, the type attribute is optional, but encouraged to include and specify media type so browser may know which to prefer / skip those they don’t understand.
controls
width="400"
height="400"
autoplay
loop
muted
preload="auto"
poster="poster.png">
are just a few of the other features one can specify when displaying a <video> element.
autoplay is not recommended.
loop will repeat media once finished.
muted mutes by default.
poster displays image of before video is played.
preload for large files. 'none', 'auto', and 'metadata'.
For when simply hearing the audio is not possible, for whichever reason, internal or external. Transcription is capable through WebVTT format and <track> element.
WebVTT format writes text files linked to the metadata of a video such as time in video, to keep the text synched.
<audio> ElementWorks in same manner as <video> element.
Differs in space taken up, less than a video since there is no visual; does not need / support width / height.
src and controls attributes in the <video> element.
src points to the url or location of the video, whereas controls includes the controls for playback.<video> element?
<audio> and <video> are characters.
display: grid is applied.Parent properties include;
display: power switch to enable : gridgrid-template-*:grid-template:grid-template-areas:grid:justify-items:align-items:place-items:justify-content:align-content:place-content:grid-auto-*:grid-auto-flow:gap:Children properties include;
grid-column-*:
grid-row-*:grid-column: specifies where a grid item starts and ends across columns.
grid-row: specifies start and end rows.grid-area: place a grid item within specific rows and columns; shorthand property that can define four grid positions at once.
justify-self: the way an item aligns horizontally inside its own gird cell; overrides justify-itemalign-self: where the item sits in the column; vericalplace-self:fr unit
fr: fractional unit, in regards to remaining space.min-content: the smallest dimensions content will conform to.max-content: the complete and true size of the content.auto: superseded by fr.fit-content: uses as much space available; never less than min/max-content.max(): CSS function; 2 arguments; returns largest.min(): “ “; returns smallest.minmax(): “ “; defines grid tracks by allowing growth/shrink based on values.repeat(): saves typing/keystrokes.
auto-fill: as many columns possible on a row (even if empty).auto-fit: “ “, prefers expanding columns to fill space rather than adding empty ones.gap, row-gap, and column-gap through length, percentage, or calculation.
(only implementation in tested browsers)
grid-template-columns, grid-template-rows by a list of lengths. percentages, or calculations.
Images that adapt to different screen sizes, resolutions, are able to fit and be viewed in the browser’s viewport it is displayed on etc.
Two main ways of catering images to different browser sizes. Resolution switching with different image sizes or with same size image, but different resolutions.
(*Note: Using the JavaScript console in the browser and typing in, document.querySelector('html').clientWidth, will allow us to know what the browser’s viewport is currently set at.)
(*Note: Best practice to include, <meta name="viewport" content="width=device-width"> within the <head> of an HTML file to force any browser to conform to actual viewport width.)
Provides same image at different size that will display depending on browser viewport through the use of srcset and sizes attributes for <img>. Syntax looks as such,
<img
srcset="placeholder_480w.jpg 480w, placeholder_800w.jpg 800w"
sizes="(width <= 600px) 480px,
800px"
src="placeholder_800w.jpg"
alt="placeholder image"
/>
In the srcset attribute, we include the set of images for the browser to choose from, separated by a comma. Each image is followed by the unit measurement of the size that the image is.
In sizes we specify the conditions by which to make the selection of the image.
In the example, (width <= 600px) 480px, 800px, is practically saying,
‘when the browser viewport is less than or equal to 600px, choose the 480px image defined above; any other time (when viewport is bigger), choose the 600px image’.
This method caters to the resolution of the screen being displayed.
<img
srcset="placeholder_320w.jpg, placeholder_480w.jpg 1.5x, placeholder_640w.jpg 2x"
src="placeholder_640w.jpg"
alt="placeholder image"
/>
img {
width: 320px;
}
In this example, instead of following the image filename with a unit size, it is followed by ‘x-descriptors’. The browser will automatically register the resolution of the currently displayed and chooses the best fit.
Using the <picture> element, we are also able to change the image to account for different display sizes (usually cropped images).
The <picture> element is a container that wraps around <img> and we are able to provide different sources; syntax is very similar to how the <video> element operates.
<picture>
<source media="(width < 800px)" srcset="placeholder_480w_close_portrait.jpg" />
<source media="(width >= 800px)" srcset="placeholder_800w.jpg" />
<img src="placeholder_800w.jpg" alt="Waves" />
</picture>
Very similar also to displaying images of different sizes; we include conditions from which to make a choice on which image to choose. In this instance however, it is done within the media attribute.
<img> attributes srcset and sizes. Write an example of how they are used.
srcset: provides the different choices to choose from with dimensions/descriptors.sizes: where the conditions for how the choice and which choice will be made are defined.srcset more helpful for responsive images than CSS or JavaScript?
srcset is more useful than CSS in relation to making responsive images, because in the process of loading the webpage, it provides opportunity for the pre-loader to choose the adequately suited image for the browser’s viewport.