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

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: 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

fetch('segment.ts')

Web Components

Web Component Specs

Custom Elements
Shadow Dom
Templates
HTML Imports

Custom Elements


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

  // html
  

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

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

Make all the elements!

X-Gif

“Everything talks HTML”

x-Playlist


 <x-playlist loop>
   
   
   
 </x-playlist>

github.com/heff/x-playlist

Web Components for custom player UIs

Browser Support for WebComponents.js

Platform Integrations

Network Info API

Connection type:

(try changing your connection)

Battery Status

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:

Other browser APIs

that are changing video

Steve Heffernan / @heff
Video.js
Brightcove