Compare commits

...

8 Commits

Author SHA1 Message Date
eee699cec6 Version bump 2016-07-10 20:59:42 +10:00
3c9e9862d8 Added getCurrentTime API method (fixes #292) 2016-07-10 20:58:19 +10:00
39dc651a9d Fix for !hideControls on touch devices (fixes #303) 2016-07-10 20:50:55 +10:00
4effda125a Merge branch 'master' of https://github.com/Selz/plyr 2016-07-10 20:45:58 +10:00
bf9de231d8 Styling minor tweaks 2016-07-10 20:45:54 +10:00
ef12332505 Update readme.md 2016-06-29 16:23:38 +10:00
1b735f1727 Update readme.md 2016-06-26 22:21:19 +10:00
7f7ecf852e Line height fix 2016-06-26 09:07:42 +10:00
13 changed files with 174 additions and 167 deletions

View File

@ -1,5 +1,12 @@
# Changelog # Changelog
## v1.8.8
- Added getCurrentTime API method (fixes #292)
- Fix for !hideControls on touch devices (fixes #303)
## v1.8.7
- Line height fix
## v1.8.6 ## v1.8.6
- Reverted font size change - Reverted font size change

2
demo/dist/demo.css vendored

File diff suppressed because one or more lines are too long

View File

@ -21,7 +21,7 @@ video {
.plyr--audio { .plyr--audio {
max-width: @example-width-audio; max-width: @example-width-audio;
} }
.plyr--video::after { .plyr__video-wrapper::after {
content: ""; content: "";
pointer-events: none; pointer-events: none;
position: absolute; position: absolute;

2
dist/plyr.css vendored

File diff suppressed because one or more lines are too long

4
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.8.6", "version": "1.8.8",
"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",

View File

@ -41,13 +41,11 @@ If you have any cool ideas or features, please let me know by [creating an issue
## CMS plugins ## CMS plugins
### [WordPress](https://wordpress.org) ### [WordPress](https://wordpress.org/plugins/plyr/)
Created and maintained by Ryan Anthony Drake ([@iamryandrake](https://github.com/iamryandrake)) Created and maintained by Ryan Anthony Drake ([@iamryandrake](https://github.com/iamryandrake))
[Plyr on WordPress](https://wordpress.org/plugins/plyr/)
### [Neos](https://www.neos.io/) ### [Neos](https://packagist.org/packages/jonnitto/plyr)
Created and maintained by Jon Uhlmann ([@jonnitto](https://github.com/jonnitto)) Created and maintained by Jon Uhlmann ([@jonnitto](https://github.com/jonnitto))
[Plyr.io for Neos.io](https://packagist.org/packages/jonnitto/plyr)
## Using package managers ## Using package managers
You can grab the source using one of the following package managers. You can grab the source using one of the following package managers.
@ -120,7 +118,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/1.8.6/plyr.js"></script> <script src="https://cdn.plyr.io/1.8.8/plyr.js"></script>
``` ```
### CSS ### CSS
@ -133,16 +131,18 @@ 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/1.8.6/plyr.css"> <link rel="stylesheet" href="https://cdn.plyr.io/1.8.8/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/1.8.6/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/1.8.8/plyr.svg`.
## Advanced ## Advanced
### LESS & SASS/SCSS ### LESS & SASS/SCSS
You can use `plyr.less` or `plyr.scss` file included in `/src` as part of your build and change variables to suit your design. The HTML markup uses the BEM methodology with `plyr` as the block, e.g. `.plyr__controls`. You can change the class hooks in the options to match any custom CSS you write. Check out the JavaScript source for more on this. You can use `plyr.less` or `plyr.scss` file included in `/src` as part of your build and change variables to suit your design. The LESS and SASS require you to use the [autoprefixer](https://www.npmjs.com/package/gulp-autoprefixer) plugin (you should already) as all declerations use the W3C definitions - e.g. `appearance: none;` will be prefixed to `-webkit-appearance: none;` by autoprefixer.
The HTML markup uses the BEM methodology with `plyr` as the block, e.g. `.plyr__controls`. You can change the class hooks in the options to match any custom CSS you write. Check out the JavaScript source for more on this.
### SVG ### SVG
The icons used in the Plyr controls are loaded in an SVG sprite. The sprite is automatically loaded from our CDN by default. If you already have an icon build system in place, you can include the source plyr icons (see `/src/sprite` for source icons). The icons used in the Plyr controls are loaded in an SVG sprite. The sprite is automatically loaded from our CDN by default. If you already have an icon build system in place, you can include the source plyr icons (see `/src/sprite` for source icons).
@ -535,6 +535,11 @@ Here's a list of the methods supported:
<td>&mdash;</td> <td>&mdash;</td>
<td>Reverses the effects of the <code>destroy()</code> method, restoring the UI and listeners.</td> <td>Reverses the effects of the <code>destroy()</code> method, restoring the UI and listeners.</td>
</tr> </tr>
<tr>
<td><code>getCurrentTime()</code></td>
<td>&mdash;</td>
<td>Will return a float with the current time in seconds.</td>
</tr>
</tbody> </tbody>
</table> </table>

View File

@ -1,6 +1,6 @@
// ========================================================================== // ==========================================================================
// Plyr // Plyr
// plyr.js v1.8.6 // plyr.js v1.8.8
// https://github.com/selz/plyr // https://github.com/selz/plyr
// License: The MIT License (MIT) // License: The MIT License (MIT)
// ========================================================================== // ==========================================================================
@ -44,7 +44,7 @@
displayDuration: true, displayDuration: true,
loadSprite: true, loadSprite: true,
iconPrefix: 'plyr', iconPrefix: 'plyr',
iconUrl: 'https://cdn.plyr.io/1.8.6/plyr.svg', iconUrl: 'https://cdn.plyr.io/1.8.8/plyr.svg',
clickToPlay: true, clickToPlay: true,
hideControls: true, hideControls: true,
showPosterOnEnd: false, showPosterOnEnd: false,
@ -2979,8 +2979,8 @@
// On click play, pause ore restart // On click play, pause ore restart
_on(wrapper, 'click', function() { _on(wrapper, 'click', function() {
// Touch devices will just show controls // Touch devices will just show controls (if we're hiding controls)
if (plyr.browser.isTouch && !plyr.media.paused) { if (config.hideControls && plyr.browser.isTouch && !plyr.media.paused) {
return; return;
} }
@ -3264,7 +3264,8 @@
isFullscreen: function() { return plyr.isFullscreen || false; }, isFullscreen: function() { return plyr.isFullscreen || false; },
support: function(mimeType) { return _supportMime(plyr, mimeType); }, support: function(mimeType) { return _supportMime(plyr, mimeType); },
destroy: _destroy, destroy: _destroy,
restore: _init restore: _init,
getCurrentTime: function() { return plyr.media.currentTime; }
}; };
} }

View File

@ -353,7 +353,6 @@
border-radius: inherit; border-radius: inherit;
background: @plyr-audio-controls-bg; background: @plyr-audio-controls-bg;
border: @plyr-audio-controls-border; border: @plyr-audio-controls-border;
box-shadow: @plyr-audio-controls-box-shadow;
color: @plyr-audio-control-color; color: @plyr-audio-control-color;
button { button {
@ -378,7 +377,7 @@
background: @plyr-video-control-bg-hover; background: @plyr-video-control-bg-hover;
border: 4px solid currentColor; border: 4px solid currentColor;
border-radius: 100%; border-radius: 100%;
box-shadow: 0 1px 1px fade(@plyr-video-controls-bg, 15%); box-shadow: 0 1px 1px fade(#000, 15%);
color: @plyr-video-control-color; color: @plyr-video-control-color;
transition: all .3s ease; transition: all .3s ease;
@ -663,7 +662,6 @@
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
font-size: @plyr-font-size-small; font-size: @plyr-font-size-small;
line-height: .95;
} }
// Media duration hidden on small screens // Media duration hidden on small screens
.plyr__time + .plyr__time { .plyr__time + .plyr__time {

View File

@ -33,7 +33,6 @@
@plyr-video-control-bg-hover: @plyr-color-main; @plyr-video-control-bg-hover: @plyr-color-main;
@plyr-audio-controls-bg: #fff; @plyr-audio-controls-bg: #fff;
@plyr-audio-controls-border: 1px solid #dbe3e8; @plyr-audio-controls-border: 1px solid #dbe3e8;
@plyr-audio-controls-box-shadow: 0 1px 1px fade(#000, 5%);
@plyr-audio-control-color: #565D64; @plyr-audio-control-color: #565D64;
@plyr-audio-control-color-hover: #fff; @plyr-audio-control-color-hover: #fff;
@plyr-audio-control-bg-hover: @plyr-color-main; @plyr-audio-control-bg-hover: @plyr-color-main;

View File

@ -353,7 +353,6 @@
border-radius: inherit; border-radius: inherit;
background: $plyr-audio-controls-bg; background: $plyr-audio-controls-bg;
border: $plyr-audio-controls-border; border: $plyr-audio-controls-border;
box-shadow: $plyr-audio-controls-box-shadow;
color: $plyr-audio-control-color; color: $plyr-audio-control-color;
button { button {
@ -378,7 +377,7 @@
background: $plyr-video-control-bg-hover; background: $plyr-video-control-bg-hover;
border: 4px solid currentColor; border: 4px solid currentColor;
border-radius: 100%; border-radius: 100%;
box-shadow: 0 1px 1px transparentize($plyr-video-controls-bg, .85); box-shadow: 0 1px 1px transparentize(#000, .85);
color: $plyr-video-control-color; color: $plyr-video-control-color;
transition: all .3s ease; transition: all .3s ease;
@ -662,7 +661,6 @@
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
font-size: $plyr-font-size-small; font-size: $plyr-font-size-small;
line-height: .95;
} }
// Media duration hidden on small screens // Media duration hidden on small screens
.plyr__time + .plyr__time { .plyr__time + .plyr__time {

View File

@ -34,7 +34,6 @@ $plyr-video-control-color-hover: #fff !default;
$plyr-video-control-bg-hover: $plyr-color-main !default; $plyr-video-control-bg-hover: $plyr-color-main !default;
$plyr-audio-controls-bg: #fff !default; $plyr-audio-controls-bg: #fff !default;
$plyr-audio-controls-border: 1px solid #dbe3e8 !default; $plyr-audio-controls-border: 1px solid #dbe3e8 !default;
$plyr-audio-controls-box-shadow: 0 1px 1px transparentize(#000, .95) !default;
$plyr-audio-control-color: #565D64 !default; $plyr-audio-control-color: #565D64 !default;
$plyr-audio-control-color-hover: #fff !default; $plyr-audio-control-color-hover: #fff !default;
$plyr-audio-control-bg-hover: $plyr-color-main; $plyr-audio-control-bg-hover: $plyr-color-main;