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

Global keyboard shortcut changes

Browse Source
This commit is contained in:
Sam Potts 2016-08-22 14:44:18 +10:00
parent df7f52d885
commit 12e94775d6
5 changed files with 15 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
changelog.md
View File

@ -1,5 +1,8 @@
# Changelog # Changelog
# v2.0.3
- Set 'global' keyboard shortcut option to false as default, added `<textarea>` to editable elements to be ignored.
# v2.0.2 # v2.0.2
- Added 'global' keyboard shortcut option - Added 'global' keyboard shortcut option

2
dist/plyr.js vendored
View File

File diff suppressed because one or more lines are too long

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "plyr", "name": "plyr",
"version": "2.0.2", "version": "2.0.3",
"description": "A simple, accessible and customizable HTML5, YouTube and Vimeo media player", "description": "A simple, accessible and customizable HTML5, YouTube and Vimeo media player",
"homepage": "http://plyr.io", "homepage": "http://plyr.io",
"main": "src/js/plyr.js", "main": "src/js/plyr.js",

12
readme.md
View File

@ -122,7 +122,7 @@ Include the `plyr.js` script before the closing `</body>` tag and then call `ply
If you want to use our CDN for the JavaScript, you can use the following: If you want to use our CDN for the JavaScript, you can use the following:
```html ```html
<script src="https://cdn.plyr.io/2.0.2/plyr.js"></script> <script src="https://cdn.plyr.io/2.0.3/plyr.js"></script>
``` ```
### CSS ### CSS
@ -135,11 +135,11 @@ Include the `plyr.css` stylsheet into your `<head>`
If you want to use our CDN for the default CSS, you can use the following: If you want to use our CDN for the default CSS, you can use the following:
```html ```html
<link rel="stylesheet" href="https://cdn.plyr.io/2.0.2/plyr.css"> <link rel="stylesheet" href="https://cdn.plyr.io/2.0.3/plyr.css">
``` ```
### SVG Sprite ### SVG Sprite
The SVG sprite is loaded automatically from our CDN. To change this, see the [options](#Options) below. For reference, the CDN hosted SVG sprite can be found at `https://cdn.plyr.io/2.0.2/plyr.svg`. The SVG sprite is loaded automatically from our CDN. To change this, see the [options](#Options) below. For reference, the CDN hosted SVG sprite can be found at `https://cdn.plyr.io/2.0.3/plyr.svg`.
## Advanced ## Advanced
@ -322,8 +322,8 @@ Note the single quotes encapsulating the JSON and double quotes on the object ke
<tr> <tr>
<td><code>keyboardShortcuts</code></td> <td><code>keyboardShortcuts</code></td>
<td>Object</td> <td>Object</td>
<td><code>{ focused: true, global: true }</code></td> <td><code>{ focused: true, global: false }</code></td>
<td>Enable <a href="#shortcuts">keyboard shortcuts</a> for focused players only or global as well (if there's only one player in the document)</td> <td>Enable <a href="#shortcuts">keyboard shortcuts</a> for focused players only or globally as well (this will only work if there's one player in the document)</td>
</tr> </tr>
<tr> <tr>
<td><code>tooltips</code></td> <td><code>tooltips</code></td>
@ -873,7 +873,7 @@ More info on the respective API's here:
*Please note*: not all API methods may work 100%. Your mileage may vary. It's better to use the universal plyr API where possible. *Please note*: not all API methods may work 100%. Your mileage may vary. It's better to use the universal plyr API where possible.
## Shortcuts ## Shortcuts
By default, a player will bind the following keyboard shortcuts when it has focus. If you have the `global` option to `true` and there's only one player in the document then the shortcuts will work when any element has focus, apart from an element that requires input (such as an `<input>`, `<select>` or `[contenteditable]`). By default, a player will bind the following keyboard shortcuts when it has focus. If you have the `global` option to `true` and there's only one player in the document then the shortcuts will work when any element has focus, apart from an element that requires input.
<table class="table" width="100%"> <table class="table" width="100%">
<thead> <thead>

8
src/js/plyr.js
View File

@ -1,6 +1,6 @@
// ========================================================================== // ==========================================================================
// Plyr // Plyr
// plyr.js v2.0.2 // plyr.js v2.0.3
// https://github.com/selz/plyr // https://github.com/selz/plyr
// License: The MIT License (MIT) // License: The MIT License (MIT)
// ========================================================================== // ==========================================================================
@ -43,14 +43,14 @@
displayDuration: true, displayDuration: true,
loadSprite: true, loadSprite: true,
iconPrefix: 'plyr', iconPrefix: 'plyr',
iconUrl: 'https://cdn.plyr.io/2.0.2/plyr.svg', iconUrl: 'https://cdn.plyr.io/2.0.3/plyr.svg',
clickToPlay: true, clickToPlay: true,
hideControls: true, hideControls: true,
showPosterOnEnd: false, showPosterOnEnd: false,
disableContextMenu: true, disableContextMenu: true,
keyboardShorcuts: { keyboardShorcuts: {
focused: true, focused: true,
global: true global: false
}, },
tooltips: { tooltips: {
controls: false, controls: false,
@ -59,7 +59,7 @@
selectors: { selectors: {
html5: 'video, audio', html5: 'video, audio',
embed: '[data-type]', embed: '[data-type]',
editable: 'input, select, [contenteditable]', editable: 'input, textarea, select, [contenteditable]',
container: '.plyr', container: '.plyr',
controls: { controls: {
container: null, container: null,