CORS support for preview thumbnails

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 `<track>` 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.                                                                                                                                                                                         |
 

src/js/config/defaults.js

@@ -415,6 +415,7 @@ const defaults = {
   previewThumbnails: {
     enabled: false,
     src: '',
+    withCredentials: false,
   },
 
   // Vimeo plugin

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,

src/js/plyr.d.ts

@@ -579,6 +579,7 @@ declare namespace Plyr {
   interface PreviewThumbnailsOptions {
     enabled?: boolean;
     src?: string | string[];
+    withCredentials?: boolean;
   }
 
   interface MediaMetadataArtwork {

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 {