https://github.com/btzr-io/events-vtt

Listen and dispatch media timed events from a .vtt file
https://github.com/btzr-io/events-vtt

events vtt

Last synced: 24 days ago
JSON representation

Listen and dispatch media timed events from a .vtt file

• Host: GitHub
• URL: https://github.com/btzr-io/events-vtt
• Owner: btzr-io
• License: mit
• Created: 2020-08-19T03:40:41.000Z (about 4 years ago)
• Default Branch: master
• Last Pushed: 2020-08-19T04:50:09.000Z (about 4 years ago)
• Last Synced: 2024-04-14T06:18:05.569Z (7 months ago)
• Topics: events, vtt
• Language: JavaScript
• Homepage:
• Size: 12.7 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# events-vtt

Listen and dispatch media timed events from a .vtt file

### Install

```

npm install @btzr-io/[email protected]

```

or

```

yarn install @btzr-io/[email protected]

```

### Import

```JS

import EventManagerVtt from '@btzr-io/events-vtt';

```

### Usage

Add a track element indside your media element (video or audio):

- Set the track kind attribute as `metadata` type.

- Set the label attribute value equal to `events`.

> Note: The track source should contain a url to a valid .vtt file. 

```HTML

  

```

Create a instance of the `EventManagerVtt` class to listen for the event's life.

```JS

const test = new EventManagerVTT(player.current, {});

test.addEventListener('event:start', (event) => {

  console.info("New event requested:", event.detail)

})

test.addEventListener('event:end', (event) => {

  console.info("Event life time reached:", event.detail)

})

```

### WebVTT

Here is an example of a .vtt file that contains data for each event.

Please check the current standars for more information: https://www.w3.org/TR/webvtt1/

```

WEBVTT

NOTE

This file contains timed events for the interactive video demo. For a more advance usage you can use frameworks for state and event manager like Redux.

1

00:00:00.250 --> 00:00:03.000

{

 "type": "hot-event-type",

 "title": "🔥 Feature message",

 "url": "https://en.wikipedia.org/wiki/Samurai_Pizza_Cats"

}

2

00:07.810 --> 00:14.221

{

 "type": "poll-event",

 "title": "🐈 Are cats awesome ?"

}

```