about me

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

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);
    }
}