logo

Angular 14 Video Player s příkladem NGX Videogular

Tento tutoriál vás provede integrací přehrávače videa ke spouštění videí v aplikaci Angular 13 pomocí knihovny ngx-videogular.

Pokud jde o přizpůsobení přehrávače videa, pak HTML 5 nezměnilo kámen na kameni.

Přehrávač videa HTML 5 vám nabízí svobodu vytvářet vlastní přehrávač videa a dobrá věc je, že je široce podporován i nejnovějšími prohlížeči.

Chcete-li vytvořit přehrávač videa, stačí definovat značku videa. Tímto způsobem můžete přehrávač videa snadno vložit.

V tomto tutoriálu se naučíme pracovat s balíčkem ngx-videogular, který řeší vkládání přehrávače videa do Angular easy.

Tento balíček je zdaleka nejlepší balíček pro vkládání videa do Angular 12 a můžete vytvořit HTML 5 video přehrávač s plnými možnostmi ovládání videa.

S pluginem ngx-videogular můžete vytvořit Angular video aplikaci připravenou na budoucnost a získat řadu výhod:

  • Ovládejte rychlost videa
  • Podpora přehrávače zvuku
  • Ovládejte seznam videí
  • Živé streamování médií v přehrávači
  • Spusťte více přehrávačů videa na odpovídající obrazovce

Instalovat Angular Application

První a nejdůležitější věcí je vytvořit zcela novou aplikaci Angular pomocí níže uvedeného příkazu:

ng new angular-video-player-example

Přesunout do kořenového adresáře projektu:

cd angular-video-player-example

Nainstalujte plugin ngx-videogular v Angular

Instalace ngx-videogular je snadná in angular a můžete použít níže uvedený příkaz.

npm install @videogular/ngx-videogular --save
npm install @types/core-js --save-dev

Nyní musíme zaregistrovat videogular CSS v angular.json soubor. Abychom mohli používat vlastní styl a ikony balíčku videogular, musíme jej zaregistrovat.

......
......
......
"styles": [
   "./node_modules/@videogular/ngx-videogular/fonts/videogular.css",
   "src/styles.scss"
],
......
......
......

Videogular do značné míry spoléhá na standardy HTML5, které vám umožňují vytvořit si vlastní přehrávač videa pouhým přidáním některých značek a atributů do kódu HTML.

Importujte moduly Videogular do modulu aplikace

Chystáme se importovat VgCoreModule , VgControlsModule , VgOverlayPlayModule a VgBufferingModule v hlavní třídě modulů aplikací Angular; tímto způsobem můžeme použít plugin Videgular 2 v Angular 12.

Přidejte kód do app.module.ts soubor.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { VgCoreModule } from '@videogular/ngx-videogular/core';
import { VgControlsModule } from '@videogular/ngx-videogular/controls';
import { VgOverlayPlayModule } from '@videogular/ngx-videogular/overlay-play';
import { VgBufferingModule } from '@videogular/ngx-videogular/buffering';
@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    VgCoreModule,
    VgControlsModule,
    VgOverlayPlayModule,
    VgBufferingModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Vytvoření přehrávače videa s vlastními ovládacími prvky

Nyní vytvoříme přehrávač videa s vlastními ovládacími prvky v projektu Angular.

Jediné, co musíte udělat, je vložit následující kód do app.component.html soubor.

<div class="video-player-wrapper">
  <h2>Angular Video Player with Controls Example</h2>
  <vg-player>
    <vg-overlay-play></vg-overlay-play>
    <vg-buffering></vg-buffering>
    <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-controls>
      <vg-play-pause></vg-play-pause>
      <vg-playback-button></vg-playback-button>
      <vg-time-display vgProperty="current" vgFormat="mm:ss"></vg-time-display>
      <vg-scrub-bar style="pointer-events: none;"></vg-scrub-bar>
      <vg-time-display vgProperty="left" vgFormat="mm:ss"></vg-time-display>
      <vg-time-display vgProperty="total" vgFormat="mm:ss"></vg-time-display>
      <vg-track-selector></vg-track-selector>
      <vg-mute></vg-mute>
      <vg-volume></vg-volume>
      <vg-fullscreen></vg-fullscreen>
    </vg-controls>
    <video [vgMedia]="$any(media)" #media id="singleVideo" preload="auto" crossorigin>
      <source src="http://static.videogular.com/assets/videos/videogular.mp4" type="video/mp4">
      <source src="http://static.videogular.com/assets/videos/videogular.ogg" type="video/ogg">
      <source src="http://static.videogular.com/assets/videos/videogular.webm" type="video/webm">
      <track kind="subtitles" label="English" src="http://static.videogular.com/assets/subs/pale-blue-dot.vtt"
        srclang="en" default>
      <track kind="subtitles" label="Español" src="http://static.videogular.com/assets/subs/pale-blue-dot-es.vtt"
        srclang="es">
    </video>
  </vg-player>
</div>

Vytvoření seznamu videí s pokročilými ovládacími prvky

Vytvoříme novou úhlovou komponentu, která ukáže příklad seznamu videí s pokročilými ovládacími prvky.

ng g c vdo-player

Přidejte kód do vdo-player.component.ts soubor:

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-vdo-player',
  templateUrl: './vdo-player.component.html',
  styleUrls: ['./vdo-player.component.css']
})
export class VdoPlayerComponent implements OnInit {
  videoItems = [
      {
        name: 'Video one',
        src: 'http://static.videogular.com/assets/videos/videogular.mp4',
        type: 'video/mp4'
      },
      {
        name: 'Video two',
        src: 'http://static.videogular.com/assets/videos/big_buck_bunny_720p_h264.mov',
        type: 'video/mp4'
      },
      {
        name: 'Video three',
        src: 'http://static.videogular.com/assets/videos/elephants-dream.mp4',
        type: 'video/mp4'
      }
    ];
    activeIndex = 0;
    currentVideo = this.videoItems[this.activeIndex];
    data: any;
    constructor() { }
    ngOnInit(): void { }
    videoPlayerInit(data: any) {
      this.data = data;
      this.data.getDefaultMedia().subscriptions.loadedMetadata.subscribe(this.initVdo.bind(this));
      this.data.getDefaultMedia().subscriptions.ended.subscribe(this.nextVideo.bind(this));
    }
    nextVideo() {
      this.activeIndex++;
      if (this.activeIndex === this.videoItems.length) {
        this.activeIndex = 0;
      }
      this.currentVideo = this.videoItems[this.activeIndex];
    }
    initVdo() {
      this.data.play();
    }
    startPlaylistVdo(item: any, index: number) {
      this.activeIndex = index;
      this.currentVideo = item;
    }
}

Umístěte následující kód do vdo-player.component.html soubor:

<div class="video-player-wrapper">
  <vg-player (onPlayerReady)="videoPlayerInit($event)">
    <vg-overlay-play></vg-overlay-play>
    <vg-buffering></vg-buffering>
    <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-controls>
      <vg-play-pause></vg-play-pause>
      <vg-playback-button></vg-playback-button>
      <vg-time-display vgProperty="current" vgFormat="mm:ss"></vg-time-display>
      <vg-time-display vgProperty="total" vgFormat="mm:ss"></vg-time-display>
      <vg-mute></vg-mute>
      <vg-volume></vg-volume>
      <vg-fullscreen></vg-fullscreen>
    </vg-controls>
    <video #media [vgMedia]="$any(media)" [src]="currentVideo.src" id="singleVideo" preload="auto" crossorigin>
    </video>
  </vg-player>
  <ul class="player-list">
    <li *ngFor="let vdo of videoItems; let $index = index"
      (click)="startPlaylistVdo(vdo, $index)" [class.selected]="vdo === currentVideo">
      {{ vdo.name }}
    </li>
  </ul>
</div>

Umístěte následující kód do vdo-player.component.css soubor:

.video-player-wrapper {
    max-width: 800px;
    text-align: center;
    margin: 0 auto;
}
.player-list {
   margin: 0;
   padding: 0;
}
.player-list li {
   list-style: none;
   padding: 15px 35px;
   display: block;
   background: #cccc;
   cursor: pointer;
   text-align: left;
   margin-bottom: 1px;
}
li.selected {
    background: #03A9F4 !important;
}

Dále musíte spustit následující úhlový příkaz CLI, abyste spustili aplikaci a zkontrolovali vlastní úhlový videopřehrávač.

ng serve --open

Sečteno a podtrženo

Tak to bylo, konečně jsme dokončili tutoriál Angular Video Player. V tomto tutoriálu jsme diskutovali o nejlepším pluginu videopřehrávače videa pro vkládání přehrávače videa do úhlových aplikací s vlastními ovládacími prvky.

Doufám, že se vám tento článek bude líbit a budete ho sdílet s ostatními.