Video Tag MinneWebCon presentation
Upcoming SlideShare
Loading in...5
×
 

Video Tag MinneWebCon presentation

on

  • 517 views

 

Statistics

Views

Total Views
517
Views on SlideShare
517
Embed Views
0

Actions

Likes
0
Downloads
1
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />

Video Tag MinneWebCon presentation Video Tag MinneWebCon presentation Presentation Transcript

  • <video> will be your friend Joy Through “Standards”
  • Overview • What is the video tag • Why you can’t use it • Why you’ll use it anyways
  • What is the Video Tag • <video> makes video a first class citizen • Part of the HTML5 specification • As simple as <img>
  • Why You Can’t Use it • Compatibility • User Experience
  • Compatibility • <video> standard does not mandate a format • Just like the <img> tag
  • Two Primary Formats Theora H.264
  • Two Primary Formats Theora : ogg H.264 : mov/mp4/m4v
  • Taking sides H.264 OGG *
  • H.264 • Modern • Scalable • Efficient
  • But... • Patented • Royalty’d
  • Licensing • MPEG-LA manages a patent pool • Costs for Encoding, Decoding and potentially performance
  • Licensing • MPEG-LA manages a patent pool • Costs for Encoding, Decoding and potentially performance
  • What if you’re Firefox? • Hard to pay a license cost • Need cross platform support • Values
  • What if you’re Firefox? • Hard to pay a license cost • Need cross platform support Software Patents • Values make me sad
  • OGG to the Rescue? • On2 open sourced VP3, released patent claims • Xiph.org group turns it into Theora • Continues to enhance VP3
  • But... • Technically inferior • Submarine patents? • Hardware support
  • What to do? • Train is leaving the station • IE9, Chrome, Safari, iEverything are on board with H.264 • Content producers are on board • Fallback options exist
  • What to do? • Train is leaving the station • IE9, Chrome, Safari, iEverything are on board with H.264 • Content producers are on board • Fallback options exist
  • Fallback example <video> <source src=“video.mp4” type= “video/mp4” /> <source src= “video.ogg” type= “video/ogg” /> <object width="425" height="350"><param name="movie" value="myplayer.swf" /> <param name= “flashvars” value= “file=video.mp4” /> <embed src="myplayer.swf" flashvars= “file=video.mp4” type="application/x-shockwave-flash" width="425" height="350"> </ embed> </object> </video>
  • Fallback example <video> <source src=“video.mp4” type= “video/mp4” /> <source src= “video.ogg” type= “video/ogg” /> <object width="425" height="350"><param name="movie" value="myplayer.swf" /> <param name= “flashvars” value= “file=video.mp4” /> <embed src="myplayer.swf" flashvars= “file=video.mp4” type="application/x-shockwave-flash" width="425" height="350"> </ embed> </object> </video>
  • Fallback example <video> <source src=“video.mp4” type= “video/mp4” /> <source src= “video.ogg” type= “video/ogg” /> <object width="425" height="350"><param name="movie" value="myplayer.swf" /> <param name= “flashvars” value= “file=video.mp4” /> <embed src="myplayer.swf" flashvars= “file=video.mp4” type="application/x-shockwave-flash" width="425" height="350"> </ embed> </object> </video>
  • Fallback example <video> <source src=“video.mp4” type= “video/mp4” /> <source src= “video.ogg” type= “video/ogg” /> <object width="425" height="350"><param name="movie" value="myplayer.swf" /> <param name= “flashvars” value= “file=video.mp4” /> <embed src="myplayer.swf" flashvars= “file=video.mp4” type="application/x-shockwave-flash" width="425" height="350"> </ embed> </object> </video>
  • Fallback example <video> <source src=“video.mp4” type= “video/mp4” /> <source src= “video.ogg” type= “video/ogg” /> <object width="425" height="350"><param name="movie" value="myplayer.swf" /> <param name= “flashvars” value= “file=video.mp4” /> <embed src="myplayer.swf" flashvars= “file=video.mp4” type="application/x-shockwave-flash" width="425" height="350"> </ embed> </object> </video>
  • Why you want to use it • Video can be a rich part of design • Hardware acceleration • Cross platform
  • Let’s build a player
  • Video Tag Attributes preload autoplay controls (autobuffer) height loop poster src width
  • Video Tag Attributes preload autoplay controls (autobuffer) height loop poster src width
  • Video Tag Attributes preload autoplay controls (autobuffer) height loop poster src width
  • Video Tag Attributes preload autoplay controls (autobuffer) height loop poster src width
  • Javascript Attributes currentTime startTime duration paused ended seekable buffered played volume muted
  • Javascript Events progress play pause playing canplay canplaythrough ended timeupdate
  • Living The Dream
  • Living The Dream
  • Caveats • Some mobile platforms won’t run your JS • Hardware accelerated platforms maybe limited to one video • Make sure your server supports file resume
  • Summary • <video> is coming • It’s A Good Thing • There are premade players today - jilion.com/sublime • Great javascript helpers - html5video.org
  • @cmcfadden http://z.umn.edu/lh