💐 Add support for SRT subtitles in HTML5 video elements

✅ This package uses 0 external dependencies!

Officially only VTT files are supported by the HTML5 track element. This package will convert your SRT subtitles on the fly to VTT subtitles.

Installation

As a NPM package, works both in the browser and NodeJS

npm install srt-support-for-html5-videos

CDN

• Ready to use script, just include it, and it will parse all video elements to convert the tracks

https://cdn.jsdelivr.net/npm/srt-support-for-html5-videos/dist/main.iife.js

ES Module

• Use as ES Module, see usage section

https://cdn.jsdelivr.net/npm/srt-support-for-html5-videos/dist/main.es.js

Usage

If you installed it as a package using NPM or as an ES Module using the CDN, you have to call the transformSrtTracks() manually in order to transform the tracks.

// If using NPM
import { transformSrtTracks } from 'srt-support-for-html5-videos';
// If using CDN
import { transformSrtTracks } from 'https://cdn.jsdelivr.net/npm/srt-support-for-html5-videos/dist/main.es.js';

// Single video element
const video = document.getElementById('video');

transformSrtTracks(video);

// All video elements
const videos = document.querySelectorAll('video');

[...videos].forEach(transformSrtTracks);

If your SRT file is encoded in a different format than UTF-8 you must specify the encoding format in the track element using the data-encoding attribute.

<video src="/path/to/video.mp4">
  <track src="/path/to/subtitle_en.srt" label="English" srclang="en" data-encoding="iso-8859-2" kind="subtitles" default>
  <track src="/path/to/subtitle_nl.srt" label="Nederlands" srclang="nl" data-encoding="iso-8859-2" kind="subtitles">
</video>

Other functions

Some more functions are exported, these are just helper functions, you can import and use them if you have any use for them.

toVttCue

Function is internally used to covert a srt cue into a WebVTT compatible cue.

/**
 * Converts a SRT cue into a VTT compatible cue
 * 
 * For example
 *
 * 1
 * 00:00:00,498 --> 00:00:02,827
 * Here's what I love most
 * about food and diet.
 *
 * Will be converted into
 *
 * Cue {
 *     number: 1,
 *     startTime: 0.498
 *     endTime: 2.827,
 *     text: 'Here\'s what I love most\nabout food and diet.'
 * }
 *
 */
import { toVttCue } from 'srt-support-for-html5-videos';

hmsToSeconds

Converts a HH:MM:SS.MS string into a number in seconds

/**
 * Converts a VTT or SRT timing `string` 
 * to a `number` in seconds + milliseconds
 */
import { hmsToSeconds } from 'srt-support-for-html5-videos';

const seconds = hmsToSeconds('00:00:02.827'); // 2.827

fetchTrack

Fetches the contents of a track and returns the body.

/**
 * Fetches the contents of a track source
 */
import { fetchTrack } from 'srt-support-for-html5-videos';

const content = await fetchTrack('https://example.com/path/my-subtitle.srt');

srt2vtt

Convert SRT to VTT.

There is no advanced API returning to add extra VTT sections like a header, comment or styles.

/**
 * Converts SRT formatted string into a WebVTT formated string
 */
import { srt2vtt } from 'srt-support-for-html5-videos';

const vtt = srt2vtt(srt);

Support me