Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Optimizing HTML5 Video

1,862 views

Published on

Billy Hoffman from Rigor shows how how to optimize MP4, WebM, GIF and other HTML5 video tricks

Published in: Internet
  • Be the first to comment

  • Be the first to like this

Optimizing HTML5 Video

  1. 1. Billy Hoffman billy.hoffman@rigor.com rigor.com Optimizing HTML5 Video
  2. 2. Agenda • Overview of HTML5 Video • Optimizing for context • Optimizing for content • Bonus: Animated GIFs
  3. 3. What Is HTML5 Video?
  4. 4. Terminology • Container Format • The file/structure used to store stuff (MP4, WebM, AVI) • Audio data, Video data, Meta data • Codec • Algorithm used to compress/encode video/audio • Video: H.264, VP8, VP9, Theora • Bitrate • I’ll probably just say MP4 Video, WebM Video, etc
  5. 5. HTML5 Video
  6. 6. HTML5 Video
  7. 7. HTML5 Video
  8. 8. So… Multiple Video Types? • Yeah • It’s complicated • Concerns about how owns patents on codecs/algorithms • Concerns about licensing costs • Really a proxy fight between the browsers creators
  9. 9. H.264 in MP4 Won
  10. 10. WebM Has Strong Support
  11. 11. Microsoft Adding WebM to Edge
  12. 12. Getting the data • Playing a local file • Pseudo Streaming • HTTP get requests • Adaptive/Live Streaming • HTTP Live Streaming • MPEG-DASH • Flash stuff
  13. 13. Optimizing Video for Context
  14. 14. 3 Rules of Frontend Performance 1. Reduce the amount of data 2. Reduce the number of requests 3. Structure data for optimal downloading and rendering
  15. 15. Is it the Right Size? Video File: 1280 x 720
  16. 16. Finding Video Dimensions
  17. 17. Wait a second…
  18. 18. Muted HTML5 Video as Hero…
  19. 19. Optimizing Video Content
  20. 20. Playing an HTML5 Video • Fetches Video file • Using Range requests as you skip around the file
  21. 21. Aside: Support Range Requests! • HTTP Range Request • Accept-Ranges • Range: • Allows browser to do partial downloads • Required for seeking/streaming • Easy to test support
  22. 22. Structure of a MP4 File • Made of “Atoms” • Contains discrete pieces of data (like PNG chunks) • Video data, audio data, meta data, everything • moov atom acts like a table of contents
  23. 23. Jumping around to find the MOOV
  24. 24. Move the MOOV • If we move it to the front… • 1 HTTP Request... • 200ms of delay missed... • 600KB of content avoided...
  25. 25. Do it right from the start
  26. 26. Remember These Guys… • Other formats for compatibility • … ... Leverage as an optimization? • How browsers choose the video • Look at each <source> • Support type? • Play it!
  27. 27. Bloated Default HTML5 Video • Formats store data differently • What if MP4 is larger than WebM? • Too bad • Take Away: Place smallest source first • Example: https://headspin.io/
  28. 28. Multiple Video Sources. Same Quality?
  29. 29. Multiple Video Sources. Same Bitrate?
  30. 30. Structure of a WebM File • Really just a subset of Matroska container (MKV) • Made of “Elements” • Contains discrete pieces of data (like PNG chunks) • Video data, audio data, meta data, everything • “SeekHead” element acts like a table of contents • Sounding familiar… ?
  31. 31. Seeking around to find the SeekHead…
  32. 32. Optimize WebM Structure • Only 1 SeekHead element, placed at the front… • Great open source tool mkclean
  33. 33. Other Standard Optimizations • Are you caching the file? • Do you have a Last-Modified header?
  34. 34. BONUS! Optimizing Animated GIFs… … the other “video” format
  35. 35. Animated GIFs: Amazing it even works “The Graphics Interchange Format is not intended as a platform for animation, even though it can be done in a limited way.” - GIF89A Specification
  36. 36. Animated GIFs: The Good • Universal support on all platforms • No patent or licensing concerns • Easy, widely available creation tools • A culture that has grown around creating and sharing funny animated GIFs.
  37. 37. Animated GIFs: The (Unbelievably) Bad • 256 colors per video frame • LZW compression sucks for photographic data • Animated system not designed differences between video frames • No sexy video tricks • chroma subsampling, discrete cosine transforms, or motion compensation • No hardware support on mobile • More CPU, RAM, Power • 5x to 10x larger than a properly encoded video
  38. 38. YIKES! 26.7MB!!!!
  39. 39. Lossless Animated GIF Optimization • Gifsicle • Standard lossless optimizations • Remove non-graphic stuff • Find deltas between animation frames… • Pretty good for animations • Terrible for video
  40. 40. Lossy Optimization for Animated GIFs • Lossy matching in the LZW encoder • Modified version of gifsicle 2.9 MB 1.1 MB https://kornel.ski/lossygif
  41. 41. Fake GIF as an MP4?
  42. 42. What’s Actually going on?
  43. 43. Animated GIF as MP4 • Convert GIF to MP4 with ffmpeg • Alter the HTML markup
  44. 44. HTML5 Video Optimization Check List • Is your video optimized for how it will be used? • Is your <VIDEO> tag using the right size? • Is your <VIDEO> muted? Strip the audio! • Does your server use HTTP Range Requests? • What about Last-Modified? • What about Expires/Cache-Control? • Are you using multiple <SOURCE> tags? • Is the smallest file first? • Are all the videos roughly the same bitrate?
  45. 45. HTML5 Video Optimization Check List (con’t) • Are your MP4 files optimized for fast start? • Are your WebM files optimized for fast start and fast seeking? • Animated GIFs • Use lossless for animations • Use Lossy for video clips • Advanced: Try converting to MP4 instead…
  46. 46. Billy Hoffman billy.hoffman@rigor.com rigor.com Optimizing HTML5 Video

×