ez-vid-ang

EzVidAng (Easy Video Angular)

Highly configurable, performant and easy-to-use Angular component library for video playback and streaming.

Why to use it?

Signal based components - Granular and optimized render updates
Zoneless - Built for zoneless Angular applications by default
Standalone architecture – No NgModules required; simpler imports, better tree-shaking, and improved DX
High performance – Powered by RxJS; change detection runs only when needed (no zone pollution)
Highly customizable – 200+ CSS variables, custom icons, and fonts. Bring your own assets
ARIA compliant – All components follow ARIA standards and support custom inputs
Multilanguage support – Configurable text inputs for full localization
Inspired by modern players – Familiar UX similar to popular platforms
Responsive design - Works across all screen sizes and devices
Settings panel – YouTube-style navigable settings menu with sub-menus
Keyboard shortcuts overlay – Press ? to show all shortcuts, auto-integrated
Configuration storage – Persist user preferences (volume, speed, loop, cinema mode) to localStorage
Cinema mode – Dim the page and focus on the video
Thumbnail preview – Hover the scrub bar to see video frame thumbnails via VTT sprite sheets
Remote playback – Cast to ChromeCast or AirPlay with one click, auto-hides when no devices available

Example project

Example project can be found on Stackblitz

Version compatibility

EzVidAng updates and develops the library for the 2 latest versions.

EzVidAng	Angular	Node.js
^21.2.x	^21.2.x	According to Angular docs
^22.0.0	^22.0.0	According to Angular docs

Installing and preparation

Install the package:

npm i ez-vid-ang

Add the required styles to your angular.json:

{
  "projects": {
    "your_project": {
      "architect": {
        "build": {
          "options": {
            "styles": [
              "node_modules/ez-vid-ang/assets/eva-required-import.scss"
            ]
          }
        }
      }
    }
  }
}

Register the built-in icons once in your main.ts (or any bootstrapping code that runs before your components render):

import { addEvaIcons } from 'ez-vid-ang';
import { evaAllIcons } from 'ez-vid-ang/icons';

addEvaIcons(evaAllIcons);

To minimize bundle size, import only the icons your components use:

import { addEvaIcons } from 'ez-vid-ang';
import { evaPlayIcon, evaPauseIcon, evaFullscreenIcon, evaFullscreenExitIcon } from 'ez-vid-ang/icons';

addEvaIcons({ evaPlayIcon, evaPauseIcon, evaFullscreenIcon, evaFullscreenExitIcon });

If you want to use HLS streaming directive you must install latest version of the hls.js.

npm i hls.js

And add the required script to your angular.json

{
  "projects": {
    "your_project": {
      "architect": {
        "build": {
          "options": {
            "scripts": [
              "node_modules/hls.js/dist/hls.min.js"
            ]
          }
        }
      }
    }
  }
}

If you want to use DASH streaming directive you must install v5 of the dash.js.

npm i dashjs

And add the required script to your angular.json

{
  "projects": {
    "your_project": {
      "architect": {
        "build": {
          "options": {
            "scripts": [
              "node_modules/dashjs/dist/modern/esm/dash.all.min.js"
            ]
          }
        }
      }
    }
  }
}

Import only the components you need — every component is standalone and tree-shakable:

import { Component, signal } from '@angular/core';
import {
  EvaBuffering,
  EvaControlsContainer,
  EvaControlsDivider,
  EvaFullscreen,
  EvaMute,
  EvaOverlayPlay,
  EvaPlayer,
  EvaPlayPause,
  EvaScrubBar,
  EvaScrubBarBufferingTime,
  EvaScrubBarCurrentTime,
  EvaTimeDisplay,
  EvaUserInteractionEventsDirective,
  EvaVideoSource,
  EvaVolume,
} from 'ez-vid-ang';

@Component({
  selector: 'app-player',
  templateUrl: './player.html',
  styleUrl: './player.scss',
  imports: [
    EvaBuffering,
    EvaControlsContainer,
    EvaControlsDivider,
    EvaFullscreen,
    EvaMute,
    EvaOverlayPlay,
    EvaPlayer,
    EvaPlayPause,
    EvaScrubBar,
    EvaScrubBarBufferingTime,
    EvaScrubBarCurrentTime,
    EvaTimeDisplay,
    EvaUserInteractionEventsDirective,
    EvaVolume,
  ],
})
export class PlayerComponent {
  protected readonly sources = signal<EvaVideoSource[]>([
    { type: 'video/mp4', src: '/video.mp4' },
  ]);
}

See Simple Example and Full-Featured Example for complete usage.

Development

Linting

The project uses a strict ESLint configuration with type-aware TypeScript rules and Angular-specific template rules. All available rule presets are enabled.

npm run lint        # Check for errors
npx ng lint --fix   # Auto-fix fixable errors

All magic numbers are centralized in src/lib/constants.ts. See linting documentation and constants documentation for details.

Components

Library has four groups of components. Click on the name to go to the documentation:

• EvaCore – Main player component, icon registry, directives (keyboard shortcuts, configuration storage), and providers
• EvaControls – Video control components (play/pause, volume, scrub bar, fullscreen, playback speed, quality selector, track selector, loop, picture-in-picture, download, screenshot, context menu, settings panel, keyboard shortcuts overlay, cinema mode, error overlay, chapter list, and more)
• EvaBuffering – Loading and buffering indicators
• EvaStreaming – Directives for HLS and DASH live streaming support

---

Support This Project

If you wish to make a donation you can click the widget.

Your support helps:

• Maintain the project
• Add new features
• Fix bugs
• Provide long-term updates

Thank you for your generosity!