7ds7 / videojs-vjstranscribe

Creates searchable transcripts from text tracks

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;
}

videojs-vjstranscribe's Issues

Bilingual transcripts support

First, Your project is great and still active
Did you ever think about implementation of bilingual transcripts. I am not a coder, so I can't help. But I know it possible, take a look at
toomva.com
studyphim.vn

Metadata text tracks should be excluded from the transcribe element

Text tracks on VideoJS can have a kind 'metadata'. This mode means that the track will update as the video is playing, but it won't be visible to the viewer. This is most useful for tracks where kind="metadata" . A common use case for metadata text tracks is to use them to trigger behaviors when their cues become active.

We don't want these to show in the transcript, as they will confuse users.