Accessibility &
Multi-Screen Design

 

Audio, Video & Animations

Disclaimer

This course is not a W3C course.
Views expressed are my own.


Dies ist kein W3C-Kurs.
Alle Ansichten sind meine Eigenen.

Audio

Audio Player Example:

http://www.thewebahead.net/

User needs to be in control.

Don’t autostart audio.

audio element

Video

Four UX Principles

  • Give users choice.
  • Put users in control.
  • Design with familiarity in mind.
  • Prioritize features that add value.

video element

How do audio and video elements work?

Due to licensing issues:

Two formats needed.

webM (open, free)
H.264 (proprietary)

<video width="320" height="240" controls>
  <source src="pr6.mp4"  type="video/mp4">
  <source src="pr6.webm" type="video/webm">
</video>

New Kid on the Block:
HEVC/H.265

High Efficiency Video Coding

Also possible:
Media Queries

<video>
    <source src="lowres.mp4" media="max-width: 500px">
    <source src="highres.mp4">
</video>

A few interesting attributes:

poster — displays an image when stopped
controls – display start/stop/volume controls
autoplay – starts the resource on load (don’t use!)
loop – loops the media resource
muted – starts muted

On Autoplay

Video Players SWS*

 

 

 

*See what sucks

Audio works the same way

OGG (open, free)
MP3 (proprietary)

“If the longest-running patent mentioned in the aforementioned references is taken as a measure, then the MP3 technology became patent-free in the United States on 16 April 2017 when U.S. Patent 6,009,399, held by and administered by Technicolor, expired.”

MP3 is supported by everything, everywhere, and is now patent-free.

<audio>
    <source src="music.mp3" type="audio/mpeg">
    <source src="music.oga" type="audio/ogg" >
</audio>

Both elements are completely scriptable.

var video = document.getElementById('video'); 
var playpause = document.getElementById('playpause'); 

video.onpause = function(e) { 
    playpause.value = 'Play'; 
    playpause.onclick = function(e) { 
        video.play(); 
    } 
} 

video.onplay = funtion(e) { 
    playpause.value = 'Pause'; 
    playpause.onclick = function(e) { 
        video.pause(); 
    } 
}

How to make Audio and Video accessible.

Transcript

Captions

Use track for captions:

<video src="foo.ogv">
  <track kind="captions" 
         label="English captions" 
         src="subtitles_en.vtt" 
         srclang="en" default>
  </track>
  <track kind="captions" 
         label="Deutsche Untertitel" 
         src="subtitles_de.vtt" 
         srclang="de">
  </track>
</video>

WebVTT

WEBVTT FILE

railroad
00:00:10.000 --> 00:00:12.500
Left uninspired by the crust of railroad earth

manuscript
00:00:13.200 --> 00:00:16.900
that touched the lead to the pages of your manuscript.

More information @ HTML5Rocks.com

Audio Descriptions

Animation in General

fin!

#cos17 Audio & Video – Accessibility & Multi-Screen Design

By Eric Eggert

#cos17 Audio & Video – Accessibility & Multi-Screen Design

  • 356
Loading comments...

More from Eric Eggert