Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/codeit-ninja/SRT-Support-for-HTML5-videos
Makes it possible to add SRT files to a HTML5 video using the <track /> element
https://github.com/codeit-ninja/SRT-Support-for-HTML5-videos
Last synced: 3 months ago
JSON representation
Makes it possible to add SRT files to a HTML5 video using the <track /> element
- Host: GitHub
- URL: https://github.com/codeit-ninja/SRT-Support-for-HTML5-videos
- Owner: codeit-ninja
- License: mit
- Created: 2019-02-21T14:34:21.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-03-14T23:24:35.000Z (over 1 year ago)
- Last Synced: 2024-01-03T05:54:06.199Z (6 months ago)
- Language: JavaScript
- Homepage:
- Size: 23.8 MB
- Stars: 33
- Watchers: 2
- Forks: 6
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Security: SECURITY.md
Lists
- awesome-stars - codeit-ninja/SRT-Support-for-HTML5-videos - Makes it possible to add SRT files to a HTML5 video using the <track /> element (JavaScript)
README
# 💐 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
```text
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
```text
https://cdn.jsdelivr.net/npm/srt-support-for-html5-videos/dist/main.iife.js
```
**ES Module**
- Use as ES Module, see usage section
```text
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.
```javascript
// 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*.
```html
```
### 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.
```javascript
/**
* 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*
```javascript
/**
* 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.
```javascript
/**
* 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.
```javascript
/**
* Converts SRT formatted string into a WebVTT formated string
*/
import { srt2vtt } from 'srt-support-for-html5-videos';
const vtt = srt2vtt(srt);
```
### Support me
[
](https://www.buymeacoffee.com/codeit)