{the jump}

HTML Audio, video & other tags

Session 4

Aim of today

  • To round off the HTML section of the course
    • minus SVG
  • Provide a list of all relevant tags
  • For homework I will ask that you spend your remaining time studying these tags hard
  • We'll look at audio/visual embedding
  • Homework
    • Petshop

HTML Learning Spreasheet

  • Now is your time to become an EXPERT in HTML
  • MDN has many guides and a full reference
  • Here is a list of all tags covered and colour-coded by importance:
    • red - don't bother
    • light yellow - low priority
    • yellow - yes, you should
    • green - yes, you must!

List of Required Tags

reference

  • DOCTYPE (done for you)
  • html
    • lang (done for you)
    • xml:lang and xmlns attributes (covered by default)
  • head
    • contents (guide)
    • meta - adds extra info about the page
    • title - puts title in the browser tab
    • style & link (covered in CSS next week) (<base> for asset path)

List of Required Tags

reference

  • body
    • Content Sectioning (header, main, footer, nav, aside, etc)
      • article & address
    • Text Content
      • [ol or ul], li, dl (with dt & dd) (mention nested lists!)
        • a single definition uses <dfn>
      •  quoting:
        • <q> (with cite attribute) (short inline quotation)
        • <blockquote> if multiple lines (with <cite>)
      • figure (& figcaption) - to demonstrate things
      • hr (change of theme in list of paragraphs. Can f off.
      • pre

List of Required Tags

reference

  • Text Semantics
    • <a> (mention target)
    • avoid <br> unless meaning to the division (e.g. poem or address)
    • emphasis (<em>) vs <strong> vs <b>
      • em is for sarcasm, counter argument, etc.
      • strong is for putting something forcefully
      • <b> is if it needs attention drawn and there's no other way
    • subscript & superscript <sub><sup>
    • highlighting: <mark>
    • redacting/adding <del><ins>
    • data (for showing statistical data)

List of Required Tags

reference

  • Text Semantics
    • output: for the output of a user run operation
    • kbd (for keyboard instructions)
    • wbr (word-break opportunity)
    • small (for legal small print)
    • span - no semantic meaning
    • i - for technical terms (also icons, fontawesome, CDN Link)
    • time
  • Tables (done)
  • Forms

List of Required Tags

reference

  • Forms
    • meter (unlikely to use)
    • progress (unlikely to use)
  • Audio/video
    • audio
    • video
    • track
    • img (we will cover this more in responsive for things like srcset and sizes attributes)
    • picture (You should use picture in preference to img)
  • iframe
  • canvas (for drawing on. Just know it exists)
  • script & no script (don't worry about until JS)

How do I know if I can use a new thing?

https://caniuse.com/

For visual: http://browsershots.org/

HTML Accessibility

Audio/Video

Image Formats

credit

Lazy Loading

We can suspend the loading of some images/iframes until they are needed. This enhances the performance of our page radically

width/height [attributes]

  • Images come with an 'intrinsic size' - that's the size that they were made at
  • Sometimes we will want to display images at a different size, so we have the width and height attributes
    • these take in pixel values only (as a number)
  • The relationship between width and height is called 'aspect ratio'
  • As a result, you only need to set one (usually width) and the browser will do the rest of the maths (setting both can destroy aspect ratio)
  • When images load they can load 'progressively, i.e. in parts. That will cause the image to change size as it loads
    • This is bad for accessibility, as you may have experienced when you go to press a button/link and the page moves
    • It's also a Google SEO metric called Cumulative Layout Shift

Data URIs

  • Are an ANTI-PATTERN
    • Which means a 'bad idea'
  • example

Audio/Video

  • Same(ish) API
  • You have a container with options, like:
    • controls (are the controls visible)
    • autoplay (problem)
    • loop
    • muted (solution)
  • You put in either
    • 1 track on the audio/video tag
    • Multiple using source tags
      • best practice to offer multiple (progressive enhancement)
  • Formats (lots)
    • mp4, etc. are standard
    • webm is bleeding edge

Audio/Video

  • Accessibility: Provide a .vtt track where possible (more here)
  • The ability to programatically control these is delivered with JavaScript, so some options are not available to us just yet.
  • Also, js libraries create much better looking players that you can style.
    • These are minor-ly stylable

Audio/Video

There are other options to embed

audio: soundcloud

video: youtube, vimeo

 

Advantages:

  1. CDN (explain) so better response 
  2. optimisation taken care of for you

 

Disadvantages:

  1. Risk of non-connection
    1. You can/should mitigate!

 

Audio

<audio controls loop>
  <!-- fallback, if not supported -->
  Your browser does not support the <code>audio</code> element.

  <!-- source files -->
  <source src="crimson_fly.ogg" type="audio/ogg">
  <source src="crimson_fly.mp3" type="audio/mpeg">
</audio>

Attributes:

  • autoplay (generally disabled by site)
  • controls: show user controls
  • muted: starts muted
  • loop
  • preload: Load it early
  • src: if only one src (no source tags required)

Video

<video width="640" height="480" poster="youtube_banner.jpg" controls preload autoplay>
  <!-- VIDEO SOURCES (files) -->
  <source src="puppies.webm" type="video/webm"> <!--newest format-->
  <source src="puppies.ogv"type="video/ogg">
  <source src="puppies.mp4" type="video/mp4"><!--oldest format-- >

  <!-- SUBTITLES -->
  <track src="subtitles-en.vtt" kind="subtitles" srclang="en" label="English" default>
  <track src="subtitles-fr.vtt" kind="subtitles" srclang="fr" label="French">

  I'm sorry, your browser doesn't support HTML5 video. <!-- fallback if the browser can't play video -->
</video>
  • Sources are discovered in order and the first usable one is selected, so put the newest formats first.
  • Attributes
    • controls: shows user controls
    • preload: preloads the file
    • autoplay
      • Will only autoplay if muted

Video

  • Attributes
    • width & height: size (in px)
    • loop
    • muted
    • poster: image first shown before playing
    • src: if there's only one source (no source tags required.)
    • full list

Video Embed

<iframe width="560" height="315" src="https://www.youtube.com/embed/IfeyUGZt8nk" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  • This is from youtube
    • Go to the share button below the video
    • Click Embed from the options
    • Copy/paste the code

Converters