ProximaEntertainment/plyr
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

More work on custom properties and documentation

Browse Source
This commit is contained in:
Sam Potts 2020-04-24 00:14:50 +10:00
parent a9b24f5e1f
commit a97008aeeb
18 changed files with 290 additions and 223 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
package.json
View File

@ -39,17 +39,17 @@
},
"devDependencies": {
"ansi-colors": "^4.1.1",
"autoprefixer": "^9.7.5",
"aws-sdk": "^2.649.0",
"autoprefixer": "^9.7.6",
"aws-sdk": "^2.658.0",
"@babel/core": "^7.9.0",
"@babel/preset-env": "^7.9.0",
"@babel/preset-env": "^7.9.5",
"babel-eslint": "^10.1.0",
"browser-sync": "^2.26.7",
"del": "^5.1.0",
"eslint": "^6.8.0",
"eslint-config-airbnb-base": "^14.1.0",
"eslint-config-prettier": "^6.10.1",
"eslint-plugin-import": "^2.20.1",
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-simple-import-sort": "^5.0.2",
"fancy-log": "^1.3.3",
"fastly-purge": "^1.0.1",
@ -77,21 +77,21 @@
"prettier-stylelint": "^0.4.2",
"remark-cli": "^8.0.0",
"remark-validate-links": "^10.0.0",
"rollup": "^2.3.1",
"rollup": "^2.6.1",
"rollup-plugin-babel": "^4.4.0",
"rollup-plugin-commonjs": "^10.1.0",
"rollup-plugin-node-resolve": "^5.2.0",
"stylelint": "^13.2.1",
"stylelint": "^13.3.2",
"stylelint-config-prettier": "^8.0.1",
"stylelint-config-recommended": "^3.0.0",
"stylelint-config-sass-guidelines": "^7.0.0",
"stylelint-order": "^4.0.0",
"stylelint-scss": "^3.16.0",
"stylelint-scss": "^3.17.0",
"stylelint-selector-bem-pattern": "^2.1.0",
"through2": "^3.0.1"
},
"dependencies": {
"core-js": "^3.6.4",
"core-js": "^3.6.5",
"custom-event-polyfill": "^1.0.7",
"loadjs": "^4.2.0",
"rangetouch": "^2.0.1",

367
readme.md
View File

@ -8,26 +8,26 @@ Plyr is a simple, lightweight, accessible and customizable HTML5, YouTube and Vi
# Features
- 📼 **HTML Video & Audio, YouTube & Vimeo** - support for the major formats
- 💪 **Accessible** - full support for VTT captions and screen readers
- 🔧 **[Customizable](#html)** - make the player look how you want with the markup you want
- 😎 **Clean HTML** - uses the _right_ elements. `<input type="range">` for volume and `<progress>` for progress and well, `<button>`s for buttons. There's no
`<span>` or `<a href="#">` button hacks
- 📱 **Responsive** - works with any screen size
- 💵 **[Monetization](#ads)** - make money from your videos
- 📹 **[Streaming](#demos)** - support for hls.js, Shaka and dash.js streaming playback
- 🎛 **[API](#api)** - toggle playback, volume, seeking, and more through a standardized API
- 🎤 **[Events](#events)** - no messing around with Vimeo and YouTube APIs, all events are standardized across formats
- 🔎 **[Fullscreen](#fullscreen)** - supports native fullscreen with fallback to "full window" modes
- ⌨️ **[Shortcuts](#shortcuts)** - supports keyboard shortcuts
- 🖥 **Picture-in-Picture** - supports picture-in-picture mode
- 📱 **Playsinline** - supports the `playsinline` attribute
- 🏎 **Speed controls** - adjust speed on the fly
- 📖 **Multiple captions** - support for multiple caption tracks
- 🌎 **i18n support** - support for internationalization of controls
- 👌 **[Preview thumbnails](#preview-thumbnails)** - support for displaying preview thumbnails
- 🤟 **No frameworks** - written in "vanilla" ES6 JavaScript, no jQuery required
- 💁‍♀️ **SASS** - to include in your build processes
- 📼 **HTML Video & Audio, YouTube & Vimeo** - support for the major formats
- 💪 **Accessible** - full support for VTT captions and screen readers
- 🔧 **[Customizable](#html)** - make the player look how you want with the markup you want
- 😎 **Clean HTML** - uses the _right_ elements. `<input type="range">` for volume and `<progress>` for progress and well, `<button>`s for buttons. There's no
`<span>` or `<a href="#">` button hacks
- 📱 **Responsive** - works with any screen size
- 💵 **[Monetization](#ads)** - make money from your videos
- 📹 **[Streaming](#demos)** - support for hls.js, Shaka and dash.js streaming playback
- 🎛 **[API](#api)** - toggle playback, volume, seeking, and more through a standardized API
- 🎤 **[Events](#events)** - no messing around with Vimeo and YouTube APIs, all events are standardized across formats
- 🔎 **[Fullscreen](#fullscreen)** - supports native fullscreen with fallback to "full window" modes
- ⌨️ **[Shortcuts](#shortcuts)** - supports keyboard shortcuts
- 🖥 **Picture-in-Picture** - supports picture-in-picture mode
- 📱 **Playsinline** - supports the `playsinline` attribute
- 🏎 **Speed controls** - adjust speed on the fly
- 📖 **Multiple captions** - support for multiple caption tracks
- 🌎 **i18n support** - support for internationalization of controls
- 👌 **[Preview thumbnails](#preview-thumbnails)** - support for displaying preview thumbnails
- 🤟 **No frameworks** - written in "vanilla" ES6 JavaScript, no jQuery required
- 💁‍♀️ **SASS** - to include in your build processes
### Demos
@ -42,21 +42,23 @@ Plyr extends upon the standard [HTML5 media element](https://developer.mozilla.o
### HTML5 Video
```html
<video poster="/path/to/poster.jpg" id="player" playsinline controls>
<source src="/path/to/video.mp4" type="video/mp4" />
<source src="/path/to/video.webm" type="video/webm" />
<video id="player" playsinline controls data-poster="/path/to/poster.jpg">
<source src="/path/to/video.mp4" type="video/mp4" />
<source src="/path/to/video.webm" type="video/webm" />
<!-- Captions are optional -->
<track kind="captions" label="English captions" src="/path/to/captions.vtt" srclang="en" default />
<!-- Captions are optional -->
<track kind="captions" label="English captions" src="/path/to/captions.vtt" srclang="en" default />
</video>
```
**Note**: The poster image should be specified using `data-poster`. This is to prevent it [being downloaded twice](https://github.com/sampotts/plyr/issues/1531). If you're sure the image will be cached, you can still use the `poster` attribute for true progressive enhancement.
### HTML5 Audio
```html
<audio id="player" controls>
<source src="/path/to/audio.mp3" type="audio/mp3" />
<source src="/path/to/audio.ogg" type="audio/ogg" />
<source src="/path/to/audio.mp3" type="audio/mp3" />
<source src="/path/to/audio.ogg" type="audio/ogg" />
</audio>
```
@ -68,12 +70,12 @@ We recommend [progressive enhancement](https://www.smashingmagazine.com/2009/04/
```html
<div class="plyr__video-embed" id="player">
<iframe
src="https://www.youtube.com/embed/bTqVqk7FSmY?origin=https://plyr.io&amp;iv_load_policy=3&amp;modestbranding=1&amp;playsinline=1&amp;showinfo=0&amp;rel=0&amp;enablejsapi=1"
allowfullscreen
allowtransparency
allow="autoplay"
></iframe>
<iframe
src="https://www.youtube.com/embed/bTqVqk7FSmY?origin=https://plyr.io&amp;iv_load_policy=3&amp;modestbranding=1&amp;playsinline=1&amp;showinfo=0&amp;rel=0&amp;enablejsapi=1"
allowfullscreen
allowtransparency
allow="autoplay"
></iframe>
</div>
```
@ -93,12 +95,12 @@ Much the same as YouTube above.
```html
<div class="plyr__video-embed" id="player">
<iframe
src="https://player.vimeo.com/video/76979871?loop=false&amp;byline=false&amp;portrait=false&amp;title=false&amp;speed=true&amp;transparent=0&amp;gesture=media"
allowfullscreen
allowtransparency
allow="autoplay"
></iframe>
<iframe
src="https://player.vimeo.com/video/76979871?loop=false&amp;byline=false&amp;portrait=false&amp;title=false&amp;speed=true&amp;transparent=0&amp;gesture=media"
allowfullscreen
allowtransparency
allow="autoplay"
></iframe>
</div>
```
@ -123,7 +125,7 @@ Alternatively you can include the `plyr.js` script before the closing `</body>`
```html
<script src="path/to/plyr.js"></script>
<script>
const player = new Plyr('#player');
const player = new Plyr('#player');
</script>
```
@ -164,9 +166,9 @@ reference, the CDN hosted SVG sprite can be found at `https://cdn.plyr.io/3.5.10
Plyr has partnered up with [vi.ai](https://vi.ai/publisher-video-monetization/?aid=plyrio) to offer monetization options for your videos. Getting setup is easy:
- [Sign up for a vi.ai account](https://vi.ai/publisher-video-monetization/?aid=plyrio)
- Grab your publisher ID from the code snippet
- Enable ads in the [config options](#options) and enter your publisher ID
- [Sign up for a vi.ai account](https://vi.ai/publisher-video-monetization/?aid=plyrio)
- Grab your publisher ID from the code snippet
- Enable ads in the [config options](#options) and enter your publisher ID
Any questions regarding the ads can be sent straight to vi.ai and any issues with rendering raised through GitHub issues.
@ -174,21 +176,90 @@ If you do not wish to use Vi, you can set your own `ads.tagUrl` [option](#option
# Advanced
## Custom CSS
## Customizing the CSS
If you want to change any design tokens used for the rendering of the player, you can do so using [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties).
Here's a list of the properties and what they are used for:
| Name | Description | Fallback |
| ------------------- | ----------------------------------------------- | --------------------- |
| `--plyr-color-main` | The main branding color - used for highlighting | `hsl(198, 100%, 50%)` |
| Name | Description | Default / Fallback |
| ---------------------------------------------- | ------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------- |
| `--plyr-color-main` | The primary UI color. | ![#f03c15](https://placehold.it/15/00b3ff/000000?text=+) `#00b3ff` |
| `--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://placehold.it/15/4a5464/000000?text=+) `#4a5464` |
| `--plyr-badge-text-color` | The text color for badges. | ![#ffffff](https://placehold.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://placehold.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://placehold.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://placehold.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://placehold.it/15/ffffff/000000?text=+) `#ffffff` |
| `--plyr-audio-control-color` | The text/icon color for audio controls. | ![#4a5464](https://placehold.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://placehold.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://placehold.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://placehold.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://placehold.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://placehold.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://placehold.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` |
| `--plyr-range-fill-background` | The fill color of the scrubber/progress. | `--plyr-color-main` |
| `--plyr-video-range-track-background` | The background of the scrubber/progress. | `--plyr-video-progress-buffered-background` |
| `--plyr-video-range-thumb-active-shadow-color` | The color of the shadow when the video scrubber handle/thumb is `:active` (pressed). | `rgba(255, 255, 255, 0.5)` |
| `--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://placehold.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` |
| `--plyr-tooltip-shadow` | The shadow on tooltips. | `0 1px 2px rgba(0, 0, 0, 0.15)` |
| `--plyr-font-family` | The font family used in the player. | |
| `--plyr-font-size-base` | The base font size. Mainly used for captions. | `15px` |
| `--plyr-font-size-small` | The smaller font size. Mainly used for captions. | `13px` |
| `--plyr-font-size-large` | The larger font size. Mainly used for captions. | `18px` |
| `--plyr-font-size-xlarge` | The even larger font size. Mainly used for captions. | `21px` |
| `--plyr-font-size-time` | The font size for the time. | `--plyr-font-size-small` |
| `--plyr-font-size-menu` | The font size used in the menu. | `--plyr-font-size-small` |
| `--plyr-font-size-badge` | The font size used for badges. | `9px` |
| `--plyr-font-weight-regular` | The regular font weight. | `400` |
| `--plyr-font-weight-bold` | The bold font weight. | `600` |
| `--plyr-line-height` | The line height used within the player. | `1.7` |
| `--plyr-font-smoothing` | Whether to enable font antialiasing within the player. | `false` |
You can set them in your CSS:
You can set them in your CSS for all players:
```css
:root {
--plyr-color-main: #1ac266;
}
```
...or for a specific class name:
```css
.player {
--plyr-color-main: #1ac266;
--plyr-color-main: #1ac266;
}
```
@ -241,9 +312,9 @@ WebVTT captions are supported. To add a caption track, check the HTML example ab
You can specify a range of arguments for the constructor to use:
- A [CSS string selector](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors)
- A [`HTMLElement`](https://developer.mozilla.org/en/docs/Web/API/HTMLElement)
- A [jQuery](https://jquery.com) object
- A [CSS string selector](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors)
- A [`HTMLElement`](https://developer.mozilla.org/en/docs/Web/API/HTMLElement)
- A [jQuery](https://jquery.com) object
_Note_: If a `NodeList`, `Array`, or jQuery object are passed, the first element will be used for setup. To setup multiple players, see [multiple players](#multiple-players) below.
@ -289,7 +360,7 @@ The second argument for the constructor is the [options](#options) object:
```javascript
const player = new Plyr('#player', {
title: 'Example Title',
title: 'Example Title',
});
```
@ -344,9 +415,9 @@ Note the single quotes encapsulating the JSON and double quotes on the object ke
1. Vimeo only
2. Autoplay is generally not recommended as it is seen as a negative user experience. It is also disabled in many browsers. Before raising issues, do your homework. More info can be found here:
- https://webkit.org/blog/6784/new-video-policies-for-ios/
- https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
- https://hacks.mozilla.org/2019/02/firefox-66-to-block-automatically-playing-audible-video-and-audio/
- https://webkit.org/blog/6784/new-video-policies-for-ios/
- https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
- https://hacks.mozilla.org/2019/02/firefox-66-to-block-automatically-playing-audible-video-and-audio/
# API
@ -358,7 +429,7 @@ The easiest way to access the Plyr object is to set the return value from your c
```javascript
const player = new Plyr('#player', {
/* options */
/* options */
});
```
@ -366,7 +437,7 @@ You can also access the object through any events:
```javascript
element.addEventListener('ready', event => {
const player = event.detail.plyr;
const player = event.detail.plyr;
});
```
@ -460,39 +531,39 @@ Video example:
```javascript
player.source = {
type: 'video',
title: 'Example title',
sources: [
{
src: '/path/to/movie.mp4',
type: 'video/mp4',
size: 720,
},
{
src: '/path/to/movie.webm',
type: 'video/webm',
size: 1080,
},
],
poster: '/path/to/poster.jpg',
previewThumbnails: {
src: '/path/to/thumbnails.vtt',
type: 'video',
title: 'Example title',
sources: [
{
src: '/path/to/movie.mp4',
type: 'video/mp4',
size: 720,
},
tracks: [
{
kind: 'captions',
label: 'English',
srclang: 'en',
src: '/path/to/captions.en.vtt',
default: true,
},
{
kind: 'captions',
label: 'French',
srclang: 'fr',
src: '/path/to/captions.fr.vtt',
},
],
{
src: '/path/to/movie.webm',
type: 'video/webm',
size: 1080,
},
],
poster: '/path/to/poster.jpg',
previewThumbnails: {
src: '/path/to/thumbnails.vtt',
},
tracks: [
{
kind: 'captions',
label: 'English',
srclang: 'en',
src: '/path/to/captions.en.vtt',
default: true,
},
{
kind: 'captions',
label: 'French',
srclang: 'fr',
src: '/path/to/captions.fr.vtt',
},
],
};
```
@ -500,18 +571,18 @@ Audio example:
```javascript
player.source = {
type: 'audio',
title: 'Example title',
sources: [
{
src: '/path/to/audio.mp3',
type: 'audio/mp3',
},
{
src: '/path/to/audio.ogg',
type: 'audio/ogg',
},
],
type: 'audio',
title: 'Example title',
sources: [
{
src: '/path/to/audio.mp3',
type: 'audio/mp3',
},
{
src: '/path/to/audio.ogg',
type: 'audio/ogg',
},
],
};
```
@ -519,13 +590,13 @@ YouTube example:
```javascript
player.source = {
type: 'video',
sources: [
{
src: 'bTqVqk7FSmY',
provider: 'youtube',
},
],
type: 'video',
sources: [
{
src: 'bTqVqk7FSmY',
provider: 'youtube',
},
],
};
```
@ -535,13 +606,13 @@ Vimeo example
```javascript
player.source = {
type: 'video',
sources: [
{
src: '143418951',
provider: 'vimeo',
},
],
type: 'video',
sources: [
{
src: '143418951',
provider: 'vimeo',
},
],
};
```
@ -566,7 +637,7 @@ property. Here's an example:
```javascript
player.on('ready', event => {
const instance = event.detail.plyr;
const instance = event.detail.plyr;
});
```
@ -625,8 +696,8 @@ YouTube and Vimeo are currently supported and function much like a HTML5 video.
to access the API's directly. You can do so via the `embed` property of your player object - e.g. `player.embed`. You can then use the relevant methods from the
third party APIs. More info on the respective API's here:
- [YouTube iframe API Reference](https://developers.google.com/youtube/iframe_api_reference)
- [Vimeo player.js Reference](https://github.com/vimeo/player.js)
- [YouTube iframe API Reference](https://developers.google.com/youtube/iframe_api_reference)
- [Vimeo player.js Reference](https://github.com/vimeo/player.js)
_Note_: Not all API methods may work 100%. Your mileage may vary. It's better to use the Plyr API where possible.
@ -692,9 +763,9 @@ const supported = Plyr.supported('video', 'html5', true);
The arguments are:
- Media type (`audio` or `video`)
- Provider (`html5`, `youtube` or `vimeo`)
- Whether the player has the `playsinline` attribute (only applicable to iOS 10+)
- Media type (`audio` or `video`)
- Provider (`html5`, `youtube` or `vimeo`)
- Whether the player has the `playsinline` attribute (only applicable to iOS 10+)
## Disable support programmatically
@ -702,7 +773,7 @@ The `enabled` option can be used to disable certain User Agents. For example, if
```javascript
{
enabled: /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent);
enabled: /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent);
}
```
@ -735,42 +806,42 @@ Plyr is developed by [@sam_potts](https://twitter.com/sam_potts) / [sampotts.me]
Plyr costs money to run, not only my time. I donate my time for free as I enjoy building Plyr but unfortunately have to pay for domains, hosting, and more. Any help with costs is appreciated...
- [Donate via Patreon](https://www.patreon.com/plyr)
- [Donate via PayPal](https://www.paypal.me/pottsy/20usd)
- [Donate via Patreon](https://www.patreon.com/plyr)
- [Donate via PayPal](https://www.paypal.me/pottsy/20usd)
# Mentions
- [ProductHunt](https://www.producthunt.com/tech/plyr)
- [The Changelog](http://thechangelog.com/plyr-simple-html5-media-player-custom-controls-webvtt-captions/)
- [HTML5 Weekly #177](http://html5weekly.com/issues/177)
- [Responsive Design #149](http://us4.campaign-archive2.com/?u=559bc631fe5294fc66f5f7f89&id=451a61490f)
- [Web Design Weekly #174](https://web-design-weekly.com/2015/02/24/web-design-weekly-174/)
- [Front End Focus #177](https://frontendfoc.us/issues/177)
- [Hacker News](https://news.ycombinator.com/item?id=9136774)
- [Web Platform Daily](http://webplatformdaily.org/releases/2015-03-04)
- [LayerVault Designer News](https://news.layervault.com/stories/45394-plyr--a-simple-html5-media-player)
- [The Treehouse Show #131](https://teamtreehouse.com/library/episode-131-origami-react-responsive-hero-images)
- [noupe.com](http://www.noupe.com/design/html5-plyr-is-a-responsive-and-accessible-video-player-94389.html)
- [ProductHunt](https://www.producthunt.com/tech/plyr)
- [The Changelog](http://thechangelog.com/plyr-simple-html5-media-player-custom-controls-webvtt-captions/)
- [HTML5 Weekly #177](http://html5weekly.com/issues/177)
- [Responsive Design #149](http://us4.campaign-archive2.com/?u=559bc631fe5294fc66f5f7f89&id=451a61490f)
- [Web Design Weekly #174](https://web-design-weekly.com/2015/02/24/web-design-weekly-174/)
- [Front End Focus #177](https://frontendfoc.us/issues/177)
- [Hacker News](https://news.ycombinator.com/item?id=9136774)
- [Web Platform Daily](http://webplatformdaily.org/releases/2015-03-04)
- [LayerVault Designer News](https://news.layervault.com/stories/45394-plyr--a-simple-html5-media-player)
- [The Treehouse Show #131](https://teamtreehouse.com/library/episode-131-origami-react-responsive-hero-images)
- [noupe.com](http://www.noupe.com/design/html5-plyr-is-a-responsive-and-accessible-video-player-94389.html)
# Used by
- [Selz.com](https://selz.com)
- [Peugeot.fr](http://www.peugeot.fr/marque-et-technologie/technologies/peugeot-i-cockpit.html)
- [Peugeot.de](http://www.peugeot.de/modelle/modellberater/208-3-turer/fotos-videos.html)
- [TomTom.com](http://prioritydriving.tomtom.com/)
- [DIGBMX](http://digbmx.com/)
- [Grime Archive](https://grimearchive.com/)
- [koel - A personal music streaming server that works.](http://koel.phanan.net/)
- [Oscar Radio](http://oscar-radio.xyz/)
- [Sparkk TV](https://www.sparkktv.com/)
- [@halfhalftravel](https://www.halfhalftravel.com/)
- [Selz.com](https://selz.com)
- [Peugeot.fr](http://www.peugeot.fr/marque-et-technologie/technologies/peugeot-i-cockpit.html)
- [Peugeot.de](http://www.peugeot.de/modelle/modellberater/208-3-turer/fotos-videos.html)
- [TomTom.com](http://prioritydriving.tomtom.com/)
- [DIGBMX](http://digbmx.com/)
- [Grime Archive](https://grimearchive.com/)
- [koel - A personal music streaming server that works.](http://koel.phanan.net/)
- [Oscar Radio](http://oscar-radio.xyz/)
- [Sparkk TV](https://www.sparkktv.com/)
- [@halfhalftravel](https://www.halfhalftravel.com/)
If you want to be added to the list, open a pull request. It'd be awesome to see how you're using Plyr 😎
# Useful links and credits
- [PayPal's Accessible HTML5 Video Player (which Plyr was originally ported from)](https://github.com/paypal/accessible-html5-video-player)
- [An awesome guide for Plyr in Japanese!](http://syncer.jp/how-to-use-plyr-io) by [@arayutw](https://twitter.com/arayutw)
- [PayPal's Accessible HTML5 Video Player (which Plyr was originally ported from)](https://github.com/paypal/accessible-html5-video-player)
- [An awesome guide for Plyr in Japanese!](http://syncer.jp/how-to-use-plyr-io) by [@arayutw](https://twitter.com/arayutw)
# Thanks

2
src/sass/components/badges.scss
View File

@ -5,7 +5,7 @@
.plyr__badge {
background: $plyr-badge-background;
border-radius: $plyr-badge-border-radius;
color: $plyr-badge-color;
color: $plyr-badge-text-color;
font-size: $plyr-font-size-badge;
line-height: 1;
padding: 3px 4px;

30
src/sass/components/captions.scss
View File

@ -19,21 +19,6 @@
transition: transform 0.4s ease-in-out;
width: 100%;
.plyr__caption {
background: $plyr-captions-background;
border-radius: 2px;
box-decoration-break: clone;
color: $plyr-captions-text-color;
line-height: 185%;
padding: 0.2em 0.5em;
white-space: pre-wrap;
// Firefox adds a <div> when using getCueAsHTML()
div {
display: inline;
}
}
span:empty {
display: none;
}
@ -56,3 +41,18 @@
.plyr:not(.plyr--hide-controls) .plyr__controls:not(:empty) ~ .plyr__captions {
transform: translateY(calc(#{$plyr-control-spacing} * -4));
}
.plyr__caption {
background: $plyr-captions-background;
border-radius: 2px;
box-decoration-break: clone;
color: $plyr-captions-text-color;
line-height: 185%;
padding: 0.2em 0.5em;
white-space: pre-wrap;
// Firefox adds a <div> when using getCueAsHTML()
div {
display: inline;
}
}

18
src/sass/components/menus.scss
View File

@ -44,12 +44,12 @@
// Arrow
&::after {
border: 4px solid transparent;
border: $plyr-menu-arrow-size solid transparent;
border-top-color: $plyr-menu-background;
content: '';
height: 0;
position: absolute;
right: 15px;
right: calc(((#{$plyr-control-icon-size} / 2) + #{$plyr-control-padding}) - (#{$plyr-menu-arrow-size} / 2));
top: 100%;
width: 0;
}
@ -87,7 +87,7 @@
}
&::after {
border: 4px solid transparent;
border: $plyr-menu-item-arrow-size solid transparent;
content: '';
position: absolute;
top: 50%;
@ -98,8 +98,8 @@
padding-right: calc(#{$plyr-control-padding} * 4);
&::after {
border-left-color: $plyr-menu-arrow-color;
right: 5px;
border-left-color: $plyr-menu-item-arrow-color;
right: calc((#{$plyr-control-padding} * 1.5) - #{$plyr-menu-item-arrow-size});
}
&.plyr__tab-focus::after,
@ -117,13 +117,13 @@
width: calc(100% - (#{$plyr-control-padding} * 2));
&::after {
border-right-color: $plyr-menu-arrow-color;
left: $plyr-control-padding;
border-right-color: $plyr-menu-item-arrow-color;
left: calc((#{$plyr-control-padding} * 1.5) - #{$plyr-menu-item-arrow-size});
}
&::before {
background: $plyr-menu-border-color;
box-shadow: 0 1px 0 $plyr-menu-border-shadow-color;
background: $plyr-menu-back-border-color;
box-shadow: 0 1px 0 $plyr-menu-back-border-shadow-color;
content: '';
height: 1px;
left: 0;

4
src/sass/components/sliders.scss
View File

@ -8,10 +8,10 @@
background: transparent;
border: 0;
border-radius: calc(#{$plyr-range-thumb-height} * 2);
// color is used in JS to populate lower fill for WebKit
// `color` property is used in JS to populate lower fill for WebKit
color: $plyr-range-fill-background;
display: block;
height: $plyr-range-max-height;
height: calc((#{$plyr-range-thumb-active-shadow-width} * 2) + #{$plyr-range-thumb-height});
margin: 0;
padding: 0;
transition: box-shadow 0.3s ease;

7
src/sass/lib/mixins.scss
View File

@ -4,7 +4,7 @@
// Nicer focus styles
// ---------------------------------------
@mixin plyr-tab-focus($color: $plyr-tab-focus-default-color) {
@mixin plyr-tab-focus($color: $plyr-tab-focus-color) {
outline-color: $color;
outline-offset: 2px;
outline-style: dotted;
@ -17,9 +17,6 @@
@if $mode {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
} @else {
-moz-osx-font-smoothing: auto;
-webkit-font-smoothing: subpixel-antialiased;
}
}
@ -45,7 +42,7 @@
width: $plyr-range-thumb-height;
}
@mixin plyr-range-thumb-active($color: $plyr-range-thumb-active-shadow-color) {
@mixin plyr-range-thumb-active($color) {
box-shadow: $plyr-range-thumb-shadow, 0 0 0 $plyr-range-thumb-active-shadow-width $color;
}

5
src/sass/plugins/preview-thumbnails/index.scss
View File

@ -2,7 +2,7 @@
// Preview Thumbnails
// --------------------------------------------------------------
@import './settings.scss';
@import './settings';
.plyr__preview-thumb {
background-color: $plyr-preview-background;
@ -68,7 +68,7 @@
span {
background-color: $plyr-preview-time-background;
border-radius: ($plyr-preview-radius - 1px);
border-radius: calc(#{$plyr-preview-radius} - 1px);
color: $plyr-preview-time-color;
font-size: $plyr-preview-time-font-size;
padding: $plyr-preview-time-padding;
@ -84,6 +84,7 @@
margin: auto; // Required when video is different dimensions to container (e.g. fullscreen)
opacity: 0;
overflow: hidden;
pointer-events: none;
position: absolute;
right: 0;
top: 0;

2
src/sass/settings/badges.scss
View File

@ -3,5 +3,5 @@
// ==========================================================================
$plyr-badge-background: var(--plyr-badge-background, $plyr-color-gray-700) !default;
$plyr-badge-color: var(--plyr-badge-color, #fff) !default;
$plyr-badge-text-color: var(--plyr-badge-text-color, #fff) !default;
$plyr-badge-border-radius: var(--plyr-badge-border-radius, 2px) !default;

8
src/sass/settings/captions.scss
View File

@ -5,7 +5,7 @@
$plyr-captions-background: var(--plyr-captions-background, rgba(#000, 0.8)) !default;
$plyr-captions-text-color: var(--plyr-captions-text-color, #fff) !default;
$plyr-font-size-captions-base: var(--plyr-font-size-captions-base, $plyr-font-size-base) !default;
$plyr-font-size-captions-small: var(--plyr-font-size-captions-small, $plyr-font-size-small) !default;
$plyr-font-size-captions-medium: var(--plyr-font-size-captions-medium, $plyr-font-size-large) !default;
$plyr-font-size-captions-large: var(--plyr-font-size-captions-large, $plyr-font-size-xlarge) !default;
$plyr-font-size-captions-base: $plyr-font-size-base !default;
$plyr-font-size-captions-small: $plyr-font-size-small !default;
$plyr-font-size-captions-medium: $plyr-font-size-large !default;
$plyr-font-size-captions-large: $plyr-font-size-xlarge !default;

2
src/sass/settings/cosmetics.scss
View File

@ -2,4 +2,4 @@
// Cosmetic
// ==========================================================================
$plyr-tab-focus-default-color: var(--plyr-tab-focus-default-color, var(--plyr-color-main, $plyr-color-main)) !default;
$plyr-tab-focus-color: var(--plyr-tab-focus-color, var(--plyr-color-main, $plyr-color-main)) !default;

14
src/sass/settings/menus.scss
View File

@ -3,13 +3,13 @@
// ==========================================================================
$plyr-menu-background: var(--plyr-menu-background, rgba(#fff, 0.9)) !default;
$plyr-menu-radius: var(--plyr-menu-radius, 4px) !default;
$plyr-menu-color: var(--plyr-menu-color, $plyr-color-gray-700) !default;
$plyr-menu-shadow: var(--plyr-menu-shadow, 0 1px 2px rgba(#000, 0.15)) !default;
$plyr-menu-arrow-size: var(--plyr-menu-arrow-size, 4px) !default;
$plyr-menu-shadow: var(--plyr-menu-shadow, 0 1px 2px rgba($plyr-color-gray-900, 0.15)) !default;
$plyr-menu-item-arrow-size: var(--plyr-menu-item-arrow-size, 4px) !default;
$plyr-menu-item-arrow-color: var(--plyr-menu-arrow-color, $plyr-color-gray-500) !default;
$plyr-menu-arrow-size: var(--plyr-menu-arrow-size, 6px) !default;
$plyr-menu-arrow-color: var(--plyr-menu-arrow-color, $plyr-color-gray-500) !default;
// Border seperators
$plyr-menu-border-color: var(--plyr-menu-border-color, $plyr-color-gray-100) !default;
$plyr-menu-border-shadow-color: var(--plyr-menu-border-shadow-color, #fff) !default;
$plyr-menu-back-border-color: var(--plyr-menu-back-border-color, $plyr-color-gray-100) !default;
$plyr-menu-back-border-shadow-color: var(--plyr-menu-back-border-shadow-color, #fff) !default;

2
src/sass/settings/progress.scss
View File

@ -10,5 +10,5 @@ $plyr-progress-loading-background: var(--plyr-progress-loading-background, rgba(
$plyr-video-progress-buffered-background: var(--plyr-video-progress-buffered-background, rgba(#fff, 0.25)) !default;
$plyr-audio-progress-buffered-background: var(
--plyr-audio-progress-buffered-background,
rgba($plyr-color-gray-200, 0.66)
rgba($plyr-color-gray-200, 0.6)
) !default;

15
src/sass/settings/sliders.scss
View File

@ -5,7 +5,6 @@
// Thumb
$plyr-range-thumb-height: var(--plyr-range-thumb-height, 13px) !default;
$plyr-range-thumb-background: var(--plyr-range-thumb-background, #fff) !default;
$plyr-range-thumb-border: var(--plyr-range-thumb-border, 2px solid transparent) !default;
$plyr-range-thumb-shadow: var(
--plyr-range-thumb-shadow,
0 1px 1px rgba($plyr-color-gray-900, 0.15),
@ -13,15 +12,10 @@ $plyr-range-thumb-shadow: var(
) !default;
// Active state
$plyr-range-thumb-active-shadow-color: var(--plyr-range-thumb-active-shadow-color, rgba(#fff, 0.5));
$plyr-range-thumb-active-shadow-width: var(--plyr-range-thumb-active-shadow-width, 3px) !default;
// Track
$plyr-range-track-height: var(--plyr-range-track-height, 5px) !default;
$plyr-range-max-height: var(
--plyr-range-max-height,
calc((#{$plyr-range-thumb-active-shadow-width} * 2) + #{$plyr-range-thumb-height})
) !default;
// Fill
$plyr-range-fill-background: var(--plyr-range-fill-background, var(--plyr-color-main, $plyr-color-main)) !default;
@ -31,11 +25,16 @@ $plyr-video-range-track-background: var(
--plyr-video-range-track-background,
$plyr-video-progress-buffered-background
) !default;
$plyr-video-range-thumb-active-shadow-color: var(
--plyr-audio-range-thumb-active-shadow-color,
rgba(#fff, 0.5)
) !default;
$plyr-audio-range-track-background: var(
--plyr-audio-range-track-background,
$plyr-audio-progress-buffered-background
) !default;
$plyr-audio-range-thumb-shadow-color: var(
--plyr-audio-range-thumb-shadow-color,
$plyr-audio-range-thumb-active-shadow-color: var(
--plyr-audio-range-thumb-active-shadow-color,
rgba($plyr-color-gray-900, 0.1)
) !default;

2
src/sass/settings/tooltips.scss
View File

@ -7,4 +7,4 @@ $plyr-tooltip-color: var(--plyr-tooltip-color, $plyr-color-gray-700) !default;
$plyr-tooltip-padding: var(--plyr-tooltip-padding, calc(#{$plyr-control-spacing} / 2)) !default;
$plyr-tooltip-arrow-size: var(--plyr-tooltip-arrow-size, 4px) !default;
$plyr-tooltip-radius: var(--plyr-tooltip-radius, 3px) !default;
$plyr-tooltip-shadow: var(--plyr-tooltip-shadow, 0 1px 2px rgba($plyr-color-gray-900, 0.15)) !default;
$plyr-tooltip-shadow: var(--plyr-tooltip-shadow, 0 1px 2px rgba(0, 0, 0, 0.15)) !default;

7
src/sass/settings/type.scss
View File

@ -2,20 +2,19 @@
// Typography
// ==========================================================================
$plyr-font-family: var(--plyr-font-family) !default;
$plyr-font-family: var(--plyr-font-family, inherit) !default;
$plyr-font-size-base: var(--plyr-font-size-base, 15px) !default;
$plyr-font-size-small: var(--plyr-font-size-small, 13px) !default;
$plyr-font-size-large: var(--plyr-font-size-large, 18px) !default;
$plyr-font-size-xlarge: var(--plyr-font-size-xlarge, 21px) !default;
$plyr-font-size-time: var(--plyr-font-size-time, $plyr-font-size-small) !default;
$plyr-font-size-menu: var(--plyr-font-size-time, $plyr-font-size-small) !default;
$plyr-font-size-badge: var(--plyr-font-size-badge, 9px) !default;
$plyr-font-size-menu: var(--plyr-font-size-menu, $plyr-font-size-small) !default;
$plyr-font-size-badge: var(--plyr-font-size-badge, 9px) !default;
$plyr-font-weight-regular: var(--plyr-font-weight-regular, 400) !default;
$plyr-font-weight-bold: var(--plyr-font-weight-bold, 600) !default;
$plyr-line-height: var(--plyr-line-height, 1.7) !default;
$plyr-font-smoothing: false !default;
$plyr-font-smoothing: var(--plyr-font-smoothing, false) !default;

6
src/sass/types/audio.scss
View File

@ -42,15 +42,15 @@
// Pressed styles
&:active {
&::-webkit-slider-thumb {
@include plyr-range-thumb-active($plyr-audio-range-thumb-shadow-color);
@include plyr-range-thumb-active($plyr-audio-range-thumb-active-shadow-color);
}
&::-moz-range-thumb {
@include plyr-range-thumb-active($plyr-audio-range-thumb-shadow-color);
@include plyr-range-thumb-active($plyr-audio-range-thumb-active-shadow-color);
}
&::-ms-thumb {
@include plyr-range-thumb-active($plyr-audio-range-thumb-shadow-color);
@include plyr-range-thumb-active($plyr-audio-range-thumb-active-shadow-color);
}
}
}

6
src/sass/types/video.scss
View File

@ -144,15 +144,15 @@ $embed-padding: ((100 / 16) * 9);
// Pressed styles
&:active {
&::-webkit-slider-thumb {
@include plyr-range-thumb-active();
@include plyr-range-thumb-active($plyr-video-range-thumb-active-shadow-color);
}
&::-moz-range-thumb {
@include plyr-range-thumb-active();
@include plyr-range-thumb-active($plyr-video-range-thumb-active-shadow-color);
}
&::-ms-thumb {
@include plyr-range-thumb-active();
@include plyr-range-thumb-active($plyr-video-range-thumb-active-shadow-color);
}
}
}