Multimedia and Embedding Flashcards
<img></img>
Creates an image element pointing to the file “dinosaur.jpg” in your “images” folder
If the picture doesn’t show up (or screenreader gets to it) the “alt” attribute comes in
Note: Putting your images in an “images” folder is recommended or SEO purposes. Search engines also take note of the name of the image and alt text!
and
You can wrap your <img></img> in tags with a following tag to specify a caption for the image
Note: A figure could be several images, a code snippet, audio, video, equations, a table, or something else.
Explain this:
<p>Your browser doesn't support HTML5 video. Here is a <a>link to the video</a> instead.</p>
This embeds a video from the file rabbit320.webm, adds ways to control the video, and provides a fallback <p> in case the video doesn’t work with the browser</p>
Explain this:
<p>Your browser doesn't support HTML5 video. Here is a <a>link to the video</a> instead.</p>
We are trying to embed a video, and the two tags specify in order the files we would like to try to embed. If the browser doesn’t support the first one, it tries the second. If doesn’t support the second, displays the message.
Note: include the “type” attribute to make sure the browser knows what type of file it is so that it can determine if it isn’t compatible more quickly.
Explain this:
<p>Your browser doesn't support HTML5 audio. Here is a <a>link to the audio</a> instead.</p>
We are trying to embed an audio file, and the two tags specify the order of the sources to pull from. Controls will make play/pause etc. show up.
If it doesn’t support the second source, displays the <p></p>
const mediaElem = document.getElementById("my-media-element");
mediaElem.load();resets the media element back to the beginning
WebVTT
a format for writing text files containing multiple strings of text along with metadata such as the time in the video at which each text string should be displayed, and even limited styling/positioning information.
Basically subtitles etc.
Look up more when needed
The HTML Inline Frame element () represents a nested browsing context, embedding another HTML page into the current one.
This is great for incorporating third-party content into your website that you might not have direct control over and don’t want to have to implement your own version of — such as video from online video providers, commenting systems like Disqus, maps from online map providers, advertising banners, etc.
Clickjacking
A malicious attempt to steal your info usually through overlaying an invisible layer to the user
What are the benefits of using HTTPS when embedding content from a third party?
HTTPS reduces the chance that remote content has been tampered with in transit,
HTTPS prevents embedded content from accessing content in your parent document, and vice versa.
sandbox
A container for code where it can be used appropriately — or for testing — but can’t cause any harm to the rest of the codebase (either accidental or malicious)
By default, you should impose all available restrictions by using the sandbox attribute with no parameters
Example:
Content Security Policy
provides a set of HTTP Headers (metadata sent along with your web pages when they are served from a web server) designed to improve the security of your HTML document.
What can you do now that Adobe Flash is going away?
You should use HTML5 video for your media needs, SVG for vector graphics, and Canvas for complex images and animations.
Raster Images vs. Vector Images
Raster images are image files such as .png, .jpeg, etc, and the way that they render the image is by specifying a grid of pixels (where they should be placed, what color). Raster images are more suited for photos because it’s hard to achieve the necessary amount of detail in vector images
Vector images are defined using algorithms. A vector image file contains shape and path definitions that the computer can use to work out what the image should look like when rendered on the screen.
Vector images work much better in responsive design, such as when zooming in on the image, in which case a raster image would become blurry and the vector image would not. SVG is a type of vector image.
SVG
SVG stands for Scalable Vector Graphics.
It’s an XML-based language for describing vector images. It’s basically markup, like HTML, except that you’ve got many different elements for defining the shapes you want to appear in your image, and the effects you want to apply to those shapes.
As a simple example, the following code creates a circle and a rectangle:
Advantages of using SVG
Disadvantages of using SVG
Advantages:
- Text in vector images remains accessible (which also benefits your SEO).
- SVGs lend themselves well to styling/scripting, because each component of the image is an element that can be styled via CSS or scripted via JavaScript.
Disadvantages:
- SVG can get complicated very quickly, meaning that file sizes can grow; complex SVGs can also take significant processing time in the browser.
- SVG can be harder to create than raster images, depending on what kind of image you are trying to create.
Responsive Images
images that work well on devices with widely differing screen sizes, resolutions, and other such features
Art Direction Problem
The problem whereby you want to serve cropped images for different layouts — for example a landscape image showing a full scene for a desktop layout, and a portrait image showing the main subject zoomed in for a mobile layout.
You can solve this problem using the element.
Use different images suitable for different space allocations.
Resolution Switching Problem
The problem whereby you want to serve smaller image files to narrow screen devices, as they don’t need huge images like desktop displays do — and also optionally that you want to serve different resolution images to high density/low density screens.
You can solve this problem by using vector graphics (SVG images) and the srcset with sizes attributes.
Offer the browser several image files, all showing the same thing but containing different numbers of pixels
srcset
An attribute used with the <img></img> tag defining 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. For each one, we write:
- An image filename (elva-fairy-480w.jpg)
- A space
- The image’s intrinsic width in pixels (480w) — note that this uses the w unit, not px as you might expect. This is the image’s real size, which can be found by inspecting the image file on your computer
sizes
An attribute used with the <img></img> tag defining 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
In this case, before each comma we write:
- A media condition ((max-width:600px)). In this case, we are saying “when the viewport width is 600 pixels or less”.
- A space
- The width of the slot the image will fill when the media condition is true (480px)
How do the srcset and sizes attributes work together?
- Look at the device width.
- Work out which media condition in the sizes list is the first one to be true.
- Look at the slot size given to that media query.
- Load the image referenced in the srcset list that has the same size as the slot or, if there isn’t one, the first image that is bigger than the chosen slot size.
Older browsers that don’t support these features will just ignore them. Instead, those browsers will go ahead and load the image referenced in the src attribute as normal.
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
Forces mobile browsers to adopt their real viewport width for loading web pages
A wrapper containing several elements that provide different sources for the browser to choose from
In all cases, you must provide an <img></img> element, with src and alt, right before , otherwise no images will appear. This provides a default case that will apply when none of the media conditions return true
<img></img>
What is the advantage of the HTML responsive image tags over using CSS and JavaScript?
When the browser starts to load a page, it starts to download (preload) any images before the main parser has started to load and interpret the page’s CSS and JavaScript.
That mechanism is useful in general for reducing page load times, but it is not helpful for responsive images.
