Raúl Jiménez

elecash@gmail.com

@elecash

INTERACTIVE VIDEO APPS WITH VIDEOGULAR2

sobre mí

por qué videogular?

videogular es:

• Media framework para Angular (más que un player de vídeo)
• Puedes crear media players declarativamente
• Extensible a través de una API intermedia
• Puedes "reproducir" cualquier tipo de contenido que tenga un inicio y un final, no sólo vídeo/audio

algunas stats

cómo funciona?

por ejemplo

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

Este es un player básico solo con un botón de play/pause

más madera!

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

Este es un player "full-equip" con controles, overlay play y streaming

demo:

crear un player simple

entendiendo VgMedia

• VgMedia es un atributo para el elemento video/audio HTML5

• Lo puedes usar con el elemento video/audio o...

• Puedes crearte un @Component que funcione como el elemento video/audio element y añadirle el atributo VgMedia

• Esto nos permite crear nuestros propios elementos "reproducibles"!

VgMedia en un <video>

Como vimos en el ejemplo anterior podemos usar VgMedia en un elemento <video>

<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 en un @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>

Podemos crear un @Component personalizado y los controles funcionarán automágicamente!!

demo:

custom media element

usando múltiples VgMedia

• El VgAPI está diseñado para soportar un número arbitrario de VgMedia

• Todos los VgMedia dentro del VgPlayer se registrarán automáticamente en el VgAPI

• Podemos registrar programáticamente también VgMedias generados dinámicamente

automáticamente registrado

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

programáticamente registrado

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:

usando dos VgMedia

el rol de VgMaster y VgFor

Como podemos tener un número arbitrario de VgMedia, alguna preguntas pueden aparecer:

• ¿Qué duración enseñamos en la barra de control si los vídeos tienen un largo diferente?

• ¿Y el tiempo actual? ¿o el volumen?

• Cuál es el estado del player si un vídeo está reproduciéndose y el otro haciendo buffering?

VgMaster

• Podemos añadir [vgMaster]="true" a cualquier VgMedia para gobernar otros VgMedia registrados

• Todos los eventos y estados serán controlados por el VgMaster

• Todas las acciones ejecutadas en VgAPI serán enviadas a todos los VgMedia registrados

VgFor

• Podemos añadir [vgFor]="mediaId" a cualquier Control para ejecutar una acción en un VgMedia en específico

<vg-player>
    <video #videoRef [vgMedia]="videoRef" [src]="source" id="myVideo"></video>
    <audio #audioRef [vgMedia]="audioRef" [src]="source" id="myAudio"></audio>
    
    <vg-play-pause></vg-play-pause>
    <vg-mute vgFor="myVideo"></vg-mute>
</vg-player>

demo:

VgMaster & VgFor

Links

• Official website
• Demo repo 1
• Demo repo 2
• Github project
• Showroom

¡gracias!