Reveal.js – HTML Presentations Made Easy – Vertical Slides

View Github Repository Open presentation in a new window

heff

See all presentation from heff

Reveal.js – HTML Presentations Made Easy – Vertical Slides

0 0

buffering

"Buffering is a four-letter word" -- A presentation on web video performance

On Github heff / buffering

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

Player Loading

Video File Loading

Connection Speed Management

Player Loading

Goal: Player is ready for user interaction (big play button is showing)

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>*
	...
	<script src="myVideoPlayer.js"></script>
</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 Page Source

Youtube actually in-lines a good amount of JavaScript (32k) immediately after where the player will load. The JS will either load the SWF or the HTML5 player.

JavaScript: Async Loader

<HEAD>

<script>
var _vidq=[];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src='myVideoPlayer.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
</script>

<BODY>

<div id="my_video_placeholder"></div>
<script>
var _vidq.push('my_video_placeholder');
</script>

myVideoPlayer.js

var _vidqCopy = _vidq || [];
_vidq = { 
	push: function(placeholder_id){
		// Player Initialization
	};
}
_vidqCopy.forEach(_vidq.push);
For video-specific pages. Think of a Youtube video page. The video is the main content and by the time you reach that page you intend to watch the video. The page is just a vehical for the video, with extra meta data like the title.

Perception of Readiness

Your viewers will thank you for lying to them.

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

Video File Loading

Goal: Video is playing (time to first frame is showing)

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.

<video id="vid1" src="myVideo.mp4"></video>
<script>
  var vid1 = document.getElmentById('vid1');
  vid1.load();
</script>

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

Goal: No buffering! (never show the spinner)

Starting Strategy

("preformance")

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

Bitrate Selection

Encode multiple renditions

Strategy 1: Manual Selection

Let the viewer decide

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

Format Count flv 7508 mp4 3912 f4v 286 m4v 124 m3u8 101 avi 89 mov 70 ogg 36 wmv 13 webm 8 ogv 2

The Future

Format Count m3u8 13 mp4 10 webm 1

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