Buffering is a four-letter word

A presentation on web video performance

Created by
David LaPalomento :: Lead Player Engineer at Brightcove
Steve Heffernan :: Co-founder of Zencoder & Creator of Video.js

The goal of video performance is to provide quality video while removing waiting from the video viewing experience

Three areas where waiting may occur

  • Player Loading
  • Video File Loading
  • Connection Management



YouTube JavaScript Loading

Player Loading

Player Loading

Video File Loading

Video Loading

Connection Speed Management

Video Buffering - Connection Speed Management

Player Loading

Player Loading

Video Playback Technology

VS

Video Tech Load-off

RUN 10x each (click me)

Waiting...

Waiting...

JavaScript: Why is it used?

  • Embed code generation
  • Custom features with HTML5
  • API Access

JavaScript: Best Practices

  • Combine
  • Minify
  • Host on a CDN
  • Load before </body>*

	...
	
</body>
</html>

JavaScript: Loading for Video Pages

  • Load immediately after the video in the HTML
  • Ajax load other major content pieces
  • Use an async loader
YouTube JavaScript Loading

Youtube Page Source

YouTube Page Source

JavaScript: Async Loader

<HEAD>

<BODY>

myVideoPlayer.js


var _vidqCopy = _vidq || [];
_vidq = { 
	push: function(placeholder_id){
		// Player Initialization
	};
}
_vidqCopy.forEach(_vidq.push);

Perception of Readiness

Your viewers will thank you for lying to them.

Run your own trials: github.com/brightcove/perception

Video File Loading

Video Loading

Video Player Settings

PRELOAD: Use when you expect the user to watch the video on the page and you want it to load quickly.


AUTOPLAY: Use when the page is dedicated the video and you know the user will watch it.

Loading videos sooner in HTML5

With the load() method on the video element, you can trigger video loading sooner than the browser would normally.

Transfer

  • CDN
  • Follow content-caching best practices but:
    • "replays" are less common than repeat visitors
    • don't expect caching from mobile devices


Video Encoding

Know your audience.

Video Encoding: Resolutions

  • Start with the most common display sizes
  • Dimensions divisible by 16
  • De-interlace

Video Encoding: Frame Rates

  • 30 FPS is a good max frame rate
  • Reduce to 15 FPS for lower bitrate streams


Video Encoding: Bit Rates

  • Target below your average customer's bandwidth
  • Audio quality can be more important than video quality

Video Encoding: Formats

Video Encoding: MP4 Settings

  • Make sure the headers are at the front of the file ("QT fast start", "Optimze for web")
  • Use the highest profile setting your device targets can handle

Connection Speed Management

Video Buffering - Connection Speed Management

Starting Strategy


$$\frac{bitrate}{bandwidth} < 1 \implies spinner $$

Bitrate Selection

Encode multiple renditions

Strategy 1: Manual Selection

Let the viewer decide

Selecting video quality

Strategy 2: Automatic Selection

  • Many analytics libraries record client bandwidth
  • window.performance

Strategy 3: Dynamic Selection

Adaptive Streaming

swap renditions during playback based on measured bandwidth

HLS is supported on iOS devices and newer Androids. HDS is supported in Flash.

Today

12,149 video requests

FormatCount
flv7508
mp43912
f4v286
m4v124
m3u8101
avi89
mov70
ogg36
wmv13
webm8
ogv2

The Future

FormatCount
m3u813
mp410
webm1

The Future

  • No javascript for the sake of compatibility
  • Peer-to-peer video with webRTC
  • Adaptive streaming in javascript with Media Sources

Thanks!


David LaPalomento (@dlapalomento)
Steve Heffernan (@heff)


This presentation is available at: http://heff.github.com/buffering


Help make the world safer for HTML video: github.com/videojs