import { Component, ChangeDetectionStrategy, signal } from '@angular/core'; import { CommonModule } from '@angular/common'; import { VideoPlayerComponent, VideoSource, VideoTrack, VideoPlayerSize, VideoPlayerVariant } from '../../../../../ui-essentials/src/lib/components/media/video-player/video-player.component'; @Component({ selector: 'ui-video-player-demo', standalone: true, imports: [ CommonModule, VideoPlayerComponent ], changeDetection: ChangeDetectionStrategy.OnPush, template: `

Video Player Component Showcase

Video Player Variants

Default Player

Minimal Player

Theater Player

Size Variants

Small (sm)

Medium (md) - Default

Large (lg)

Feature Demonstrations

Player with Subtitles

Autoplay Player (Muted)

Player without Volume Control

Disabled Player

Interactive Demo

Customize the video player below by toggling different options:

@if (lastEvent()) {
Last event: {{ lastEvent() }}
}

Real-world Examples

Course Video Player

Typical setup for educational content with subtitles and chapter markers

Product Demo Player

Autoplay setup for product demonstrations and marketing content

Media Gallery Player

Compact player for media galleries and previews

Error Handling

Invalid Video Source

Demonstrates error handling when video fails to load

Code Examples

Basic Video Player:

<ui-video-player
  [sources]="videoSources"
  poster="poster-image.jpg"
  [showControls]="true"
  ariaLabel="Demo video player">
</ui-video-player>

Video Player with Subtitles:

<ui-video-player
  [sources]="videoSources"
  [tracks]="subtitleTracks"
  poster="poster-image.jpg"
  size="lg"
  [showControls]="true"
  [allowFullscreen]="true"
  (play)="onVideoPlay()"
  (pause)="onVideoPause()">
</ui-video-player>

Autoplay Video (Marketing/Demo):

<ui-video-player
  [sources]="videoSources"
  variant="minimal"
  size="md"
  [autoplay]="true"
  [muted]="true"
  [loop]="true"
  [showVolumeControl]="false"
  [allowFullscreen]="false">
</ui-video-player>
`, styleUrl: './video-player-demo.component.scss' }) export class VideoPlayerDemoComponent { // State signals lastEvent = signal(''); // Demo video sources - using sample videos from the web basicVideoSources = signal([ { src: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4', type: 'video/mp4', quality: '1080p', label: 'HD' }, { src: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.webm', type: 'video/webm', quality: '1080p', label: 'HD WebM' } ]); errorVideoSources = signal([ { src: 'https://invalid-url.example.com/nonexistent.mp4', type: 'video/mp4', quality: '1080p', label: 'Invalid Source' } ]); videoTracks = signal([ { src: 'data:text/vtt;base64,V0VCVlRUCgowMDowMDowMC4wMDAgLS0+IDAwOjAwOjA1LjAwMAo8Zm9udCBjb2xvcj0iI2ZmZmZmZiI+U2FtcGxlIHN1YnRpdGxlIHRleHQ8L2ZvbnQ+CgowMDowMDowNS4wMDAgLS0+IDAwOjAwOjEwLjAwMAo8Zm9udCBjb2xvcj0iI2ZmZmZmZiI+VGhpcyBpcyBhIGRlbW9uc3RyYXRpb24gb2Ygc3VidGl0bGVzPC9mb250Pg==', kind: 'subtitles', srclang: 'en', label: 'English', default: true } ]); // Demo configuration demoConfig = signal({ size: 'md' as VideoPlayerSize, variant: 'default' as VideoPlayerVariant, autoplay: false, loop: false, showControls: true, showVolumeControl: true, allowFullscreen: true, disabled: false, poster: 'https://images.unsplash.com/photo-1574717024653-61fd2cf4d44d?w=800&h=450&fit=crop' }); handleVideoEvent(event: string): void { this.lastEvent.set(`${event} at ${new Date().toLocaleTimeString()}`); console.log(`Video event: ${event}`); } handleTimeUpdate(time: number): void { // Only log significant time updates to avoid console spam if (Math.floor(time) % 10 === 0) { console.log(`Time update: ${this.formatTime(time)}`); } } handleVolumeChange(volume: number): void { this.lastEvent.set(`Volume changed to ${Math.round(volume * 100)}% at ${new Date().toLocaleTimeString()}`); console.log(`Volume changed: ${volume}`); } handleFullscreenChange(isFullscreen: boolean): void { this.lastEvent.set(`${isFullscreen ? 'Entered' : 'Exited'} fullscreen at ${new Date().toLocaleTimeString()}`); console.log(`Fullscreen: ${isFullscreen}`); } handleVideoError(event: Event): void { this.lastEvent.set(`Video error occurred at ${new Date().toLocaleTimeString()}`); console.error('Video error:', event); } updateDemoConfig(key: string, event: Event): void { const target = event.target as HTMLInputElement; const value = target.checked; this.demoConfig.update(config => ({ ...config, [key]: value })); } updateDemoSize(event: Event): void { const target = event.target as HTMLSelectElement; const size = target.value as VideoPlayerSize; this.demoConfig.update(config => ({ ...config, size })); } updateDemoVariant(event: Event): void { const target = event.target as HTMLSelectElement; const variant = target.value as VideoPlayerVariant; this.demoConfig.update(config => ({ ...config, variant })); } private formatTime(seconds: number): string { if (isNaN(seconds)) return '0:00'; const minutes = Math.floor(seconds / 60); const secs = Math.floor(seconds % 60); return `${minutes}:${secs.toString().padStart(2, '0')}`; } }