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.x | ^22.0.x | According to Angular docs | | ^22.1.x | ^22.1.x | According to Angular docs | | ^22.2.x | ^22.2.x | 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 });

[!IMPORTANT] 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"
            ]
          }
        }
      }
    }
  }
}

[!IMPORTANT] 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.

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

Roadmap

There are few functionalities I want to implement that are work in progress:

• Audio selection - Select audio track for the video
• A/B loop - Let users set loop start/end points on the scrub bar for segment replay. Useful for music/education.
• Double tap forward/backward - Double-tap left/right halves of the video to seek backward/forward. Standard mobile UX (YouTube, Netflix).

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.

Formatting

The project uses Prettier for code formatting, kept conflict-free with ESLint via eslint-config-prettier.

npm run format        # Format all files
npm run format:check  # Check formatting without writing changes

Install the recommended esbenp.prettier-vscode VS Code extension for format-on-save. See formatting documentation for details.

💖 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! 🙏