# videojs-vjstranscribe

> Creates searchable transcripts from text tracks

Latest version **1.0.3** (published 2024-04-28) · GPLv3 license · 0 weekly downloads

## Install

```sh
npm install videojs-vjstranscribe
pnpm add videojs-vjstranscribe
yarn add videojs-vjstranscribe
bun add videojs-vjstranscribe
```

## 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 | 1.0.3 |
| Published | 2024-04-28 |
| First published | 2023-09-27 |
| Weekly downloads | 0 |
| License | GPLv3 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 88.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 6 |
| Author | 7Ds7 |
| Maintainers | 7ds7 |
| Keywords | videojs-plugin, transcribe, transcript, videojs, videojs-vjstranscribe |

## Links

- npm: https://www.npmjs.com/package/videojs-vjstranscribe
- Repository: https://github.com/7Ds7/videojs-vjstranscribe
- Homepage: https://github.com/7Ds7/videojs-vjstranscribe#readme
- Issues: https://github.com/7Ds7/videojs-vjstranscribe/issues
- npm.io page: https://npm.io/package/videojs-vjstranscribe

## Dependencies (1)

- [video.js](https://npm.io/package/video.js.md) ^8.5

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 1.0.3 (latest) — 2024-04-28
- 1.0.2 — 2024-04-09
- 1.0.1 — 2023-09-27
- 1.0.0 — 2023-09-27

## README

# videojs-vjstranscribe

Creates searchable transcripts from text tracks

## Demo
https://codepen.io/binaryunit/pen/MWZGRej

or

Clone this repo and use `npm run demo` and visit http://localhost:9001/demo/ on your browser.


## Usage
Include the plugin files:

* dist/videojs-vjstranscribe.js
* dist/videojs-vjstranscribe.css

also available trough  ```npm install videojs-vjstranscribe```


```
let player = videojs(document.querySelector('.video-js'), {
  plugins: {
    vjstranscribe: {}
  }
});
```

## Options

**NOTE:** if the any of the elements id does not exist in the document it will be created after the player. By default it creates the element `<div id='vjs-transcribe'></div>` to hold the transcribe widget (ex: widgetId)

```
let player = videojs(document.querySelector('.video-js'), {
  plugins: {
    vjstranscribe: {
    customClass: 'vjs-transcribe',
    widgetId: 'vjs-transcribe',
    selector: true,
    selectorId: 'vjs-transcribe-selector',
    download: true,
    copy: true,
    downloadId: 'vjs-transcribe-download',
    search: true,
    searchId: 'vjs-transcribe-search',
    pip: true,
    pipId: 'vjs-transcribe-pip',
    mode: 'line',
    disablecc: true
    }
  }
});
```

| Option  | Description | Default |
| ------------- | ------------- | ------------- |
| customClass | Custom class to add around the video.js player wrapper (string) | 'vjs-transcribe' |
| widgetId | #Id of the element that will hold the transcribe widget (string)  | 'vjs-transcribe' |
| selector | Enable or disable language selector (boolean)  | true |
| selectorId | #Id of the element that will hold the language selector (string)  | 'vjs-transcribe-selector' |
| download | Enable or disable a button to download the current track (boolean)  | true |
| copy | Enable or disable a button to copy the transcript widget content (boolean)  | true |
| downloadId | #Id of the element that will hold the download and copy buttons (string)  | 'vjs-transcribe-download' |
| search | Enable or disable a field to search within the transcript widget (boolean)  | true |
| searchId | #Id of the element that will hold the search field (string)  | 'vjs-transcribe-search' |
| pip | Enable or disable a picture-in-picture element for the player whenver the transcript is active (boolean)  | true |
| pipId | #Id of the element that will hold the picture-in-picture player (string)  | 'vjs-transcribe-download' |
| mode | It can be set to either `'line'` which shows each text track item in a single line with time stamps, or `'prose'` that strips out timestamps and presents a running text (string)  | 'line' |




## Style
Styles are minimal so it inherits from your css, although whatever is set can be easily overriden.
Two root vars are set for convenience
```
:root {
  --vjs-transcribe-primary-color: #8CC04F;
  --vjs-transcribe-secondary-color: #d9d9d7;
}
```

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