Upload
rigor
View
951
Download
1
Embed Size (px)
Citation preview
Agenda• Overview of HTML5 Video• Optimizing for context• Optimizing for content• Bonus: Animated GIFs
What Is HTML5 Video?
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
HTML5 Video
HTML5 Video
HTML5 Video
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
H.264 in MP4 Won
WebM Has Strong Support
Microsoft Adding WebM to Edge
Getting the data• Playing a local file• Pseudo Streaming• HTTP get requests
• Adaptive/Live Streaming• HTTP Live Streaming• MPEG-DASH• Flash stuff
Optimizing Video for Context
3 Rules of Frontend Performance1. Reduce the amount of data2. Reduce the number of
requests3. Structure data for optimal
downloading and rendering
Is it the Right Size?
Video File: 1280 x 720
Finding Video Dimensions
Wait a second…
Muted HTML5 Video as Hero…
Optimizing Video Content
Playing an HTML5 Video• Fetches Video file• Using Range
requests as you skip around the file
Aside: Support Range Requests!• HTTP Range Request• Accept-Ranges• Range:
• Allows browser to do partial downloads• Required for
seeking/streaming• Easy to test support
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
Jumping around to find the MOOV
Move the MOOV• If we move it to the front…• 1 HTTP Request...• 200ms of delay missed...• 600KB of content avoided...
Do it right from the start
Remember These Guys…• Other formats for compatibility• … ... Leverage as an optimization?• How browsers choose the video• Look at each <source>• Support type?• Play it!
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/
Multiple Video Sources. Same Quality?
Multiple Video Sources. Same Bitrate?
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… ?
Seeking around to find the SeekHead…
Optimize WebM Structure• Only 1 SeekHead element, placed at the front…
• Great open source tool mkclean
Other Standard Optimizations• Are you caching the file?• Do you have a Last-Modified
header?
BONUS!Optimizing Animated GIFs…
… the other “video” format
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
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.
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
YIKES! 26.7MB!!!!
Lossless Animated GIF Optimization• Gifsicle• Standard lossless optimizations• Remove non-graphic stuff• Find deltas between animation
frames…
• Pretty good for animations• Terrible for video
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
Fake GIF as an MP4?
What’s Actually going on?
Animated GIF as MP4• Convert GIF to MP4 with ffmpeg
• Alter the HTML markup
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?
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…