From 1b86560287f8297787c12e14976394829f111526 Mon Sep 17 00:00:00 2001 From: Kizzull Date: Sun, 18 Feb 2024 21:30:06 +0000 Subject: [PATCH 1/2] CORS support for preview thumbnails --- README.md | 95 ++++++++++++++++------------ src/js/config/defaults.js | 1 + src/js/plugins/preview-thumbnails.js | 2 +- src/js/plyr.d.ts | 1 + src/js/utils/fetch.js | 7 +- 5 files changed, 63 insertions(+), 43 deletions(-) diff --git a/README.md b/README.md index 1aad8dd78..db954f83d 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 @@ -374,47 +387,47 @@ Options can be passed as an object to the constructor as above or as JSON in `da Note the single quotes encapsulating the JSON and double quotes on the object keys. Only string values need double quotes. -| Option | Type | Default | Description | -| -------------------- | -------------------------- | ------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `enabled` | Boolean | `true` | Completely disable Plyr. This would allow you to do a User Agent check or similar to programmatically enable or disable Plyr for a certain UA. Example below. | -| `debug` | Boolean | `false` | Display debugging information in the console | -| `controls` | Array, Function or Element | `['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'captions', 'settings', 'pip', 'airplay', 'fullscreen']` | If a function is passed, it is assumed your method will return either an element or HTML string for the controls. Three arguments will be passed to your function; `id` (the unique id for the player), `seektime` (the seektime step in seconds), and `title` (the media title). See [CONTROLS.md](CONTROLS.md) for more info on how the html needs to be structured. | -| `settings` | Array | `['captions', 'quality', 'speed', 'loop']` | If the default controls are used, you can specify which settings to show in the menu | -| `i18n` | Object | See [defaults.js](/src/js/config/defaults.js) | Used for internationalization (i18n) of the text within the UI. | -| `loadSprite` | Boolean | `true` | Load the SVG sprite specified as the `iconUrl` option (if a URL). If `false`, it is assumed you are handling sprite loading yourself. | -| `iconUrl` | String | `null` | Specify a URL or path to the SVG sprite. See the [SVG section](#svg) for more info. | -| `iconPrefix` | String | `plyr` | Specify the id prefix for the icons used in the default controls (e.g. "plyr-play" would be "plyr"). This is to prevent clashes if you're using your own SVG sprite but with the default controls. Most people can ignore this option. | -| `blankVideo` | String | `https://cdn.plyr.io/static/blank.mp4` | Specify a URL or path to a blank video file used to properly cancel network requests. | -| `autoplay`² | Boolean | `false` | Autoplay the media on load. If the `autoplay` attribute is present on a `