Videogular

and the future of HTML5 video

Raúl Jiménez

Frontend Architect

elecash@gmail.com

@elecash

@2fdevs

Hallo/Hello/Hola

http://twofuckingdevelopers.com

Video is the engine

of the most important content

CATS

and porn, but mostly cats

LET'S TALK ABOUT VIDEO!

REALITY

VS

EXPECTATION

<video> LACKS

Poster only shows at the beggining

Can't customize controls look&feel

Can't add custom controls

No advertisement support

No live streaming support

etc...

Video players

JWPlayer

Video.js

Flowplayer

OSMF

MediaElementsJS

etc...

Those players are awesome 

<link rel="stylesheet" href="path/to/skin.css">

<div class="library-name">
   <video>
      <source type="video/webm" src="path/to/video.webm">
      <source type="video/mp4"  src="path/to/video.mp4">
   </video>
</div>

<script src="path/to/dependencies.js"></script>
<script src="path/to/video-library.js"></script>
<script src="path/to/video-plugins.js"></script>

But...

We can make it better

Videogular proposal

A simple HTML5 API for designers

A bindable JS API for developers

No Flash support

No legacy browsers support

DASH support

Videogular

HTML5 API

Videogular HTML5 API

<videogular vg-config="path/to/data/config.json">
    <vg-media vg-src></vg-media>
</videogular>

<script src="path/to/angular.js"></script>
<script src="path/to/videogular.js"></script>

Because web designers love HTML5 and CSS

Videogular HTML5 API

<videogular vg-config="path/to/data/config.json">
    <vg-media vg-src></vg-media>

    <vg-buffering></vg-buffering>
</videogular>

<script src="path/to/angular.js"></script>
<script src="path/to/videogular.js"></script>
<script src="path/to/vg-buffering.js"></script>

Adding a plugin is easy as pie

Videogular HTML5 API

<videogular vg-config="path/to/data/config.json">
    <vg-media vg-src></vg-media>

    <vg-controls>
        <vg-play-pause-button></vg-play-pause-button>
        <vg-time-display>{{ currentTime | date:'mm:ss' }}</vg-time-display>
        <vg-scrub-bar>
            <vg-scrub-bar-current-time></vg-scrub-bar-current-time>
        </vg-scrub-bar>
        <vg-time-display>{{ timeLeft | date:'mm:ss' }}</vg-time-display>
        <vg-volume>
            <vg-mute-button></vg-mute-button>
            <vg-volume-bar></vg-volume-bar>
        </vg-volume>
        <vg-fullscreen-button></vg-fullscreen-button>
    </vg-controls>
    
    <vg-buffering></vg-buffering>
</videogular>

Create custom layouts is intuitive

<videogular vg-config="path/to/data/config.json">
    <vg-media vg-src></vg-media>

    <vg-controls>
        <vg-play-pause-button></vg-play-pause-button>
        <vg-scrub-bar>
            <vg-scrub-bar-current-time></vg-scrub-bar-current-time>
        </vg-scrub-bar>
        <vg-time-display>{{ timeLeft | date:'hh:mm:ss' }}</vg-time-display>
        <vg-mute-button></vg-mute-button>
        <vg-fullscreen-button></vg-fullscreen-button>
    </vg-controls>
    
    <vg-buffering></vg-buffering>
</videogular>

Videogular HTML5 API

<videogular vg-config="path/to/data/config.json">
    <vg-media vg-src></vg-media>

    <vg-controls>
        <vg-play-pause-button></vg-play-pause-button>
        <vg-scrub-bar>
            <vg-scrub-bar-current-time></vg-scrub-bar-current-time>
        </vg-scrub-bar>
        <vg-time-display>{{ timeLeft | date:'mm:ss' }}</vg-time-display>
        <vg-fullscreen-button></vg-fullscreen-button>
    </vg-controls>
    
    <vg-buffering></vg-buffering>
    <vg-poster></vg-poster>
    <a class="link" href="http://www.website.com">Visit website</a>
</videogular>

Create basic interactions with HTML5

Videogular HTML5 API

<videogular vg-config="path/to/data/config.json">
    <vg-media vg-src></vg-media>

    <vg-controls>
        <vg-play-pause-button></vg-play-pause-button>
        <vg-scrub-bar>
            <vg-scrub-bar-current-time></vg-scrub-bar-current-time>
        </vg-scrub-bar>
        <vg-time-display>{{ timeLeft | date:'mm:ss' }}</vg-time-display>
        <vg-fullscreen-button></vg-fullscreen-button>
    </vg-controls>
    
    <vg-buffering></vg-buffering>
    <vg-poster></vg-poster>
    <button ng-click="showMoreInfo=true"></button>
    <section ng-show="showMoreInfo">More Info</section>
</videogular>

Create custom interactions with AngularJS

Videogular HTML5 API

<videogular vg-config="path/to/data/config.json">
    <vg-media vg-src></vg-media>

    <vg-controls>
        <vg-play-pause-button></vg-play-pause-button>
        <vg-scrub-bar>
            <vg-scrub-bar-current-time></vg-scrub-bar-current-time>
        </vg-scrub-bar>
        <vg-time-display>{{ timeLeft | date:'mm:ss' }}</vg-time-display>
        <vg-fullscreen-button></vg-fullscreen-button>
    </vg-controls>
    
    <vg-buffering></vg-buffering>
    <vg-poster></vg-poster>
    <section class="info-layout" 
             ng-show="API.currentTime >= 0 && API.currentTime <= 10000">
        Lorem ipsum
    </section>
</videogular>

Create complex interactions with Videogular's API

AWESOME

Videogular

JavaScript API

Videogular JS API

'use strict';
angular.module('myApp').controller('MainCtrl', ["$scope", function ($scope) {
        $scope.config = {
            sources: [{src: "path/to/video.mp4", type: "video/mp4"},
                      {src: "path/to/video.webm", type: "video/webm"}]
        };

        $scope.onPlayerReady = function (API) {
            $scope.API = API;
        };
    }]
);

Because web developers love JavaScript

<videogular vg-player-ready="onPlayerReady($API)">
    <vg-media vg-src="controller.config.sources"></vg-media>
</videogular>

HTML callbacks

Videogular JS Callbacks

vgPlayerReady($API)

vgComplete()

vgUpdateTime($currentTime, $duration)

vgUpdateState($state)

vgChangeSource($source)

vgError($event)

vgUpdateVolume($volume)

Videogular JS properties

'use strict';
angular.module('myApp').controller('MainCtrl',
    ["$scope", "ConfigProvider", "VideoProvider", 
    function ($scope, ConfigProvider, VideoProvider) {
        $scope.currentVideo = 0;
        $scope.config = ConfigProvider.getConfig();
        $scope.config.sources = VideoProvider.getVideo($scope.currentVideo);

        $scope.onPlayerReady = function (API) {
            $scope.API = API;
        };

        $scope.nextVideo = function () {
            $scope.currentVideo++;
            $scope.config.sources = VideoProvider.getVideo($scope.currentVideo);
        };
    }]
);

Bindable properties are awesome

Videogular JS properties

isReady

isBuffering

isFullScreen

isLive

sources

tracks

isCompleted

volume

playsInline

videogularElement

currentState

currentTime

totalTime

mediaElement

config

timeLeft

Videogular JS methods

'use strict';
angular.module('myApp').controller('MainCtrl',
    ["$scope", 
    function ($scope) {
        $scope.currentVideo = 0;

        $scope.onPlayerReady = function (API) {
            $scope.API = API;
        };

        $scope.onClickShare = function () {
            $scope.API.pause();
        };
    }]
);

API methods to control Videogular

Videogular JS methods

play()

pause()

playPause()

changeSource(array)

stop()

seekTime(value, byPercent)

setVolume(volume)

updateTheme(cssUrl)

clearMedia()

toggleFullScreen()

LOVELY

DASH

What is DASH?

Dynamic Adaptive Streaming HTTP

Streaming and Live Streaming

Based on Media Source Extensions API

Codec agnostic

Why is so important?

Before DASH we needed Flash or Silverlight

Everyone can create a streaming server with open source tools (Apache, ffmpeg, etc...)

Content protection with Encrypted Media Extensions

Completely open

Videogular supports DASH

The vg-dash plugin uses dash.js library

Dash.js is an open source project leaded by big companies

https://github.com/Dash-Industry-Forum/dash.js

Microsoft, Qualcomm, Ericsson, Adobe, Sony, Cisco, Intel, Akamai, etc... (no Apples here)

Videogular DASH plugin

'use strict';
angular.module('myApp').controller('MainCtrl',
    ["$scope", function ($scope) {
        $scope.config = {
            sources: [
                {src: "path/to/file.mpd"}
            ]
        };
    }]
);

Point to a .mpd file and enjoy DASH

<videogular>
    <vg-media vg-src="controller.config.sources" vg-dash></vg-media>
</videogular>

Add vg-dash to vg-media

OMG

DEMO TIME

sawfish.stimme.de

CODE TIME

github.com/2fdevs/ngnldemo

So the future of HTML5 video is...

Create a HTML5 API

Create a JavaScript API

Support DASH (not Flash)

EME (Encrypted Media Extensions)

AngularJS 2.0 & Web Components

THANKS

Videogular and the future of HTML5 video

By Raúl Jiménez

Videogular and the future of HTML5 video

Slides of my talk at ng-nl.org conference about Videogular and the HTML5 video.

  • 5,326

More from Raúl Jiménez