{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
  • We'll look at audio/visual embedding
  • Homework
    • ​studying the relevant tags hard
    • Recreate your CV using at all the listed tags at least once
      • If there are any you don't understand then let me know

List of Required Tags

reference

  • !DOCTYPE (automatic)
  • html
    • lang (automatic)
    • xml:lang and xmlns attributes (covered by default)
  • head
    • contents (guide)
    • meta - adds extra info about the page
      • favicons (little images next to title in browser tab): generator (for favicon.ico - just put in root of project)
      • open graph (OG) tags: generator
      • robots.txt (to prevent indexing)
    • 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>, <ul>, (with <li>)or <dl>(with <dt> or <dd>) - nested
        • a single definition uses <dfn>
      •  quoting:
        • <q> (has a cite attribute) for short inline quotations
        • <blockquote> for multiple line quotes (note: <cite> tag)
      • <figure> (& <figcaption>) - for captioning images/diagrams
      • <hr> - separation between paragraphs. Follows thematic seams. Do not use this. Please.
    • Demo: of <code> and  <pre>

List of Required Tags

reference

  • Text Semantics
    • <a> (target attribute)
    • avoid <br> unless there is a strong reason the division (e.g. poems or addresses)
    • 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/tracked changes <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>
    • <i> (now for icons)
    • <time>
  • Tables 
  • Forms cont'd
    • <datalist> (for dropdown selectors)
    • <input type="reset">
    • disabled, required & autocomplete (browser hints)

List of Required Tags

reference

  • Forms
    • <meter> (unlikely to use)
    • <progress> (unlikely to use)
  • Audio/video
    • <audio>
    • <video>
    • <track>
    • <img> (more on this during the responsive lecture for things like srcset and sizes attributes)
    • <picture>
  • <iframe>
  • <canvas> (for drawing on. Just know it exists)
  • <script> & <noscript> (more about these in the JS module)

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

https://caniuse.com/

HTML Accessibility

Audio/Video

Image Formats

Lazy Loading

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

Audio/Video

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

Audio/Video

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

Audio/Video

There are other options for embedding

audio: soundcloud

video: youtube, vimeo

 

Advantages:

  1. CDN (content delivery network) = bettter response
  2. automatically optimised

 

Disadvantages:

  1. Risk of non-connection
  2. 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 the 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

Embedding video

<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 a video from YouTube
    • Go to the share button below the video
    • Click Embed from the options
    • Copy/paste the code

Required Reading

  1. ​HTML Elements
  2. Adding Subtitles
  3. Lazy Loading
  4. Accessibility
  5. Accessibility part 2
  6. HTML Character codes

Exercise

Make a meditation site with a play button. When the play button is pressed play both a serene video and audio file on loop until the user presses pause. Make the site as accessible as possible.

Copy of {the jump} Full-Stack Bootcamp: Session 4

By James Sherry

Copy of {the jump} Full-Stack Bootcamp: Session 4

HTML5 tag round-up

  • 1,237

More from James Sherry