Moving...

stuff

Images!

Macromedia Flash

Javascript

CSS

Media 1st Class Citizens

• Native Tags
• DOM Manipulation
• Holistic experience

Native Tags

 
              <audio src="audio.mp3" preload="auto" controls=""></audio>
            

              <video controls="">
                <source src="foo.ogg" type="video/ogg">
                <source src="foo.mp4" type="video/mp4">
              </video>
            

              <img src="image.svg" alt="oooohhhh yeahhhhh">
            

DOM Manipulation

Video+Canvas

Holistic experience

Video+CSS

Audio

But remember! Autoplay is bad, mmmkay?

Best Case

              <audio controls="" preload="auto" autoplay=""> 
                <source src="elvis.mp3">
                <source src="elvis.ogg">
                <!-- now include flash fall back -->
              </audio>
            

• 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

              <video src="video.mp4" controls="" autobuffer="">
              </video>
            

• 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

            <video width="640" height="360" controls="">
              <source src="__VIDEO__.MP4" type="video/mp4">
              <source src="__VIDEO__.OGV" type="video/ogg">
              <object width="640" height="360" type="application/x-shockwave-flash" data="__FLASH__.SWF">
                <param name="movie" value="__FLASH__.SWF">
                <param name="flashvars" value="controlbar=over&image=__POSTER__.JPG&file=__VIDEO__.MP4">
                <img src="__VIDEO__.JPG" width="640" height="360" alt="__TITLE__" title="No video playback capabilities, please download the video below">
              </object>
            </video>
            <p>	
              Closed Format:	<a href="__VIDEO__.MP4" class="roll"><span data-title=""MP4"">"MP4"</span></a>
              Open Format:	<a href="__VIDEO__.OGV" class="roll"><span data-title=""Ogg"">"Ogg"</span></a>
            </p>
            

camendesign.com/code/video_for_everybodyno 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

              <img alt="The Breakfast Combo" src="banner.jpeg" srcset="banner-HD.jpeg 2x, banner-phone.jpeg 100w, banner-phone-HD.jpeg 100w 2x">
            

            <picture width="500" height="500">
               <source media="(min-width: 45em)" src="large.jpg">
               <source media="(min-width: 18em)" src="med.jpg">
               <source src="small.jpg">
               <img src="small.jpg" alt="">
               <p>Accessible text</p>
            </picture>
            

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%;
            }