Compare commits

..

4 Commits

Author SHA1 Message Date
b9177e7892 Minor bug fix for clicking video to play/pause after source change 2016-01-19 11:36:30 +11:00
fd12247a62 Fix for video click 2016-01-19 11:34:04 +11:00
20a71300a5 Controls 2016-01-19 09:54:23 +11:00
70c5b24678 Added reference 2016-01-19 09:35:10 +11:00
6 changed files with 62 additions and 56 deletions

View File

@ -1,5 +1,11 @@
# Changelog # Changelog
## v1.5.4
- Minor bug fix for clicking video to play/pause after source change
## v1.5.3
- Minor bug fix for occasional display of 0:00 as the media duration
## v1.5.2 ## v1.5.2
- `handlers` option renamed to `listeners` - `handlers` option renamed to `listeners`
- Added event listeners for all types to the plyr container (playback, fullscreen, captions etc - see docs) - Added event listeners for all types to the plyr container (playback, fullscreen, captions etc - see docs)

View File

@ -46,64 +46,64 @@ You can include only the controls you need when specifying custom html.
This is an example `html` option with all controls. This is an example `html` option with all controls.
```javascript ```javascript
["<div class='player-controls'>", ["<div class='plyr__controls'>",
"<div class='player-progress'>", "<div class='plyr__progress'>",
"<label for='seek{id}' class='sr-only'>Seek</label>", "<label for='seek{id}' class='plyr__sr-only'>Seek</label>",
"<input id='seek{id}' class='player-progress-seek' type='range' min='0' max='100' step='0.5' value='0' data-player='seek'>", "<input id='seek{id}' class='plyr__progress--seek' type='range' min='0' max='100' step='0.5' value='0' data-plyr='seek'>",
"<progress class='player-progress-played' max='100' value='0'>", "<progress class='plyr__progress--played' max='100' value='0'>",
"<span>0</span>% played", "<span>0</span>% played",
"</progress>", "</progress>",
"<progress class='player-progress-buffer' max='100' value='0'>", "<progress class='plyr__progress--buffer' max='100' value='0'>",
"<span>0</span>% buffered", "<span>0</span>% buffered",
"</progress>", "</progress>",
"</div>", "</div>",
"<span class='player-controls-left'>", "<span class='plyr__controls--left'>",
"<button type='button' data-player='restart'>", "<button type='button' data-plyr='restart'>",
"<svg><use xlink:href='#icon-restart'></use></svg>", "<svg><use xlink:href='#icon-restart'></use></svg>",
"<span class='sr-only'>Restart</span>", "<span class='plyr__sr-only'>Restart</span>",
"</button>", "</button>",
"<button type='button' data-player='rewind'>", "<button type='button' data-plyr='rewind'>",
"<svg><use xlink:href='#icon-rewind'></use></svg>", "<svg><use xlink:href='#icon-rewind'></use></svg>",
"<span class='sr-only'>Rewind {seektime} secs</span>", "<span class='plyr__sr-only'>Rewind {seektime} secs</span>",
"</button>", "</button>",
"<button type='button' data-player='play'>", "<button type='button' data-plyr='play'>",
"<svg><use xlink:href='#icon-play'></use></svg>", "<svg><use xlink:href='#icon-play'></use></svg>",
"<span class='sr-only'>Play</span>", "<span class='plyr__sr-only'>Play</span>",
"</button>", "</button>",
"<button type='button' data-player='pause'>", "<button type='button' data-plyr='pause'>",
"<svg><use xlink:href='#icon-pause'></use></svg>", "<svg><use xlink:href='#icon-pause'></use></svg>",
"<span class='sr-only'>Pause</span>", "<span class='plyr__sr-only'>Pause</span>",
"</button>", "</button>",
"<button type='button' data-player='fast-forward'>", "<button type='button' data-plyr='fast-forward'>",
"<svg><use xlink:href='#icon-fast-forward'></use></svg>", "<svg><use xlink:href='#icon-fast-forward'></use></svg>",
"<span class='sr-only'>Forward {seektime} secs</span>", "<span class='plyr__sr-only'>Forward {seektime} secs</span>",
"</button>", "</button>",
"<span class='player-time'>", "<span class='plyr__time'>",
"<span class='sr-only'>Current time</span>", "<span class='sr-only'>Current time</span>",
"<span class='player-current-time'>00:00</span>", "<span class='plyr__current-time'>00:00</span>",
"</span>", "</span>",
"<span class='player-time'>", "<span class='plyr__time'>",
"<span class='sr-only'>Duration</span>", "<span class='sr-only'>Duration</span>",
"<span class='player-duration'>00:00</span>", "<span class='plyr__duration'>00:00</span>",
"</span>", "</span>",
"</span>", "</span>",
"<span class='player-controls-right'>", "<span class='plyr__controls--right'>",
"<button type='button' data-player='mute'>", "<button type='button' data-plyr='mute'>",
"<svg class='icon-muted'><use xlink:href='#icon-muted'></use></svg>", "<svg class='icon-muted'><use xlink:href='#icon-muted'></use></svg>",
"<svg><use xlink:href='#icon-volume'></use></svg>", "<svg><use xlink:href='#icon-volume'></use></svg>",
"<span class='sr-only'>Toggle Mute</span>", "<span class='plyr__sr-only'>Toggle Mute</span>",
"</button>", "</button>",
"<label for='volume{id}' class='sr-only'>Volume</label>", "<label for='volume{id}' class='plyr__sr-only'>Volume</label>",
"<input id='volume{id}' class='player-volume' type='range' min='0' max='10' value='5' data-player='volume'>", "<input id='volume{id}' class='plyr__volume' type='range' min='0' max='10' value='5' data-plyr='volume'>",
"<button type='button' data-player='captions'>", "<button type='button' data-plyr='captions'>",
"<svg class='icon-captions-on'><use xlink:href='#icon-captions-on'></use></svg>", "<svg class='icon--captions-on'><use xlink:href='#icon-captions-on'></use></svg>",
"<svg><use xlink:href='#icon-captions-off'></use></svg>", "<svg><use xlink:href='#icon-captions-off'></use></svg>",
"<span class='sr-only'>Toggle Captions</span>", "<span class='plyr__sr-only'>Toggle Captions</span>",
"</button>", "</button>",
"<button type='button' data-player='fullscreen'>", "<button type='button' data-plyr='fullscreen'>",
"<svg class='icon-exit-fullscreen'><use xlink:href='#icon-exit-fullscreen'></use></svg>", "<svg class='icon--exit-fullscreen'><use xlink:href='#icon-exit-fullscreen'></use></svg>",
"<svg><use xlink:href='#icon-enter-fullscreen'></use></svg>", "<svg><use xlink:href='#icon-enter-fullscreen'></use></svg>",
"<span class='sr-only'>Toggle Fullscreen</span>", "<span class='plyr__sr-only'>Toggle Fullscreen</span>",
"</button>", "</button>",
"</span>", "</span>",
"</div>"].join("\n"); "</div>"].join("\n");

2
dist/plyr.js vendored

File diff suppressed because one or more lines are too long

View File

@ -1,6 +1,6 @@
{ {
"name": "plyr", "name": "plyr",
"version": "1.5.3", "version": "1.5.4",
"description": "A simple HTML5 media player using custom controls", "description": "A simple HTML5 media player using custom controls",
"homepage": "http://plyr.io", "homepage": "http://plyr.io",
"main": "gulpfile.js", "main": "gulpfile.js",

View File

@ -40,7 +40,7 @@ If you have any cool ideas or features, please let me know by [creating an issue
Check `docs/index.html` and `docs/dist/docs.js` for an example setup. Check `docs/index.html` and `docs/dist/docs.js` for an example setup.
**Heads up:** the example `index.html` file needs to be served from a webserver (such as Apache, Nginx, IIS or similar) unless you change the file sources to include http or https. e.g. change `//cdn.plyr.io/1.5.3/plyr.js` to `https://cdn.plyr.io/1.5.3/plyr.js` **Heads up:** the example `index.html` file needs to be served from a webserver (such as Apache, Nginx, IIS or similar) unless you change the file sources to include http or https. e.g. change `//cdn.plyr.io/1.5.4/plyr.js` to `https://cdn.plyr.io/1.5.4/plyr.js`
### Bower ### Bower
If bower is your thang, you can grab Plyr using: If bower is your thang, you can grab Plyr using:
@ -60,11 +60,11 @@ More info is on [npm](https://www.npmjs.com/package/ember-cli-plyr) and [GitHub]
If you want to use our CDN, you can use the following: If you want to use our CDN, you can use the following:
```html ```html
<link rel="stylesheet" href="https://cdn.plyr.io/1.5.3/plyr.css"> <link rel="stylesheet" href="https://cdn.plyr.io/1.5.4/plyr.css">
<script src="https://cdn.plyr.io/1.5.3/plyr.js"></script> <script src="https://cdn.plyr.io/1.5.4/plyr.js"></script>
``` ```
You can also access the `sprite.svg` file at `https://cdn.plyr.io/1.5.3/sprite.svg`. You can also access the `sprite.svg` file at `https://cdn.plyr.io/1.5.4/sprite.svg`.
### CSS & Styling ### CSS & Styling
If you want to use the default css, add the `plyr.css` file from `/dist` into your head, or even better use `plyr.less` or `plyr.sass` file included in `/src` in your build to save a request. If you want to use the default css, add the `plyr.css` file from `/dist` into your head, or even better use `plyr.less` or `plyr.sass` file included in `/src` in your build to save a request.
@ -162,7 +162,7 @@ More info on CORS here:
Here's an example of a default setup: Here's an example of a default setup:
```html ```html
<script src="https://cdn.plyr.io/1.5.3/plyr.js"></script> <script src="https://cdn.plyr.io/1.5.4/plyr.js"></script>
<script>plyr.setup();</script> <script>plyr.setup();</script>
``` ```

View File

@ -2320,22 +2320,6 @@
// Captions // Captions
_on(plyr.buttons.captions, 'click', _toggleCaptions); _on(plyr.buttons.captions, 'click', _toggleCaptions);
// Click video
if (plyr.type === 'video' && config.click) {
_on(plyr.videoContainer, 'click', function() {
if (plyr.media.paused) {
_play();
}
else if (plyr.media.ended) {
_seek();
_play();
}
else {
_pause();
}
});
}
} }
// Listen for media events // Listen for media events
@ -2372,6 +2356,22 @@
// Loading // Loading
_on(plyr.media, 'waiting canplay seeked', _checkLoading); _on(plyr.media, 'waiting canplay seeked', _checkLoading);
// Click video
if (plyr.type === 'video' && config.click) {
_on(plyr.videoContainer, 'click', function() {
if (plyr.media.paused) {
_play();
}
else if (plyr.media.ended) {
_seek();
_play();
}
else {
_pause();
}
});
}
// Proxy events to container // Proxy events to container
_on(plyr.media, config.events.join(' '), function(event) { _on(plyr.media, config.events.join(' '), function(event) {
_triggerEvent(plyr.container, event.type); _triggerEvent(plyr.container, event.type);
@ -2680,7 +2680,7 @@
})); }));
// Custom event polyfill // Custom event polyfill
// // https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent
(function () { (function () {
function CustomEvent (event, params) { function CustomEvent (event, params) {
params = params || { bubbles: false, cancelable: false, detail: undefined }; params = params || { bubbles: false, cancelable: false, detail: undefined };