https://github.com/interactive-video-labs/interactive-video-angular-wrapper
⚡ Lightweight Angular component built on top of @interactive-video-labs/core for cue-driven interactive video playback. Fully typed, declarative, and integrates seamlessly into Angular apps using @Input() bindings and @Output() events.
https://github.com/interactive-video-labs/interactive-video-angular-wrapper
angular angular-15 angular-component angular-wrapper cue-points education-tech interactive-video npm-package typescript video-interaction video-player
Last synced: 3 months ago
JSON representation
⚡ Lightweight Angular component built on top of @interactive-video-labs/core for cue-driven interactive video playback. Fully typed, declarative, and integrates seamlessly into Angular apps using @Input() bindings and @Output() events.
- Host: GitHub
- URL: https://github.com/interactive-video-labs/interactive-video-angular-wrapper
- Owner: interactive-video-labs
- License: mit
- Created: 2025-07-31T16:13:21.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2025-10-02T13:10:28.000Z (3 months ago)
- Last Synced: 2025-10-02T15:10:00.215Z (3 months ago)
- Topics: angular, angular-15, angular-component, angular-wrapper, cue-points, education-tech, interactive-video, npm-package, typescript, video-interaction, video-player
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/@interactive-video-labs/angular
- Size: 1.05 MB
- Stars: 1
- Watchers: 0
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# @interactive-video-labs/angular
Welcome to `@interactive-video-labs/angular` — a lightweight Angular wrapper around the `@interactive-video-labs/core` engine for cue-driven interactive video experiences.
This wrapper enables seamless integration of interactive video players into Angular applications using idiomatic Angular components and bindings, while staying close to the underlying core engine API.
---
## Table of Contents
- [@interactive-video-labs/angular](#interactive-video-labsangular)
- [Table of Contents](#table-of-contents)
- [Installation](#installation)
- [Usage](#usage)
- [Basic Usage](#basic-usage)
- [With Cue Points](#with-cue-points)
- [With Translations](#with-translations)
- [With Analytics Events](#with-analytics-events)
- [Mounting to an External Element](#mounting-to-an-external-element)
- [API Reference](#api-reference)
- [Inputs](#inputs)
- [Outputs](#outputs)
- [Development](#development)
- [Contributing](#contributing)
- [License](#license)
## Installation
YouTo install the package, use your preferred package manager:
```bash
# Using pnpm
pnpm add @interactive-video-labs/angular @interactive-video-labs/core
# Using npm
npm install @interactive-video-labs/angular @interactive-video-labs/core
# Using yarn
yarn add @interactive-video-labs/angular @interactive-video-labs/core
```
## Usage
Import `InteractiveVideoComponent` into your Angular component's `imports` array:
```typescript
import { InteractiveVideoComponent } from '@interactive-video-labs/angular';
@Component({
selector: 'app-my-component',
standalone: true,
imports: [InteractiveVideoComponent],
template: ` `,
})
export class MyComponent {}
```
### Basic Usage
```html
```
### With Cue Points
```typescript
import { Component } from '@angular/core';
import { InteractiveVideoComponent, CuePoint } from '@interactive-video-labs/angular';
@Component({
selector: 'app-cue-point-example',
standalone: true,
imports: [InteractiveVideoComponent],
template: `
`,
})
export class CuePointExampleComponent {
myCues: CuePoint[] = [
{ time: 5, type: 'text', value: 'Hello at 5 seconds!' },
{ time: 10, type: 'image', value: 'https://example.com/image.png' },
];
}
```
### With Translations
```typescript
import { Component } from '@angular/core';
import { InteractiveVideoComponent, Translations } from '@interactive-video-labs/angular';
@Component({
selector: 'app-translation-example',
standalone: true,
imports: [InteractiveVideoComponent],
template: `
`,
})
export class TranslationExampleComponent {
spanishTranslations: Translations = {
play: 'Reproducir',
pause: 'Pausar',
// ... other translations
};
}
```
### With Analytics Events
```typescript
import { Component } from '@angular/core';
import {
InteractiveVideoComponent,
AnalyticsEvent,
AnalyticsPayload,
} from '@interactive-video-labs/angular';
@Component({
selector: 'app-analytics-example',
standalone: true,
imports: [InteractiveVideoComponent],
template: `
`,
})
export class AnalyticsExampleComponent {
handleAnalytics(event: [event: AnalyticsEvent, payload?: AnalyticsPayload]): void {
const [eventName, payload] = event;
console.log(`Analytics Event: ${eventName}`, payload);
// Send to your analytics service
}
}
```
### Mounting to an External Element
You can mount the player to an existing HTML element by providing its ID to the `targetElementId` input.
```html
```
## API Reference
### Inputs
| Name | Type | Description | Default | Required |
| :---------------- | :------------- | :------------------------------------------------------------------- | :---------- | :------- |
| `videoUrl` | `string` | The URL of the video to be loaded. | `undefined` | Yes |
| `cues` | `CuePoint[]` | An array of cue points for interactive events. | `undefined` | No |
| `translations` | `Translations` | An object containing translations for the player. | `undefined` | No |
| `autoplay` | `boolean` | Whether the video should start playing automatically. | `false` | No |
| `loop` | `boolean` | Whether the video should loop. | `false` | No |
| `locale` | `string` | The locale to be used for the player. | `'en'` | No |
| `targetElementId` | `string` | The ID of an external HTML element where the player will be mounted. | `undefined` | No |
### Outputs
| Name | Type | Description |
| :--------------- | :------------------------------------------------------------------ | :-------------------------------------- |
| `analyticsEvent` | `EventEmitter<[event: AnalyticsEvent, payload?: AnalyticsPayload]>` | Emits analytics events from the player. |
## Development
For detailed instructions on setting up your development environment, installing dependencies, running tests, and building the project, please refer to the [DEVELOPER.md](DEVELOPER.md) file.
## Contributing
We welcome contributions to `@interactive-video-labs/angular`! Please see our [CONTRIBUTING.md](CONTRIBUTING.md) for guidelines.
## License
This project is licensed under the [MIT License](LICENSE).engine API.
---