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

1. Billy Hoffman
billy.hoffman@rigor.com
rigor.com
Optimizing HTML5 Video

2. Agenda
• Overview of HTML5 Video
• Optimizing for context
• Optimizing for content
• Bonus: Animated GIFs

3. What Is HTML5 Video?

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. HTML5 Video

6. HTML5 Video

7. HTML5 Video

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. H.264 in MP4 Won

10. WebM Has Strong Support

11. Microsoft Adding WebM to Edge

12. Getting the data
• Playing a local file
• Pseudo Streaming
• HTTP get requests
• Adaptive/Live Streaming
• HTTP Live Streaming
• MPEG-DASH
• Flash stuff

13. Optimizing Video for Context

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. Is it the Right Size?
Video File: 1280 x 720

16. Finding Video Dimensions

17. Wait a second…

18. Muted HTML5 Video as Hero…

19. Optimizing Video Content

20. Playing an HTML5 Video
• Fetches Video file
• Using Range
requests as you skip
around the file

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. 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. Jumping around to find the MOOV

24. Move the MOOV
• If we move it to the front…
• 1 HTTP Request...
• 200ms of delay missed...
• 600KB of content avoided...

25. Do it right from the start

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. 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. Multiple Video Sources. Same Quality?

29. Multiple Video Sources. Same Bitrate?

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. Seeking around to find the SeekHead…

32. Optimize WebM Structure
• Only 1 SeekHead element, placed at the front…
• Great open source tool mkclean

33. Other Standard Optimizations
• Are you caching the file?
• Do you have a Last-Modified
header?

34. BONUS!
Optimizing Animated GIFs…
… the other “video” format

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. 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. 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. YIKES! 26.7MB!!!!

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. 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. Fake GIF as an MP4?

42. What’s Actually going on?

43. Animated GIF as MP4
• Convert GIF to MP4 with ffmpeg
• Alter the HTML markup

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. 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. Billy Hoffman
billy.hoffman@rigor.com
rigor.com
Optimizing HTML5 Video