Skip to content

Conversation

gurupras
Copy link
Contributor

@gurupras gurupras commented Jun 13, 2019

Added functionality to upload captions.

Here's a demo

Link to related issue (if applicable)

Summary of proposed changes

The default config's captions property has been changed as follows:

captions: {
active: false,
    language: 'auto',
    // Listen to new tracks added after Plyr is initialized.
    // This is needed for streaming captions, but may result in unselectable options
    update: false,
+   // Allow uploading captions from local filesystem.
+   // Once a file is selected,
+   // This either requires update to be true or the developer needs to call
+   upload: {
+       enabled: false,
+       // The formats that are valid
+       formats: ['vtt'],
+       // Set to true if you're allowing formats other than vtt where the input needs to be processed.
+       // This is useful in cases where the developer allows selecting of
+       // formats such as srt, ssa, etc, which need to be converted into vtt
+       // before plyr can add it as a track element.
+       callback: false,
+       // The event that plyr will trigger when the user has selected a file and callback is true.
+       // If null, then plyr will treat the file as a VTT file and directly add it
+       onInput: 'trackinput',
+       // The event that plyr will listen for when callback is true.
+       // If null, then plyr will treat the file as a VTT file and directly add it.
+       onProcessed: 'inserttrack',
+   },
}

If captions.upload.enabled is set to true, then:

  1. Captions menu is always shown under settings
  2. In addition to 'Disabled', a new menu entry called 'Upload Captions' is shown

A hidden <input type="file"> object is created and listeners are set up for this. When the 'Upload Captions' option is clicked, a click is simulated on this <input type="file"> element which allows the user to upload a file.
The default configuration only allows uploading VTT files and has no callbacks for the developers to make any changes. However, by setting captions.upload.callback = true, the developer can listen for the event specified under captions.upload.onInput to know when the user has selected a file and perform operations on the file's text. These operations may involve converting from various formats into the WebVTT format. Once all operations are completed, the developer is expected to trigger the event specified under captions.upload.onProcessed to tell Plyr to add the processed text as a TextTrack.

Checklist

  • Use develop as the base branch
  • Exclude the gulp build (/dist changes) from the PR
  • Test on supported browsers

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant