Raúl Jiménez

elecash@gmail.com

@elecash

INTERACTIVE VIDEO APPS WITH VIDEOGULAR2

about me

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

how it works?

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:

football

handball

handmelon

demo:

using VgMaster and VgFor

some links

• Official website: http://www.videogular.com
• Demo repo 1: https://github.com/videogular/custom-element-demo
• Demo repo 2: https://github.com/videogular/pip-demo
• Github project: https://github.com/videogular/videogular2
• Showroom: https://videogular.github.io/videogular2-showroom/#/

thank you!