<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 P...
OGG to the Rescue?

• On2 open sourced VP3, released patent
  claims
• Xiph.org group turns it into Theora
• Continues to ...
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 produce...
What to do?

• Train is leaving the station
• IE9, Chrome, Safari, iEverything are on
  board with H.264
• Content produce...
Fallback example
<video>
  <source src=“video.mp4” type= “video/mp4” />
  <source src= “video.ogg” type= “video/ogg” />
  ...
Fallback example
<video>
  <source src=“video.mp4” type= “video/mp4” />
  <source src= “video.ogg” type= “video/ogg” />
  ...
Fallback example
<video>
  <source src=“video.mp4” type= “video/mp4” />
  <source src= “video.ogg” type= “video/ogg” />
  ...
Fallback example
<video>
  <source src=“video.mp4” type= “video/mp4” />
  <source src= “video.ogg” type= “video/ogg” />
  ...
Fallback example
<video>
  <source src=“video.mp4” type= “video/mp4” />
  <source src= “video.ogg” type= “video/ogg” />
  ...
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



    s...
Video Tag Attributes
  preload
               autoplay   controls
(autobuffer)


  height        loop      poster



    s...
Video Tag Attributes
  preload
               autoplay   controls
(autobuffer)


  height        loop      poster



    s...
Video Tag Attributes
  preload
               autoplay   controls
(autobuffer)


  height        loop      poster



    s...
Javascript Attributes
currentTime   startTime   duration


  paused       ended      seekable


 buffered      played     ...
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 su...
Summary

• <video> is coming
• It’s A Good Thing
• There are premade players today -
  jilion.com/sublime
• Great javascri...
@cmcfadden
http://z.umn.edu/lh
Video Tag MinneWebCon presentation
Upcoming SlideShare
Loading in …5
×

Video Tag MinneWebCon presentation

441
-1

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
441
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide




































  • Video Tag MinneWebCon presentation

    1. 1. <video> will be your friend Joy Through “Standards”
    2. 2. Overview • What is the video tag • Why you can’t use it • Why you’ll use it anyways
    3. 3. What is the Video Tag • <video> makes video a first class citizen • Part of the HTML5 specification • As simple as <img>
    4. 4. Why You Can’t Use it • Compatibility • User Experience
    5. 5. Compatibility • <video> standard does not mandate a format • Just like the <img> tag
    6. 6. Two Primary Formats Theora H.264
    7. 7. Two Primary Formats Theora : ogg H.264 : mov/mp4/m4v
    8. 8. Taking sides H.264 OGG *
    9. 9. H.264 • Modern • Scalable • Efficient
    10. 10. But... • Patented • Royalty’d
    11. 11. Licensing • MPEG-LA manages a patent pool • Costs for Encoding, Decoding and potentially performance
    12. 12. Licensing • MPEG-LA manages a patent pool • Costs for Encoding, Decoding and potentially performance
    13. 13. What if you’re Firefox? • Hard to pay a license cost • Need cross platform support • Values
    14. 14. What if you’re Firefox? • Hard to pay a license cost • Need cross platform support Software Patents • Values make me sad
    15. 15. OGG to the Rescue? • On2 open sourced VP3, released patent claims • Xiph.org group turns it into Theora • Continues to enhance VP3
    16. 16. But... • Technically inferior • Submarine patents? • Hardware support
    17. 17. 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
    18. 18. 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
    19. 19. 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>
    20. 20. 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>
    21. 21. 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>
    22. 22. 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>
    23. 23. 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>
    24. 24. Why you want to use it • Video can be a rich part of design • Hardware acceleration • Cross platform
    25. 25. Let’s build a player
    26. 26. Video Tag Attributes preload autoplay controls (autobuffer) height loop poster src width
    27. 27. Video Tag Attributes preload autoplay controls (autobuffer) height loop poster src width
    28. 28. Video Tag Attributes preload autoplay controls (autobuffer) height loop poster src width
    29. 29. Video Tag Attributes preload autoplay controls (autobuffer) height loop poster src width
    30. 30. Javascript Attributes currentTime startTime duration paused ended seekable buffered played volume muted
    31. 31. Javascript Events progress play pause playing canplay canplaythrough ended timeupdate
    32. 32. Living The Dream
    33. 33. Living The Dream
    34. 34. Caveats • Some mobile platforms won’t run your JS • Hardware accelerated platforms maybe limited to one video • Make sure your server supports file resume
    35. 35. Summary • <video> is coming • It’s A Good Thing • There are premade players today - jilion.com/sublime • Great javascript helpers - html5video.org
    36. 36. @cmcfadden http://z.umn.edu/lh
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×