Optimizing HTML5 Video

Billy Hoffmanbilly.hoffman@rigor.com

rigor.com

Optimizing HTML5 Video

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…

Billy Hoffmanbilly.hoffman@rigor.com

rigor.com

Optimizing HTML5 Video