Other browser APIs

that are changing video

Steve Heffernan / @heff

What you've heard of elsewhere...

HTML5 video
Media Source Extensions (MSE)
Encrypted Media Extensions (EME)
WebRTC

Normal HTML5 Video

HTML5 Video + MSE

HTML5 Video + MSE + EME

WebRTC

Other

STREAMS

Streaming Video Without Streams

Two issues, speed and memeory

Streaming Video With Streams

Fetch + Streams

            fetch('/video-segment.mp4').then(function(response) {
              var responseStream = response.body.getReader();

              sourceBuffer.appendStream(responseStream);
            });

Pipe Chain

What can we do with Streams?

Faster start times and seek times
Transmuxing
Real-time video effects
Transcoding

Streams (via Fetch) support

Service Workers

Service workers live in the layer between.

Service Workers: What are they?

What can we do with Service Workers?

Store video for offline viewing, DVR
Share content between pages
Pre-fetching content the user is likely to need
Transmuxing/Transcoding

- Offline caching of content (DVR) - Downloading and storing the next 3 podcasts - sharing content between pages - Performance enhancements, pre-fetching resources that the user is likely to need in the near future, such as the new few pictures in a photo album. - Reacting to a particular time & date - Transcoding

fetch('segment.ts')

<video src="video.m3u8"></video> Backdoor approach media source extensions

Web Components

Web Component Specs

Custom Elements
Shadow Dom
Templates
HTML Imports

So web components have been around for a bit but it wasnt until recently that I got excited about what they mean for a web video player. And I'm going to try to show you why that is.

Custom Elements

  document.registerElement('my-element', MyElement);

  // html
  <my-element></my-element>

  // js
  document.createElement('my-element');
  document.querySelector('my-element');

  // css
  my-element {
    color: red;
  }

Custom elements with custom functionality that the browser recognizes

Make all the elements!

X-Gif

“Everything talks HTML” The world is not a safe place for a video player.

x-Playlist

 <x-playlist loop>
   <video src="..." controls="" preload="none"></video>
   <video src="..." controls="" preload="none"></video>
   <audio src="..." controls="" preload="none"></audio>
 </x-playlist>

github.com/heff/x-playlist

Web Components for custom player UIs

  <player>
    <button is="play-toggle"></button>
    <range is="volume-slider"></range>
    <range is="media-timeline"></range>
    <button is="player-setting"></button>
    <button is="player-fullscreen"></button>
  </player>

All of the individual controls can be custom elements With video.js we've done a lot of work to make that easy, but you still have to learn the video.js API. You don't walk into the project already knowing how to move controls around, but if it were all native looking elements. You know already know how to work with HTML.

Browser Support for WebComponents.js

Platform Integrations

Network Info API

Connection type:

(try changing your connection)

Battery Status

Check Battery

Battery status: Battery charging:

Vibration API

http://bit.ly/1M4Y8L8

Other other APIs

ConnectionType: Spaceship Wifi

fetch('war.webm')

sourceBuffer.appendStream(warStream);

This has been: