Audio

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.

Accessibility Originates With UX:
A BBC iPlayer Case Study

by Henny Swan

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

https://webkit.org/blog/7551/responsive-design-for-motion/