Thin Vue wrapper for the @interactive-video-labs/core engine. Enables cue-based interactive video playback in Vue 3 applications.
npm install @interactive-video-labs/vue
Welcome to @interactive-video-labs/vue — a lightweight Vue 3 wrapper around the @interactive-video-labs/core engine for cue-driven interactive video experiences.
This wrapper enables seamless integration of interactive video players into Vue applications using idiomatic Vue components and bindings, while staying close to the underlying core engine API.
---
- Declarative Props: Control the player via reactive Vue props.
- Event Handling: Listen to player events using a simple onAnalyticsEvent callback.
- Dynamic Content: Update cue points and translations on the fly.
- Direct Player Access: Get direct access to the underlying @interactive-video-labs/core player instance.
- TypeScript Support: Fully typed for a better development experience.
Install the package and its peer dependencies using your favorite package manager:
``bashWith pnpm
pnpm add @interactive-video-labs/vue @interactive-video-labs/core vue
Basic Usage
Here's a simple example of how to use the
InteractiveVideo component in your Vue 3 application.`vue
:video-url="videoUrl"
:cues="cues"
:on-analytics-event="handleAnalyticsEvent"
autoplay
loop
/>
`API Reference
$3
The component accepts the following props:
| Prop | Type | Required | Default | Description |
| ------------------ | ------------------------------------------------------------- | -------- | ------- | -------------------------------------------------------------------------- |
|
videoUrl | string | true | - | The URL of the video to be loaded. |
| cues | CuePoint[] | false | [] | An array of cue points for interactive events. Can be updated dynamically. |
| translations | Translations | false | {} | An object containing translations for the player UI. |
| onAnalyticsEvent | (event: AnalyticsEvent, payload?: AnalyticsPayload) => void | false | - | Callback function for analytics events emitted by the player. |
| autoplay | boolean | false | false | Whether the video should start playing automatically. |
| loop | boolean | false | false | Whether the video should loop. |
| locale | string | false | 'en' | The locale to be used for the player (e.g., 'en', 'es'). |Any additional attributes passed to the component will be forwarded to the underlying
@interactive-video-labs/core player configuration.$3
Player events are emitted through the
onAnalyticsEvent prop.Available Events:
-
PLAYER_LOADED
- VIDEO_STARTED
- VIDEO_PAUSED
- VIDEO_ENDED
- CUE_TRIGGERED
- INTERACTION_COMPLETED
- ERRORExample:
`js
function handleAnalyticsEvent(event, payload) {
switch (event) {
case 'CUE_TRIGGERED':
console.log('A cue was triggered at:', payload.cue.time);
break;
case 'ERROR':
console.error('Player error:', payload.error);
break;
}
}
`$3
If you need to call methods on the player instance directly, you can get a reference to it using a
ref on the component.`vue
``---
For detailed development setup, project structure, testing, build, and publishing instructions, please refer to our Developer Guide.
---
Contributions are welcome! Please read our Contributing Guidelines to get started.
This project is licensed under the MIT License. See the LICENSE file for details.