diff options
| -rw-r--r-- | changelog.md | 4 | ||||
| -rw-r--r-- | dist/plyr.css | 2 | ||||
| -rw-r--r-- | docs/error.html | 2 | ||||
| -rw-r--r-- | docs/index.html | 10 | ||||
| -rw-r--r-- | notes.md | 9 | ||||
| -rw-r--r-- | package.json | 2 | ||||
| -rw-r--r-- | readme.md | 8 | ||||
| -rw-r--r-- | src/js/plyr.js | 2 | ||||
| -rw-r--r-- | src/less/plyr.less | 2 | ||||
| -rw-r--r-- | src/sass/plyr.scss | 2 |
10 files changed, 17 insertions, 26 deletions
diff --git a/changelog.md b/changelog.md index 73748a0f..9a41e68c 100644 --- a/changelog.md +++ b/changelog.md @@ -1,5 +1,9 @@ # Changelog +## v1.0.21 +- Added an <input type="range"> for seeking to improve experience (and support dragging) +- Icons for restart and captions improved (and some IDs changed) + ## v1.0.20 - Default controls included (Fixes #45) - Volume changes on `input` as well as `change` (Fixes #43) diff --git a/dist/plyr.css b/dist/plyr.css index 83165cd6..d9ceea6d 100644 --- a/dist/plyr.css +++ b/dist/plyr.css @@ -1 +1 @@ -.sr-only{position:absolute!important;clip:rect(1px,1px,1px,1px);padding:0!important;border:0!important;height:1px!important;width:1px!important;overflow:hidden}.player{position:relative;max-width:100%;min-width:290px;overflow:hidden}.player,.player *,.player ::after,.player ::before{box-sizing:border-box}.player-video-wrapper{position:relative}.player video{width:100%;height:auto;vertical-align:middle}.player-captions{display:none;position:absolute;bottom:0;left:0;width:100%;padding:20px;min-height:2.5em;color:#fff;font-size:16px;font-weight:600;text-shadow:-1px -1px 0 #565d64,1px -1px 0 #565d64,-1px 1px 0 #565d64,1px 1px 0 #565d64;text-align:center;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}@media (min-width:768px){.player-captions{font-size:24px}}.player.captions-active .player-captions{display:block}.player-controls{zoom:1;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;position:relative;padding:20px 10px 10px;background:#343f4a;line-height:1;text-align:center}.player-controls:after,.player-controls:before{content:"";display:table}.player-controls:after{clear:both}.player-controls-sound{display:block;margin:10px auto 0}@media (min-width:560px){.player-controls-playback{float:left}.player-controls-sound{float:right;margin-top:0}}.player-controls button,.player-controls input+label{display:inline-block;vertical-align:middle;margin:0 2px;padding:5px 10px;transition:background .3s ease;border-radius:3px;cursor:pointer}.player-controls button svg,.player-controls input+label svg{width:18px;height:18px;display:block;fill:currentColor;transition:fill .3s ease}.player-controls .inverted:checked+label,.player-controls input+label{color:#565d64}.player-controls .inverted+label,.player-controls button,.player-controls input:checked+label{color:#cbd0d3}.player-controls button{border:0;background:0 0;overflow:hidden}.player-controls button:focus,.player-controls button:hover,.player-controls input+label:hover,.player-controls input:focus+label{background:#3498db;color:#fff}.player-controls button:focus,.player-controls input:focus+label{outline:0}.player-controls .icon-captions-on,.player-controls .icon-exit-fullscreen,.player-controls .icon-muted{display:none}.player-controls .player-time{display:inline-block;vertical-align:middle;margin-left:10px;color:#cbd0d3;font-weight:600;font-size:14px;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.player-progress{position:absolute;top:0;left:0;right:0;width:100%;height:10px;background:#6e777f}.player-progress-buffer[value],.player-progress-played[value],.player-progress-seek[type=range]{position:absolute;left:0;top:0;width:100%;height:10px;margin:0;padding:0;vertical-align:top;-webkit-appearance:none;-moz-appearance:none;border:none;background:0 0}.player-progress-buffer[value]::-webkit-progress-bar,.player-progress-played[value]::-webkit-progress-bar{background:0 0}.player-progress-buffer[value]::-webkit-progress-value,.player-progress-played[value]::-webkit-progress-value{background:currentColor;transition:width .1s ease}.player-progress-buffer[value]::-moz-progress-bar,.player-progress-played[value]::-moz-progress-bar{background:currentColor;transition:width .1s ease}.player-progress-played[value]{z-index:2;color:#3498db}.player-progress-buffer[value]{color:#565d64}.player-progress-seek[type=range]{z-index:3;cursor:pointer;outline:0}.player-progress-seek[type=range]::-webkit-slider-runnable-track{background:0 0;border:0}.player-progress-seek[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:0 0;border:0;width:2px;height:10px}.player-progress-seek[type=range]::-moz-range-track{background:0 0;border:0}.player-progress-seek[type=range]::-moz-range-thumb{-moz-appearance:none;background:0 0;border:0;width:2px;height:10px}.player-progress-seek[type=range]::-ms-track{color:transparent;background:0 0;border:0}.player-progress-seek[type=range]::-ms-fill-lower,.player-progress-seek[type=range]::-ms-fill-upper{background:0 0;border:0}.player-progress-seek[type=range]::-ms-thumb{background:0 0;border:0;width:2px;height:10px}.player-progress-seek[type=range]:focus{outline:0}.player-progress-seek[type=range]::-moz-focus-outer{border:0}.player-controls [data-player=pause],.player.playing .player-controls [data-player=play]{display:none}.player.playing .player-controls [data-player=pause]{display:inline-block}.player-volume[type=range]{display:inline-block;vertical-align:middle;-webkit-appearance:none;-moz-appearance:none;width:100px;margin:0 10px 0 0;padding:0;cursor:pointer;background:0 0}.player-volume[type=range]::-webkit-slider-runnable-track{height:6px;background:#565d64;border:0;border-radius:3px}.player-volume[type=range]::-webkit-slider-thumb{-webkit-appearance:none;margin-top:-3px;height:12px;width:12px;background:#cbd0d3;border:0;border-radius:6px;transition:background .3s ease;cursor:ew-resize}.player-volume[type=range]::-moz-range-track{height:6px;background:#565d64;border:0;border-radius:3px}.player-volume[type=range]::-moz-range-thumb{height:12px;width:12px;background:#cbd0d3;border:0;border-radius:6px;transition:background .3s ease;cursor:ew-resize}.player-volume[type=range]::-ms-track{height:6px;background:0 0;border-color:transparent;border-width:3px 0;color:transparent}.player-volume[type=range]::-ms-fill-lower,.player-volume[type=range]::-ms-fill-upper{height:6px;background:#565d64;border:0;border-radius:3px}.player-volume[type=range]::-ms-thumb{height:12px;width:12px;background:#cbd0d3;border:0;border-radius:6px;transition:background .3s ease;cursor:ew-resize}.player-volume[type=range]:focus{outline:0}.player-volume[type=range]:focus::-webkit-slider-thumb{background:#3498db}.player-volume[type=range]:focus::-moz-range-thumb{background:#3498db}.player-volume[type=range]:focus::-ms-thumb{background:#3498db}.player-fullscreen,.player.fullscreen-active{position:fixed;top:0;left:0;right:0;bottom:0;height:100%;width:100%;z-index:10000000;background:#000}.player-fullscreen .player-video-wrapper,.player.fullscreen-active .player-video-wrapper{height:100%;width:100%}.player-fullscreen .player-video-wrapper video,.player.fullscreen-active .player-video-wrapper video{height:100%}.player-fullscreen .player-video-wrapper .player-captions,.player.fullscreen-active .player-video-wrapper .player-captions{top:auto;bottom:90px}@media (min-width:560px) and (max-width:767px){.player-fullscreen .player-video-wrapper .player-captions,.player.fullscreen-active .player-video-wrapper .player-captions{bottom:60px}}@media (min-width:768px){.player-fullscreen .player-video-wrapper .player-captions,.player.fullscreen-active .player-video-wrapper .player-captions{bottom:80px}}.player-fullscreen .player-controls,.player.fullscreen-active .player-controls{position:absolute;bottom:0;left:0;right:0}.player.captions-active .player-controls .icon-captions-on,.player.fullscreen-active .icon-exit-fullscreen,.player.muted .player-controls .icon-muted{display:block}.player [data-player=captions],.player [data-player=captions]+label,.player [data-player=fullscreen],.player [data-player=fullscreen]+label,.player.captions-active .player-controls .icon-captions-on+svg,.player.fullscreen-active .icon-exit-fullscreen+svg,.player.muted .player-controls .icon-muted+svg{display:none}.player.captions-enabled [data-player=captions],.player.captions-enabled [data-player=captions]+label,.player.fullscreen-enabled [data-player=fullscreen],.player.fullscreen-enabled [data-player=fullscreen]+label{display:inline-block}.player-fullscreen [data-player=fullscreen],.player-fullscreen [data-player=fullscreen]+label{display:none!important}
\ No newline at end of file +.sr-only{position:absolute!important;clip:rect(1px,1px,1px,1px);padding:0!important;border:0!important;height:1px!important;width:1px!important;overflow:hidden}.player{position:relative;max-width:100%;min-width:290px;overflow:hidden}.player,.player *,.player ::after,.player ::before{box-sizing:border-box}.player-video-wrapper{position:relative}.player video{width:100%;height:auto;vertical-align:middle}.player-captions{display:none;position:absolute;bottom:0;left:0;width:100%;padding:20px;min-height:2.5em;color:#fff;font-size:16px;font-weight:600;text-shadow:-1px -1px 0 #565d64,1px -1px 0 #565d64,-1px 1px 0 #565d64,1px 1px 0 #565d64;text-align:center;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}@media (min-width:768px){.player-captions{font-size:24px}}.player.captions-active .player-captions{display:block}.player-controls{zoom:1;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;position:relative;padding:20px 10px 10px;background:#343f4a;line-height:1;text-align:center}.player-controls:after,.player-controls:before{content:"";display:table}.player-controls:after{clear:both}.player-controls-sound{display:block;margin:10px auto 0}@media (min-width:560px){.player-controls-playback{float:left}.player-controls-sound{float:right;margin-top:0}}.player-controls button,.player-controls input+label{display:inline-block;vertical-align:middle;margin:0 2px;padding:5px 10px;transition:background .3s ease;border-radius:3px;cursor:pointer}.player-controls button svg,.player-controls input+label svg{width:18px;height:18px;display:block;fill:currentColor;transition:fill .3s ease}.player-controls .inverted:checked+label,.player-controls input+label{color:#565d64}.player-controls .inverted+label,.player-controls button,.player-controls input:checked+label{color:#cbd0d3}.player-controls button{border:0;background:0 0;overflow:hidden}.player-controls button:focus,.player-controls button:hover,.player-controls input+label:hover,.player-controls input:focus+label{background:#3498db;color:#fff}.player-controls button:focus,.player-controls input:focus+label{outline:0}.player-controls .icon-captions-on,.player-controls .icon-exit-fullscreen,.player-controls .icon-muted{display:none}.player-controls .player-time{display:inline-block;vertical-align:middle;margin-left:10px;color:#cbd0d3;font-weight:600;font-size:14px;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.player-progress{position:absolute;top:0;left:0;right:0;width:100%;height:10px;background:#6e777f}.player-progress-buffer[value],.player-progress-played[value],.player-progress-seek[type=range]{position:absolute;left:0;top:0;width:100%;height:10px;margin:0;padding:0;vertical-align:top;-webkit-appearance:none;-moz-appearance:none;border:none;background:0 0}.player-progress-buffer[value]::-webkit-progress-bar,.player-progress-played[value]::-webkit-progress-bar{background:0 0}.player-progress-buffer[value]::-webkit-progress-value,.player-progress-played[value]::-webkit-progress-value{background:currentColor}.player-progress-buffer[value]::-moz-progress-bar,.player-progress-played[value]::-moz-progress-bar{background:currentColor}.player-progress-played[value]{z-index:2;color:#3498db}.player-progress-buffer[value]{color:#565d64}.player-progress-seek[type=range]{z-index:3;cursor:pointer;outline:0}.player-progress-seek[type=range]::-webkit-slider-runnable-track{background:0 0;border:0}.player-progress-seek[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:0 0;border:0;width:2px;height:10px}.player-progress-seek[type=range]::-moz-range-track{background:0 0;border:0}.player-progress-seek[type=range]::-moz-range-thumb{-moz-appearance:none;background:0 0;border:0;width:2px;height:10px}.player-progress-seek[type=range]::-ms-track{color:transparent;background:0 0;border:0}.player-progress-seek[type=range]::-ms-fill-lower,.player-progress-seek[type=range]::-ms-fill-upper{background:0 0;border:0}.player-progress-seek[type=range]::-ms-thumb{background:0 0;border:0;width:2px;height:10px}.player-progress-seek[type=range]:focus{outline:0}.player-progress-seek[type=range]::-moz-focus-outer{border:0}.player-controls [data-player=pause],.player.playing .player-controls [data-player=play]{display:none}.player.playing .player-controls [data-player=pause]{display:inline-block}.player-volume[type=range]{display:inline-block;vertical-align:middle;-webkit-appearance:none;-moz-appearance:none;width:100px;margin:0 10px 0 0;padding:0;cursor:pointer;background:0 0}.player-volume[type=range]::-webkit-slider-runnable-track{height:6px;background:#565d64;border:0;border-radius:3px}.player-volume[type=range]::-webkit-slider-thumb{-webkit-appearance:none;margin-top:-3px;height:12px;width:12px;background:#cbd0d3;border:0;border-radius:6px;transition:background .3s ease;cursor:ew-resize}.player-volume[type=range]::-moz-range-track{height:6px;background:#565d64;border:0;border-radius:3px}.player-volume[type=range]::-moz-range-thumb{height:12px;width:12px;background:#cbd0d3;border:0;border-radius:6px;transition:background .3s ease;cursor:ew-resize}.player-volume[type=range]::-ms-track{height:6px;background:0 0;border-color:transparent;border-width:3px 0;color:transparent}.player-volume[type=range]::-ms-fill-lower,.player-volume[type=range]::-ms-fill-upper{height:6px;background:#565d64;border:0;border-radius:3px}.player-volume[type=range]::-ms-thumb{height:12px;width:12px;background:#cbd0d3;border:0;border-radius:6px;transition:background .3s ease;cursor:ew-resize}.player-volume[type=range]:focus{outline:0}.player-volume[type=range]:focus::-webkit-slider-thumb{background:#3498db}.player-volume[type=range]:focus::-moz-range-thumb{background:#3498db}.player-volume[type=range]:focus::-ms-thumb{background:#3498db}.player-fullscreen,.player.fullscreen-active{position:fixed;top:0;left:0;right:0;bottom:0;height:100%;width:100%;z-index:10000000;background:#000}.player-fullscreen .player-video-wrapper,.player.fullscreen-active .player-video-wrapper{height:100%;width:100%}.player-fullscreen .player-video-wrapper video,.player.fullscreen-active .player-video-wrapper video{height:100%}.player-fullscreen .player-video-wrapper .player-captions,.player.fullscreen-active .player-video-wrapper .player-captions{top:auto;bottom:90px}@media (min-width:560px) and (max-width:767px){.player-fullscreen .player-video-wrapper .player-captions,.player.fullscreen-active .player-video-wrapper .player-captions{bottom:60px}}@media (min-width:768px){.player-fullscreen .player-video-wrapper .player-captions,.player.fullscreen-active .player-video-wrapper .player-captions{bottom:80px}}.player-fullscreen .player-controls,.player.fullscreen-active .player-controls{position:absolute;bottom:0;left:0;right:0}.player.captions-active .player-controls .icon-captions-on,.player.fullscreen-active .icon-exit-fullscreen,.player.muted .player-controls .icon-muted{display:block}.player [data-player=captions],.player [data-player=captions]+label,.player [data-player=fullscreen],.player [data-player=fullscreen]+label,.player.captions-active .player-controls .icon-captions-on+svg,.player.fullscreen-active .icon-exit-fullscreen+svg,.player.muted .player-controls .icon-muted+svg{display:none}.player.captions-enabled [data-player=captions],.player.captions-enabled [data-player=captions]+label,.player.fullscreen-enabled [data-player=fullscreen],.player.fullscreen-enabled [data-player=fullscreen]+label{display:inline-block}.player-fullscreen [data-player=fullscreen],.player-fullscreen [data-player=fullscreen]+label{display:none!important}
\ No newline at end of file diff --git a/docs/error.html b/docs/error.html index 39175daa..3f2d1022 100644 --- a/docs/error.html +++ b/docs/error.html @@ -6,7 +6,7 @@ <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Docs styles --> - <link rel="stylesheet" href="//cdn.plyr.io/1.0.20/docs.css"> + <link rel="stylesheet" href="//cdn.plyr.io/1.0.21/docs.css"> </head> <body> <main> diff --git a/docs/index.html b/docs/index.html index 45289a68..f73e35cb 100644 --- a/docs/index.html +++ b/docs/index.html @@ -8,10 +8,10 @@ <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Styles --> - <link rel="stylesheet" href="//cdn.plyr.io/1.0.20/plyr.css"> + <link rel="stylesheet" href="//cdn.plyr.io/1.0.21/plyr.css"> <!-- Docs styles --> - <link rel="stylesheet" href="//cdn.plyr.io/1.0.20/docs.css"> + <link rel="stylesheet" href="//cdn.plyr.io/1.0.21/docs.css"> </head> <body> <header> @@ -67,13 +67,13 @@ <!-- Load SVG defs --> <!-- You should bundle all SVG/Icons into one file using a build tool such as gulp and svg store --> <script> - (function(d,p){var a=new XMLHttpRequest(),b=d.body;a.open("GET",p,!0);a.send();a.onload=function(){var c=d.createElement("div");c.style.display="none";c.innerHTML=a.responseText;b.insertBefore(c,b.childNodes[0])}})(document,"//cdn.plyr.io/1.0.20/sprite.svg"); + (function(d,p){var a=new XMLHttpRequest(),b=d.body;a.open("GET",p,!0);a.send();a.onload=function(){var c=d.createElement("div");c.style.display="none";c.innerHTML=a.responseText;b.insertBefore(c,b.childNodes[0])}})(document,"//cdn.plyr.io/1.0.21/sprite.svg"); </script> <!-- Plyr core script --> - <script src="//cdn.plyr.io/1.0.20/plyr.js"></script> + <script src="//cdn.plyr.io/1.0.21/plyr.js"></script> <!-- Docs script --> - <script src="//cdn.plyr.io/1.0.20/docs.js"></script> + <script src="//cdn.plyr.io/1.0.21/docs.js"></script> </body> </html>
\ No newline at end of file diff --git a/notes.md b/notes.md deleted file mode 100644 index 8c5b033a..00000000 --- a/notes.md +++ /dev/null @@ -1,9 +0,0 @@ -Loading --------------- -http://stackoverflow.com/questions/8685038/tell-whether-video-is-loaded-or-not-in-javascript -http://stackoverflow.com/questions/5181865/checking-if-a-html5-video-is-ready - -Events --------------- -https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement -https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events
\ No newline at end of file diff --git a/package.json b/package.json index c6eef3da..f025d633 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "plyr", - "version": "1.0.20", + "version": "1.0.21", "description": "A simple HTML5 media player using custom controls", "homepage": "http://plyr.io", "main": "gulpfile.js", @@ -3,7 +3,7 @@ A simple, accessible HTML5 media player. [Checkout the demo](http://plyr.io) -[](http://plyr.io) +[](http://plyr.io) ## Why? We wanted a lightweight, accessible and customisable media player that just supports *modern* browsers. Sure, there are many other players out there but we wanted to keep things simple, using the right elements for the job. @@ -51,11 +51,11 @@ More info on setting up dependencies can be found in the [Bower Docs](http://bow If you want to use our CDN, you can use the following. HTTPS (SSL) is supported. ```html -<link rel="stylesheet" href="//cdn.plyr.io/1.0.19/plyr.css"> -<script src="//cdn.plyr.io/1.0.19/plyr.js"></script> +<link rel="stylesheet" href="//cdn.plyr.io/1.0.21/plyr.css"> +<script src="//cdn.plyr.io/1.0.21/plyr.js"></script> ``` -You can also access the `sprite.svg` file at `//cdn.plyr.io/1.0.19/sprite.svg`. +You can also access the `sprite.svg` file at `//cdn.plyr.io/1.0.21/sprite.svg`. ### CSS 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. diff --git a/src/js/plyr.js b/src/js/plyr.js index a8434ca4..a193f5d8 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -1,6 +1,6 @@ // ========================================================================== // Plyr -// plyr.js v1.0.20 +// plyr.js v1.0.21 // https://github.com/sampotts/plyr // License: The MIT License (MIT) // ========================================================================== diff --git a/src/less/plyr.less b/src/less/plyr.less index b72f0ec7..410404be 100644 --- a/src/less/plyr.less +++ b/src/less/plyr.less @@ -284,11 +284,9 @@ // Inherit from currentColor; &::-webkit-progress-value { background: currentColor; - transition: width .1s ease; } &::-moz-progress-bar { background: currentColor; - transition: width .1s ease; } } &-played[value] { diff --git a/src/sass/plyr.scss b/src/sass/plyr.scss index 34ab288f..d7045b41 100644 --- a/src/sass/plyr.scss +++ b/src/sass/plyr.scss @@ -289,11 +289,9 @@ $bp-captions-large: 768px; // When captions jump to the larger font size // Inherit from currentColor; &::-webkit-progress-value { background: currentColor; - transition: width .1s ease; } &::-moz-progress-bar { background: currentColor; - transition: width .1s ease; } } &-played[value] { |