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:
User needs to be in control.
Don’t autostart audio.
audio element
Video
Video Player Example:
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 mutedOn 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