Raúl Jiménez

elecash@gmail.com

@elecash

INTERACTIVE VIDEO APPS WITH VIDEOGULAR2

about me

Angular GDE

videogular

academy partner

toptal partner

so...

why

videogular?

videogular is a:

  • Media framework for Angular (more than a video player)
  • You can create your media player in a declarative way
  • Extensible via an intermediate API
  • You can "play" anything that has a begin and an end, not only videos

some stats

Components

Directives

Services

Modules

6

17

4

6

how it works?

VgPlayer

VgMedia

VgAPI

VgPlay

(click)

play()

  • VgPlayer contains VgMedia, VgPlayPause and other UI components
  • VgPlayer creates VgAPI Service and stores a reference of all VgMedia inside of it
  • On click VgPlayPause we call play() inside VgAPI which will call play() inside VgMedia

for example

<vg-player>
    <vg-play-pause></vg-play-pause>

    <video #videoRef 
           [vgMedia]="videoRef" 
           id="video" 
           src="http://static.videogular.com/assets/videos/videogular.mp4">
    </video>
</vg-player>

This is a basic player just with a play/pause button

more components!

<vg-player>
    <vg-overlay-play></vg-overlay-play>

    <vg-controls>
        <vg-play-pause></vg-play-pause>
        <vg-time-display vgProperty="current" vgFormat="mm:ss"></vg-time-display>
        <vg-scrub-bar>
            <vg-scrub-bar-current-time></vg-scrub-bar-current-time>
            <vg-scrub-bar-buffering-time></vg-scrub-bar-buffering-time>
        </vg-scrub-bar>
        <vg-time-display vgProperty="left" vgFormat="mm:ss"></vg-time-display>
        <vg-mute></vg-mute>
        <vg-volume></vg-volume>
        <vg-fullscreen></vg-fullscreen>
    </vg-controls>

    <video #media [vgMedia]="media" [vgHls]="streamingUrl" id="singleVideo" preload="auto"></video>
</vg-player>

This is a full-featured player with controls, overlay play and streaming

demo:

creating a simple player 

understanding vgMedia

  • VgMedia is a wrapper for the HTML5 video/audio element
  • You can use it with the video/audio element or...
  • You can create a @Component that behaves like a video/audio element and attach a VgMedia to it
  • This allows us to create our own "playable" elements!

vgMedia in a <video>

As we saw before we can use VgMedia in a <video> element

<vg-player>
    <vg-controls>
        <vg-play-pause></vg-play-pause>

        <vg-scrub-bar>
            <vg-scrub-bar-current-time></vg-scrub-bar-current-time>
        </vg-scrub-bar>

        <vg-fullscreen></vg-fullscreen>
    </vg-controls>

    <video #videoRef 
           id="video" 
           [vgMedia]="videoRef" 
           src="http://static.videogular.com/assets/videos/videogular.mp4">
    </video>
</vg-player>

vgMedia in a @Component

<vg-player>
    <vg-controls>
        <vg-play-pause></vg-play-pause>

        <vg-scrub-bar>
            <vg-scrub-bar-current-time></vg-scrub-bar-current-time>
        </vg-scrub-bar>

        <vg-fullscreen></vg-fullscreen>
    </vg-controls>

    <app-time-viewer #timerRef 
                     id="timer" 
                     [vgMedia]="timerRef" 
                     [duration]="videoRef.duration">
    </app-time-viewer>
</vg-player>

But we can use it in @Component and controls will work as expected!!

demo:

creating a custom media element

using multiple VgMedia

  • VgAPI is designed to support an arbitrary number of VgMedia
  • All VgMedia inside a VgPlayer will automatically get registered into VgAPI
  • We can programmatically register new VgMedia via VgAPI if we want

automatically registered

<vg-player>
    <vg-controls>
        <vg-play-pause></vg-play-pause>

        <vg-scrub-bar>
            <vg-scrub-bar-current-time></vg-scrub-bar-current-time>
        </vg-scrub-bar>

        <vg-fullscreen></vg-fullscreen>
    </vg-controls>

    <video id="video" 
           #videoRef 
           [vgMedia]="videoRef" 
           src="http://static.videogular.com/assets/videos/videogular.mp4">
    </video>
    <app-time-viewer id="timer" 
                     #timerRef 
                     [vgMedia]="timerRef" 
                     [duration]="videoRef.duration">
    </app-time-viewer>
</vg-player>

programmatically registered

import { Component, OnInit, Input, ViewChild, ElementRef } from '@angular/core';
import { VgAPI } from 'videogular2/core';

@Component({
    selector: 'vg-pip',
    templateUrl: './vg-pip.component.html',
    styleUrls: [ './vg-pip.component.scss' ]
})
export class VgPipComponent implements OnInit {
    media: MyCustomMedia = new MyCustomMedia();

    constructor(private api: VgAPI) {}

    ngOnInit() {
        this.api.registerMedia(this.media);
    }
}

demo:

using two VgMedia

the role of VgMaster and VgFor

Because we have an arbitrary number of VgMedia, some questions may appear:

  • What should the control bar duration display if videos have different length?
  • And the current time? And the volume?
  • What's the state of the video player if one video is playing and the other is paused?

VgMaster

  • We can add [vgMaster]="true" to any VgMedia to rule over the other VgMedia registered
  • All events and states will be managed by the VgMaster
  • All actions executed on VgAPI will be triggered to all VgMedia registered

VgFor

  • We can add [vgFor]="mediaId" to any Control to execute an action to an specific VgMedia
<vg-player>
    <video #videoRef
           [vgMedia]="videoRef"
           [src]="source"
           id="myVideo">
    </video>
    
    <vg-play-pause></vg-play-pause>
    <vg-mute vgFor="myVideo"></vg-mute>
</vg-player>

demo:

using VgMaster and VgFor

 

but first...

let me explain you a story about:

love

fear

sorrow

joy

and football!!

football

handball

handmelon

demo:

using VgMaster and VgFor

some links

thank you!

Interactive Video Apps with Videogular2

By Raúl Jiménez

Interactive Video Apps with Videogular2

Interactive Video Apps with Videogular2 slides for my talk at ng-conf 2017.

  • 3,494