Raúl Jiménez

elecash@gmail.com

@elecash

INTERACTIVE VIDEO APPS WITH VIDEOGULAR2

sobre mí

Angular GDE

videogular

academy partner

toptal partner

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

Components

Directives

Services

Modules

6

17

4

6

cómo funciona?

VgPlayer

VgMedia

VgAPI

VgPlay

(click)

play()

  • VgPlayer contiene VgMedia, VgPlayPause y otros componentes
  • VgPlayer crea el servicio VgAPI y guarda una referencia de todos los VgMedia dentro de él
  • Al clicar VgPlayPause llamamos a VgAPI.play() que llama a VgMedia.play()

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

¡gracias!