# srt-webvtt

> Convert SRT format subtitle to WebVTT on the fly over HTML5 environment

Latest version **2.0.0** (published 2021-10-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install srt-webvtt
pnpm add srt-webvtt
yarn add srt-webvtt
bun add srt-webvtt
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.0 |
| Published | 2021-10-22 |
| First published | 2018-01-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 11.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 54 |
| Author | Shariar Shaikot |
| Maintainers | imshaikot |
| Keywords | Subtitle, video, subtitle, track, element, srt-to-vtt, srt-to-webvtt, converter, html5, video, html5, video, track, html5, video, subtitle, str, support |

## Links

- npm: https://www.npmjs.com/package/srt-webvtt
- Repository: https://github.com/imshaikot/srt-webvtt
- Homepage: https://github.com/imshaikot/srt-webvtt#readme
- Issues: https://github.com/imshaikot/srt-webvtt/issues
- npm.io page: https://npm.io/package/srt-webvtt

## Alternatives

- [@sveltejs/kit](https://npm.io/package/@sveltejs/kit.md) — 2.2M weekly downloads
- [@atlaskit/theme](https://npm.io/package/@atlaskit/theme.md) — 402.0K weekly downloads
- [@tangle-network/brand](https://npm.io/package/@tangle-network/brand.md) — 10.0K weekly downloads
- [seneca](https://npm.io/package/seneca.md) — 7.4K weekly downloads
- [@bsb/base](https://npm.io/package/@bsb/base.md) — 7.2K weekly downloads

## Recent versions

- 2.0.0 (latest) — 2021-10-22
- 1.3.2 — 2021-06-23
- 1.3.1 — 2021-06-23
- 1.3.0 — 2021-06-23
- 1.2.0 — 2021-06-23
- 1.0.1 — 2018-01-19
- 1.0.0 — 2018-01-19

## README

<h2 align="left"> Convert and generate URL of WebVTT from .srt subtitle file on the fly over Browser/HTML5 environment</h2>

HTMLMediaElement/Video doesn't support `.srt` (SubRip Track) format subtitle as its `<track>` source - in order to show captions of your video track either you have to convert the SRT file to WebVTT or write it on your own. Because `<track src="VALID URL SCHEME">` requires a valid URL of `.vtt` (Web Video Text Track) formated subtitle track.
This library will let you do this on the fly and will give you an URL to set the source of caption track.

<p align="center">
  <a href="https://www.npmjs.org/package/srt-webvtt"><img src="https://img.shields.io/npm/v/srt-webvtt.svg?style=flat-square" /></a>
  <a href="https://github.com/imshaikot/srt-webvtt/actions/workflows/node.js.yml"><img src="https://github.com/imshaikot/srt-webvtt/actions/workflows/node.js.yml/badge.svg" /></a>
  <a href="https://github.com/imshaikot/srt-webvtt/blob/master/LICENSE">
    <img src="https://img.shields.io/github/license/imshaikot/srt-webvtt.svg">
  </a>

  <a href="http://standardjs.com">
    <img src="https://img.shields.io/badge/code%20style-standard-brightgreen.svg" />
  </a>
</p>

## Example

<a href="https://imshaikot.github.io/srt-webvtt/">https://imshaikot.github.io/srt-webvtt/</a>

## Installation

```bash
$ npm install srt-webvtt --save
```

## Getting Started

Using it very easy but a little tricky indeed.
To getting started:

```js
// Using ES6 es-module
import toWebVTT from "srt-webvtt"; // This is a default export, so you don't have to worry about the import name

// Not using ES6??
var toWebVTT = require("srt-webvtt");
```

## Example and API

When you're using `HTMLMediaElement` (example: `<video>`) and you want to show caption on your video player - there's a native HTML Element that will allow us to do that.
See the official MDN article and tutorial of this `<track>` feature

<a href="https://developer.mozilla.org/en-US/Apps/Fundamentals/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video"> Adding captions and subtitles to HTML5 video</a>

But this feature is limited to WebVTT format and won't allow you to use SRT (very commonly used subtitle)

So, this tiny library will take your `.srt` subtitle file or a `Blob` object and will give you converted `.vtt` file's valid Object URL that you can set as `<track>`'s source.

<h4>See the Example below:</h4>

```js
import { default as toWebVTT } from "srt-webvtt";

try {
  const textTrackUrl = await toWebVTT(input.files[0]); // this function accepts a parameer of SRT subtitle blob/file object
  // It is a valid url that can be used as text track URL
  var track = document.getElementById("my-sub-track"); // Track element (which is child of a video element)
  var video = document.getElementById("my-video"); // Main video element
  track.src = textTrackUrl; // Set the converted URL to track's source
  video.textTracks[0].mode = "show"; // Start showing subtitle to your track
} catch (e) {
  console.error(e.message);
}
```

<br />

`toWebVTT(file: Blob): Promise<string>` and this is it :)

## LICENSE

MIT

---
_Source: https://npm.io/package/srt-webvtt · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._