diff --git a/CHANGELOG.md b/CHANGELOG.md index 06855f6f..0b5724d3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -66,7 +66,7 @@ - Fix "A `ReferenceError: _classCallCheck is not defined` error has occurred." error (thanks @hex-ci) - Fix issue with CSS custom property check (thanks @syedhusain-appspace) - Fix for slow loading videos not autoplaying (thanks @DanielHuntleySBG) -- Fix for betwork requests are not cancelled after the player is destroyed (thanks @DanielHuntleySBG) +- Fix for network requests are not cancelled after the player is destroyed (thanks @DanielHuntleySBG) - Added option to disable custom controls for YouTube and Vimeo ### v3.6.2 @@ -111,7 +111,7 @@ ### v3.5.8 - Added `flex-direction` property to fix some issues introduced in v3.5.7 when using custom CSS -- Cleaned up the organisation of some of the SCSS files (should not effect CSS output) +- Cleaned up the organization of some of the SCSS files (should not effect CSS output) - Added `referrerPolicy` option for Vimeo to prevent an issue present in the demo site - Remove all Vimeo controls for Pro & Premium accounts - Improve thumbnail size calculations when size is set per css (thanks @ydylla) @@ -126,7 +126,7 @@ - Accessibility tweak for the play button (thanks @lunika) - Fix for ads configuration (thanks @SoftCreatR) - Fix handling listener return value (thanks @taion) -- Added localisation key for PIP (picture-in-picture) (thanks @lmislm) +- Added localization key for PIP (picture-in-picture) (thanks @lmislm) - Preserve viewBox attribute in SVG sprite symbols (thanks @bseib) - Fix being unable to unmute autoplayed video on iOS (thanks @sumanbh) - Fixed Plyr container not resizing responsively (thanks @shravan2x) diff --git a/CONTROLS.md b/CONTROLS.md index b7b08c58..73959937 100644 --- a/CONTROLS.md +++ b/CONTROLS.md @@ -2,11 +2,11 @@ This is the markup that is rendered for the Plyr controls. You can use the default controls or provide a customized version of markup based on your needs. You can pass the following to the `controls` option: -- `Array` of options (this builds the default controls based on your choices) -- `Element` with the controls -- `String` containing the desired HTML -- `false` (or empty string or array) to disable all controls -- `Function` that will be executed and should return one of the above +- `Array` of options (this builds the default controls based on your choices) +- `Element` with the controls +- `String` containing the desired HTML +- `false` (or empty string or array) to disable all controls +- `Function` that will be executed and should return one of the above ## Using default controls @@ -14,28 +14,28 @@ If you want to use the standard controls as they are, you don't need to pass any ```javascript controls: [ - 'play-large', // The large play button in the center - 'restart', // Restart playback - 'rewind', // Rewind by the seek time (default 10 seconds) - 'play', // Play/pause playback - 'fast-forward', // Fast forward by the seek time (default 10 seconds) - 'progress', // The progress bar and scrubber for playback and buffering - 'current-time', // The current time of playback - 'duration', // The full duration of the media - 'mute', // Toggle mute - 'volume', // Volume control - 'captions', // Toggle captions - 'settings', // Settings menu - 'pip', // Picture-in-picture (currently Safari only) - 'airplay', // Airplay (currently Safari only) - 'download', // Show a download button with a link to either the current source or a custom URL you specify in your options - 'fullscreen', // Toggle fullscreen + 'play-large', // The large play button in the center + 'restart', // Restart playback + 'rewind', // Rewind by the seek time (default 10 seconds) + 'play', // Play/pause playback + 'fast-forward', // Fast forward by the seek time (default 10 seconds) + 'progress', // The progress bar and scrubber for playback and buffering + 'current-time', // The current time of playback + 'duration', // The full duration of the media + 'mute', // Toggle mute + 'volume', // Volume control + 'captions', // Toggle captions + 'settings', // Settings menu + 'pip', // Picture-in-picture (currently Safari only) + 'airplay', // Airplay (currently Safari only) + 'download', // Show a download button with a link to either the current source or a custom URL you specify in your options + 'fullscreen', // Toggle fullscreen ]; ``` ### Internationalization using default controls -You can provide an `i18n` object as one of your options when initialising the plugin which we be used when rendering the controls. +You can provide an `i18n` object as one of your options when initializing the plugin which we be used when rendering the controls. #### Example @@ -84,14 +84,14 @@ The classes and data attributes used in your template should match the `selector You need to add several placeholders to your HTML template that are replaced when rendering: -- `{id}` - the dynamically generated ID for the player (for form controls) -- `{seektime}` - the seek time specified in options for fast forward and rewind -- `{title}` - the title of your media, if specified +- `{id}` - the dynamically generated ID for the player (for form controls) +- `{seektime}` - the seek time specified in options for fast forward and rewind +- `{title}` - the title of your media, if specified ### Limitations -- Currently the settings menus are not supported with custom controls HTML -- AirPlay and PiP buttons can be added but you will have to manage feature detection +- Currently the settings menus are not supported with custom controls HTML +- AirPlay and PiP buttons can be added but you will have to manage feature detection ### Example diff --git a/README.md b/README.md index d3275671..3ef2198a 100644 --- a/README.md +++ b/README.md @@ -131,7 +131,7 @@ Alternatively you can include the `plyr.js` script before the closing `` See [initialising](#initialising) for more information on advanced setups. -You can use our CDN (provided by [Fastly](https://www.fastly.com/)) for the JavaScript. There's 2 versions; one with and one without [polyfills](#polyfills). My recommendation would be to manage polyfills seperately as part of your application but to make life easier you can use the polyfilled build. +You can use our CDN (provided by [Fastly](https://www.fastly.com/)) for the JavaScript. There's 2 versions; one with and one without [polyfills](#polyfills). My recommendation would be to manage polyfills separately as part of your application but to make life easier you can use the polyfilled build. ```html @@ -145,7 +145,7 @@ You can use our CDN (provided by [Fastly](https://www.fastly.com/)) for the Java ## CSS -Include the `plyr.css` stylsheet into your ``. +Include the `plyr.css` stylesheet into your ``. ```html @@ -184,43 +184,43 @@ Here's a list of the properties and what they are used for: | Name | Description | Default / Fallback | | ---------------------------------------------- | ------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------- | -| `--plyr-color-main` | The primary UI color. | ![#f03c15](https://place-hold.it/15/00b3ff/000000?text=+) `#00b3ff` | -| `--plyr-video-background` | The background color of video and poster wrappers for using alpha channel videos and poster images. | `rgba(0, 0, 0, 1)` | +| `--plyr-color-main` | The primary UI color. | ![#f03c15](https://place-hold.it/15/00b3ff/000000?text=+) `#00b3ff` | +| `--plyr-video-background` | The background color of video and poster wrappers for using alpha channel videos and poster images. | `rgba(0, 0, 0, 1)` | | `--plyr-tab-focus-color` | The color used for the dotted outline when an element is `:focus-visible` (equivalent) keyboard focus. | `--plyr-color-main` | -| `--plyr-badge-background` | The background color for badges in the menu. | ![#4a5464](https://place-hold.it/15/4a5464/000000?text=+) `#4a5464` | -| `--plyr-badge-text-color` | The text color for badges. | ![#ffffff](https://place-hold.it/15/ffffff/000000?text=+) `#ffffff` | +| `--plyr-badge-background` | The background color for badges in the menu. | ![#4a5464](https://place-hold.it/15/4a5464/000000?text=+) `#4a5464` | +| `--plyr-badge-text-color` | The text color for badges. | ![#ffffff](https://place-hold.it/15/ffffff/000000?text=+) `#ffffff` | | `--plyr-badge-border-radius` | The border radius used for badges. | `2px` | | `--plyr-tab-focus-color` | The color used to highlight tab (keyboard) focus. | `--plyr-color-main` | | `--plyr-captions-background` | The color for the background of captions. | `rgba(0, 0, 0, 0.8)` | -| `--plyr-captions-text-color` | The color used for the captions text. | ![#ffffff](https://place-hold.it/15/ffffff/000000?text=+) `#ffffff` | +| `--plyr-captions-text-color` | The color used for the captions text. | ![#ffffff](https://place-hold.it/15/ffffff/000000?text=+) `#ffffff` | | `--plyr-control-icon-size` | The size of the icons used in the controls. | `18px` | | `--plyr-control-spacing` | The space between controls (sometimes used in a multiple - e.g. `10px / 2 = 5px`). | `10px` | | `--plyr-control-padding` | The padding inside controls. | `--plyr-control-spacing * 0.7` (`7px`) | | `--plyr-control-radius` | The border radius used on controls. | `3px` | | `--plyr-control-toggle-checked-background` | The background color used for checked menu items. | `--plyr-color-main` | | `--plyr-video-controls-background` | The background for the video controls. | `linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75))` | -| `--plyr-video-control-color` | The text/icon color for video controls. | ![#ffffff](https://place-hold.it/15/ffffff/000000?text=+) `#ffffff` | -| `--plyr-video-control-color-hover` | The text/icon color used when video controls are `:hover`, `:focus` and `:focus-visible` (equivalent). | ![#ffffff](https://place-hold.it/15/ffffff/000000?text=+) `#ffffff` | +| `--plyr-video-control-color` | The text/icon color for video controls. | ![#ffffff](https://place-hold.it/15/ffffff/000000?text=+) `#ffffff` | +| `--plyr-video-control-color-hover` | The text/icon color used when video controls are `:hover`, `:focus` and `:focus-visible` (equivalent). | ![#ffffff](https://place-hold.it/15/ffffff/000000?text=+) `#ffffff` | | `--plyr-video-control-background-hover` | The background color used when video controls are `:hover`, `:focus` and `:focus-visible` (equivalent). | `--plyr-color-main` | -| `--plyr-audio-controls-background` | The background for the audio controls. | ![#ffffff](https://place-hold.it/15/ffffff/000000?text=+) `#ffffff` | -| `--plyr-audio-control-color` | The text/icon color for audio controls. | ![#4a5464](https://place-hold.it/15/4a5464/000000?text=+) `#4a5464` | -| `--plyr-audio-control-color-hover` | The text/icon color used when audio controls are `:hover`, `:focus` and `:focus-visible` (equivalent). | ![#ffffff](https://place-hold.it/15/ffffff/000000?text=+) `#ffffff` | +| `--plyr-audio-controls-background` | The background for the audio controls. | ![#ffffff](https://place-hold.it/15/ffffff/000000?text=+) `#ffffff` | +| `--plyr-audio-control-color` | The text/icon color for audio controls. | ![#4a5464](https://place-hold.it/15/4a5464/000000?text=+) `#4a5464` | +| `--plyr-audio-control-color-hover` | The text/icon color used when audio controls are `:hover`, `:focus` and `:focus-visible` (equivalent). | ![#ffffff](https://place-hold.it/15/ffffff/000000?text=+) `#ffffff` | | `--plyr-audio-control-background-hover` | The background color used when video controls are `:hover`, `:focus` and `:focus-visible` (equivalent). | `--plyr-color-main` | | `--plyr-menu-background` | The background color for menus. | `rgba(255, 255, 255, 0.9)` | -| `--plyr-menu-color` | The text/icon color for menu items. | ![#4a5464](https://place-hold.it/15/4a5464/000000?text=+) `#4a5464` | +| `--plyr-menu-color` | The text/icon color for menu items. | ![#4a5464](https://place-hold.it/15/4a5464/000000?text=+) `#4a5464` | | `--plyr-menu-shadow` | The shadow used on menus. | `0 1px 2px rgba(0, 0, 0, 0.15)` | | `--plyr-menu-radius` | The border radius on the menu. | `4px` | | `--plyr-menu-arrow-size` | The size of the arrow on the bottom of the menu. | `6px` | -| `--plyr-menu-item-arrow-color` | The color of the arrows in the menu. | ![#728197](https://place-hold.it/15/728197/000000?text=+) `#728197` | +| `--plyr-menu-item-arrow-color` | The color of the arrows in the menu. | ![#728197](https://place-hold.it/15/728197/000000?text=+) `#728197` | | `--plyr-menu-item-arrow-size` | The size of the arrows in the menu. | `4px` | -| `--plyr-menu-border-color` | The border color for the bottom of the back button in the top of the sub menu pages. | ![#dcdfe5](https://place-hold.it/15/dcdfe5/000000?text=+) `#dcdfe5` | -| `--plyr-menu-border-shadow-color` | The shadow below the border of the back button in the top of the sub menu pages. | ![#ffffff](https://place-hold.it/15/ffffff/000000?text=+) `#ffffff` | +| `--plyr-menu-border-color` | The border color for the bottom of the back button in the top of the sub menu pages. | ![#dcdfe5](https://place-hold.it/15/dcdfe5/000000?text=+) `#dcdfe5` | +| `--plyr-menu-border-shadow-color` | The shadow below the border of the back button in the top of the sub menu pages. | ![#ffffff](https://place-hold.it/15/ffffff/000000?text=+) `#ffffff` | | `--plyr-progress-loading-size` | The size of the stripes in the loading state in the scrubber. | `25px` | | `--plyr-progress-loading-background` | The background color on the loading state in the scrubber. | `rgba(35, 40, 47, 0.6)` | | `--plyr-video-progress-buffered-background` | The fill color for the buffer indication in the scrubber for video. | `rgba(255, 255, 255, 0.25)` | | `--plyr-audio-progress-buffered-background` | The fill color for the buffer indication in the scrubber for audio. | `rgba(193, 200, 209, 0.6)` | | `--plyr-range-thumb-height` | The height of the scrubber handle/thumb. | `13px` | -| `--plyr-range-thumb-background` | The background of the scrubber handle/thumb. | ![#ffffff](https://place-hold.it/15/ffffff/000000?text=+) `#ffffff` | +| `--plyr-range-thumb-background` | The background of the scrubber handle/thumb. | ![#ffffff](https://place-hold.it/15/ffffff/000000?text=+) `#ffffff` | | `--plyr-range-thumb-shadow` | The shadow of the scrubber handle/thumb. | `0 1px 1px rgba(215, 26, 18, 0.15), 0 0 0 1px rgba(215, 26, 18, 0.2)` | | `--plyr-range-thumb-active-shadow-width` | The width of the shadow when the scrubber handle/thumb is `:active` (pressed). | `3px` | | `--plyr-range-track-height` | The height of the scrubber/progress track. | `5px` | @@ -230,7 +230,7 @@ Here's a list of the properties and what they are used for: | `--plyr-audio-range-track-background` | The background of the scrubber/progress. | `--plyr-video-progress-buffered-background` | | `--plyr-audio-range-thumb-active-shadow-color` | The color of the shadow when the audio scrubber handle/thumb is `:active` (pressed). | `rgba(215, 26, 18, 0.1)` | | `--plyr-tooltip-background` | The background color for tooltips. | `rgba(255, 255, 255, 0.9)` | -| `--plyr-tooltip-color` | The text color for tooltips. | ![#4a5464](https://place-hold.it/15/4a5464/000000?text=+) `#4a5464` | +| `--plyr-tooltip-color` | The text color for tooltips. | ![#4a5464](https://place-hold.it/15/4a5464/000000?text=+) `#4a5464` | | `--plyr-tooltip-padding` | The padding for tooltips. | `calc(var(--plyr-control-spacing) / 2))` | | `--plyr-tooltip-arrow-size` | The size of the arrow under tooltips. | `4px` | | `--plyr-tooltip-radius` | The border radius on tooltips. | `3px` | @@ -267,9 +267,7 @@ You can set them in your CSS for all players: ...or in your HTML: ```html - + ``` ### SASS @@ -344,7 +342,7 @@ The HTMLElement or string selector can be the target `