Moving...

stuff

Images!

Macromedia Flash

Javascript

CSS

Media
1st Class Citizens

• Native Tags
• DOM Manipulation
• Holistic experience

Native Tags

DOM Manipulation

Video+Canvas

Holistic experience

Video+CSS

Audio

But remember! Autoplay is bad, mmmkay?

Best Case

• src — a valid URL
• autoplay - boolean
• loop — a boolean
• controls - a boolean
• preload - none | metadata | auto

Codecs

Ogg and MP3

https://www.scirra.com/blog/44/on-html5-audio-formats-aac-and-ogg

For now, polyfill: http://kolber.github.io/audiojs/

Style & Responsiveness

Limited CSS attached just to the controls.

Controls are styled just like form elements - painfully

No controls? Use Javacript to kick off audio's events.

Video

Best Case

• base attributes similar to audio
• poster - an image file shown while no video data is available

http://developers.whatwg.org/the-video-element.html#the-video-element

Codecs & Headaches

This is why we can't have nice things.

Libraries

• mediaelementjs - replicates HTML5 API
• videojs - OSS HTML5 player
• vidly - hosts & converts & renders

Code

            
            
	
              Closed Format:	"MP4"
              Open Format:	"Ogg"
            
            

camendesign.com/code/video_for_everybody
no scripting, FLASH fallback in pure markup

Style & Responsiveness

• Native controls are by the user agent.
• Libraries decorate with other HTML & JS

Responsive?

            video {
              max-width: 100%;
              height: auto;
            }
            

or:fitvidsjs

Images

Why Care

Best Case

            
               
               
               
               
               
Accessible text
            
            

Spoiler! These are unintuitive, unimplemented, draft ideas.

Don't Use Assets

• Icon Fonts - symbolset
• SVG - IE9 brought support!. (Android still needs a polyfill.)

Change The Asset

WebP

"WebP is a new image format that provides lossless and lossy compression for images on the web."

By Google

Change the Asset

Progressive JPGs

joscandreu.com

Change the Asset

Super Compression

Retina Revolution

Style & Responsiveness

            img {
              max-width: 100%;
            }