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
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
12. Getting the data
• Playing a local file
• Pseudo Streaming
• HTTP get requests
• Adaptive/Live Streaming
• HTTP Live Streaming
• MPEG-DASH
• Flash stuff
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
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
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/
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… ?
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
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
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…