diff --git a/README.md b/README.md index 1aad8dd78..a4fe1005e 100644 --- a/README.md +++ b/README.md @@ -303,6 +303,19 @@ TextTrack captions are also hosted on another domain, you will need to add this on CORS checkout the MDN docs: [https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS) +If you need to attach credentials (such as cookies, authorization headers, or certificates) to preview thumbnail requests, use the `withCredentials` option as +illustrated below: + +```js +const player = new Plyr(video, { + previewThumbnails: { + enabled: true, + src: 'https://cdn.example.com/storyboard.vtt', + withCredentials: true, + }, +}); +``` + ## Captions WebVTT captions are supported. To add a caption track, check the HTML example above and look for the `` element. Be sure to @@ -412,7 +425,7 @@ Note the single quotes encapsulating the JSON and double quotes on the object ke | `urls` | Object | See source. | If you wish to override any API URLs then you can do so here. You can also set a custom download URL for the download button. | | `vimeo` | Object | `{ byline: false, portrait: false, title: false, speed: true, transparent: false }` | See [Vimeo embed options](https://github.com/vimeo/player.js/#embed-options). Some are set automatically based on other config options, namely: `loop`, `autoplay`, `muted`, `gesture`, `playsinline` | | `youtube` | Object | `{ noCookie: false, rel: 0, showinfo: 0, iv_load_policy: 3, modestbranding: 1 }` | See [YouTube embed options](https://developers.google.com/youtube/player_parameters#Parameters). The only custom option is `noCookie` to use an alternative to YouTube that doesn't use cookies (useful for GDPR, etc). Some are set automatically based on other config options, namely: `autoplay`, `hl`, `controls`, `disablekb`, `playsinline`, `cc_load_policy`, `cc_lang_pref`, `widget_referrer` | -| `previewThumbnails` | Object | `{ enabled: false, src: '' }` | `enabled`: Whether to enable the preview thumbnails (they must be generated by you). `src` must be either a string or an array of strings representing URLs for the VTT files containing the image URL(s). Learn more about [preview thumbnails](#preview-thumbnails) below. | +| `previewThumbnails` | Object | `{ enabled: false, src: '', withCredentials: false }` | `enabled`: Whether to enable the preview thumbnails (they must be generated by you). `src`: Must be either a string or an array of strings representing URLs for the VTT files containing the image URL(s). Learn more about [preview thumbnails](#preview-thumbnails) below. `withCredentials`: Whether to attach credentials (such as cookies and authorization headers) to the requests. | | `mediaMetadata` | Object | `{ title: '', artist: '', album: '', artwork: [] }` | The [MediaMetadata](https://developer.mozilla.org/en-US/docs/Web/API/MediaMetadata) interface of the Media Session API allows a web page to provide rich media metadata for display in a platform UI. | | `markers` | Object | `{ enabled: false, points: [] }` | `enabled`: Whether to enable markers. `points` is an array of `{ time: number; label: string; }` objects where `time` represents the marker position in seconds and `label` is the HTML string to be displayed. | diff --git a/src/js/config/defaults.js b/src/js/config/defaults.js index e301022e4..bd651ce55 100644 --- a/src/js/config/defaults.js +++ b/src/js/config/defaults.js @@ -415,6 +415,7 @@ const defaults = { previewThumbnails: { enabled: false, src: '', + withCredentials: false, }, // Vimeo plugin diff --git a/src/js/plugins/preview-thumbnails.js b/src/js/plugins/preview-thumbnails.js index efc678f7c..cc4fd5801 100644 --- a/src/js/plugins/preview-thumbnails.js +++ b/src/js/plugins/preview-thumbnails.js @@ -169,7 +169,7 @@ class PreviewThumbnails { // Process individual VTT file getThumbnail = (url) => { return new Promise((resolve) => { - fetch(url).then((response) => { + fetch(url, undefined, this.player.config.previewThumbnails.withCredentials).then((response) => { const thumbnail = { frames: parseVtt(response), height: null, diff --git a/src/js/plyr.d.ts b/src/js/plyr.d.ts index b0659ff40..55bebcbfd 100644 --- a/src/js/plyr.d.ts +++ b/src/js/plyr.d.ts @@ -579,6 +579,7 @@ declare namespace Plyr { interface PreviewThumbnailsOptions { enabled?: boolean; src?: string | string[]; + withCredentials?: boolean; } interface MediaMetadataArtwork { diff --git a/src/js/utils/fetch.js b/src/js/utils/fetch.js index 1d0791ea7..5379fa0c9 100644 --- a/src/js/utils/fetch.js +++ b/src/js/utils/fetch.js @@ -3,7 +3,7 @@ // Using XHR to avoid issues with older browsers // ========================================================================== -export default function fetch(url, responseType = 'text') { +export default function fetch(url, responseType = 'text', withCredentials = false) { return new Promise((resolve, reject) => { try { const request = new XMLHttpRequest(); @@ -13,6 +13,11 @@ export default function fetch(url, responseType = 'text') { return; } + // Set to true if needed for CORS + if (withCredentials) { + request.withCredentials = true; + } + request.addEventListener('load', () => { if (responseType === 'text') { try {