video-transcript-tracker

To handle "cueChange" of <track> element.

Usage no npm install needed!

<script type="module">
  import videoTranscriptTracker from 'https://cdn.skypack.dev/video-transcript-tracker';
</script>

README

video-transcript-tracker

Observe the change of <track> element.

Installation

npm install video-transcript-tracker

Dependency

  • Array.form
  • remove this dependency. WelCome to Pull Request!

Usage

<video id="video" width="400" src="./Google_Developer_Stories.webm" autoplay controls>
    <track label="English subtitles" kind="subtitles" srclang="en" src="./video-subtitles-en.vtt" default>
    Your browser does not support the video tag
</video>
<div id="main"></div>
<script src="node_modules/array.from/array-from.js"></script>
<script src="build.js"></script>

var VideoTranscriptTracker = require("video-transcript-tracker");
var video = document.getElementById("video");
var tracker = new VideoTranscriptTracker(video);
// in playing video, show next transcript, then call `onChange` handler.
tracker.onChange(function (text, track) {
    console.log(text);
});
tracker.start();

Tests

Run example

npm run example

Contributing

  1. Fork it!
  2. Create your feature branch: git checkout -b my-new-feature
  3. Commit your changes: git commit -am 'Add some feature'
  4. Push to the branch: git push origin my-new-feature
  5. Submit a pull request :D

License

MIT