Compare commits
5 Commits
Author | SHA1 | Date | |
---|---|---|---|
9feffb2972 | |||
acea5cdb24 | |||
55ed577b6a | |||
20b206a161 | |||
9c028a0ecc |
@ -1,5 +1,9 @@
|
|||||||
# Changelog
|
# Changelog
|
||||||
|
|
||||||
|
## v1.0.26
|
||||||
|
- Fixes for SASS (cheers @brunowego)
|
||||||
|
- Indentation reset to 4 spaces
|
||||||
|
|
||||||
## v1.0.25
|
## v1.0.25
|
||||||
- Fixes for iOS volume controls (hidden)
|
- Fixes for iOS volume controls (hidden)
|
||||||
- Classnames for left/right controls changed
|
- Classnames for left/right controls changed
|
||||||
|
@ -6,7 +6,7 @@
|
|||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
|
||||||
<!-- Docs styles -->
|
<!-- Docs styles -->
|
||||||
<link rel="stylesheet" href="//cdn.plyr.io/1.0.25/docs.css">
|
<link rel="stylesheet" href="//cdn.plyr.io/1.0.26/docs.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<main>
|
<main>
|
||||||
|
@ -8,10 +8,10 @@
|
|||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
|
||||||
<!-- Styles -->
|
<!-- Styles -->
|
||||||
<link rel="stylesheet" href="//cdn.plyr.io/1.0.25/plyr.css">
|
<link rel="stylesheet" href="//cdn.plyr.io/1.0.26/plyr.css">
|
||||||
|
|
||||||
<!-- Docs styles -->
|
<!-- Docs styles -->
|
||||||
<link rel="stylesheet" href="//cdn.plyr.io/1.0.25/docs.css">
|
<link rel="stylesheet" href="//cdn.plyr.io/1.0.26/docs.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
@ -67,13 +67,13 @@
|
|||||||
<!-- Load SVG defs -->
|
<!-- Load SVG defs -->
|
||||||
<!-- You should bundle all SVG/Icons into one file using a build tool such as gulp and svg store -->
|
<!-- You should bundle all SVG/Icons into one file using a build tool such as gulp and svg store -->
|
||||||
<script>
|
<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.25/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.26/sprite.svg");
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<!-- Plyr core script -->
|
<!-- Plyr core script -->
|
||||||
<script src="//cdn.plyr.io/1.0.25/plyr.js"></script>
|
<script src="//cdn.plyr.io/1.0.26/plyr.js"></script>
|
||||||
|
|
||||||
<!-- Docs script -->
|
<!-- Docs script -->
|
||||||
<script src="//cdn.plyr.io/1.0.25/docs.js"></script>
|
<script src="//cdn.plyr.io/1.0.26/docs.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "plyr",
|
"name": "plyr",
|
||||||
"version": "1.0.25",
|
"version": "1.0.26",
|
||||||
"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",
|
||||||
|
@ -38,7 +38,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.0.25/plyr.js` to `https://cdn.plyr.io/1.0.25/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.0.26/plyr.js` to `https://cdn.plyr.io/1.0.26/plyr.js`
|
||||||
|
|
||||||
### Bower
|
### Bower
|
||||||
If bower is your thang, you can grab Plyr using:
|
If bower is your thang, you can grab Plyr using:
|
||||||
@ -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.
|
If you want to use our CDN, you can use the following. HTTPS (SSL) is supported.
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<link rel="stylesheet" href="//cdn.plyr.io/1.0.25/plyr.css">
|
<link rel="stylesheet" href="//cdn.plyr.io/1.0.26/plyr.css">
|
||||||
<script src="//cdn.plyr.io/1.0.25/plyr.js"></script>
|
<script src="//cdn.plyr.io/1.0.26/plyr.js"></script>
|
||||||
```
|
```
|
||||||
|
|
||||||
You can also access the `sprite.svg` file at `//cdn.plyr.io/1.0.25/sprite.svg`.
|
You can also access the `sprite.svg` file at `//cdn.plyr.io/1.0.26/sprite.svg`.
|
||||||
|
|
||||||
### CSS
|
### 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.
|
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.
|
||||||
|
@ -37,7 +37,7 @@ $progress-buffered-bg: $gray;
|
|||||||
$progress-loading-size: 40px;
|
$progress-loading-size: 40px;
|
||||||
$progress-loading-bg: rgba(0,0,0, .15);
|
$progress-loading-bg: rgba(0,0,0, .15);
|
||||||
|
|
||||||
// Range
|
// Volume
|
||||||
$volume-track-height: 6px;
|
$volume-track-height: 6px;
|
||||||
$volume-track-bg: $gray;
|
$volume-track-bg: $gray;
|
||||||
$volume-thumb-height: ($volume-track-height * 2);
|
$volume-thumb-height: ($volume-track-height * 2);
|
||||||
@ -79,7 +79,7 @@ $bp-captions-large: 768px; // When captions jump to the larger font size
|
|||||||
// Animation
|
// Animation
|
||||||
// ---------------------------------------
|
// ---------------------------------------
|
||||||
@keyframes progress {
|
@keyframes progress {
|
||||||
to { background-position: @progress-loading-size 0; }
|
to { background-position: $progress-loading-size 0; }
|
||||||
}
|
}
|
||||||
|
|
||||||
// <input type="range"> styling
|
// <input type="range"> styling
|
||||||
@ -101,29 +101,31 @@ $bp-captions-large: 768px; // When captions jump to the larger font size
|
|||||||
border: 0;
|
border: 0;
|
||||||
border-radius: ($volume-track-height / 2);
|
border-radius: ($volume-track-height / 2);
|
||||||
}
|
}
|
||||||
@mixin seek-thumb() {
|
@mixin seek-thumb()
|
||||||
|
{
|
||||||
background: transparent;
|
background: transparent;
|
||||||
border: 0;
|
border: 0;
|
||||||
width: ($control-spacing * 2);
|
width: ($control-spacing * 2);
|
||||||
height: $control-spacing;
|
height: $control-spacing;
|
||||||
}
|
}
|
||||||
@mixin seek-track() {
|
@mixin seek-track()
|
||||||
|
{
|
||||||
background: none;
|
background: none;
|
||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Font smoothing
|
// Font smoothing
|
||||||
// ---------------------------------------
|
// ---------------------------------------
|
||||||
@mixin font-smoothing($mode: on) when ($mode = on)
|
@mixin font-smoothing($mode: on)
|
||||||
{
|
{
|
||||||
|
@if $mode == 'on' {
|
||||||
-moz-osx-font-smoothing: grayscale;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
}
|
} @else if $mode == 'off' {
|
||||||
@mixin font-smoothing($mode: on) when ($mode = off)
|
|
||||||
{
|
|
||||||
-moz-osx-font-smoothing: auto;
|
-moz-osx-font-smoothing: auto;
|
||||||
-webkit-font-smoothing: subpixel-antialiased;
|
-webkit-font-smoothing: subpixel-antialiased;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// Styles
|
// Styles
|
||||||
// -------------------------------
|
// -------------------------------
|
||||||
@ -191,7 +193,7 @@ $bp-captions-large: 768px; // When captions jump to the larger font size
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
||||||
// Layout
|
// Layout
|
||||||
&-sound {
|
&-right {
|
||||||
display: block;
|
display: block;
|
||||||
margin: $control-spacing auto 0;
|
margin: $control-spacing auto 0;
|
||||||
}
|
}
|
||||||
@ -238,16 +240,19 @@ $bp-captions-large: 768px; // When captions jump to the larger font size
|
|||||||
background: transparent;
|
background: transparent;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
input:focus + label,
|
|
||||||
button:focus {
|
// Specificity for overriding .inverted
|
||||||
@include tab-focus();
|
button:focus,
|
||||||
color: $control-color-focus;
|
|
||||||
}
|
|
||||||
button:hover,
|
button:hover,
|
||||||
input + label:hover {
|
[type="checkbox"]:focus + label,
|
||||||
|
[type="checkbox"] + label:hover {
|
||||||
background: $control-bg-hover;
|
background: $control-bg-hover;
|
||||||
color: $control-color-hover;
|
color: $control-color-hover;
|
||||||
}
|
}
|
||||||
|
button:focus,
|
||||||
|
input:focus + label {
|
||||||
|
outline: 0;
|
||||||
|
}
|
||||||
.icon-exit-fullscreen,
|
.icon-exit-fullscreen,
|
||||||
.icon-muted,
|
.icon-muted,
|
||||||
.icon-captions-on {
|
.icon-captions-on {
|
||||||
@ -330,8 +335,9 @@ $bp-captions-large: 768px; // When captions jump to the larger font size
|
|||||||
left: 0;
|
left: 0;
|
||||||
top: 0;
|
top: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: $control-spacing;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
|
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
@ -339,7 +345,6 @@ $bp-captions-large: 768px; // When captions jump to the larger font size
|
|||||||
border: none;
|
border: none;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-buffer[value],
|
&-buffer[value],
|
||||||
&-played[value] {
|
&-played[value] {
|
||||||
&::-webkit-progress-bar {
|
&::-webkit-progress-bar {
|
||||||
@ -366,7 +371,7 @@ $bp-captions-large: 768px; // When captions jump to the larger font size
|
|||||||
// <input[type='range']> element
|
// <input[type='range']> element
|
||||||
// Specificity is for bootstrap compatibility
|
// Specificity is for bootstrap compatibility
|
||||||
&-seek[type=range] {
|
&-seek[type=range] {
|
||||||
z-index: 3;
|
z-index: 4;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
outline: 0;
|
outline: 0;
|
||||||
|
|
||||||
@ -441,6 +446,7 @@ $bp-captions-large: 768px; // When captions jump to the larger font size
|
|||||||
// <input[type='range']> element
|
// <input[type='range']> element
|
||||||
// Specificity is for bootstrap compatibility
|
// Specificity is for bootstrap compatibility
|
||||||
&-volume[type=range] {
|
&-volume[type=range] {
|
||||||
|
display: inline-block;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
-moz-appearance: none;
|
-moz-appearance: none;
|
||||||
@ -452,20 +458,20 @@ $bp-captions-large: 768px; // When captions jump to the larger font size
|
|||||||
|
|
||||||
// Webkit
|
// Webkit
|
||||||
&::-webkit-slider-runnable-track {
|
&::-webkit-slider-runnable-track {
|
||||||
@include range-track();
|
@include volume-track();
|
||||||
}
|
}
|
||||||
&::-webkit-slider-thumb {
|
&::-webkit-slider-thumb {
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
margin-top: -(($volume-thumb-height - $volume-track-height) / 2);
|
margin-top: -(($volume-thumb-height - $volume-track-height) / 2);
|
||||||
@include range-thumb();
|
@include volume-thumb();
|
||||||
}
|
}
|
||||||
|
|
||||||
// Mozilla
|
// Mozilla
|
||||||
&::-moz-range-track {
|
&::-moz-range-track {
|
||||||
@include range-track();
|
@include volume-track();
|
||||||
}
|
}
|
||||||
&::-moz-range-thumb {
|
&::-moz-range-thumb {
|
||||||
@include range-thumb();
|
@include volume-thumb();
|
||||||
}
|
}
|
||||||
|
|
||||||
// Microsoft
|
// Microsoft
|
||||||
@ -478,10 +484,10 @@ $bp-captions-large: 768px; // When captions jump to the larger font size
|
|||||||
}
|
}
|
||||||
&::-ms-fill-lower,
|
&::-ms-fill-lower,
|
||||||
&::-ms-fill-upper {
|
&::-ms-fill-upper {
|
||||||
@include range-track();
|
@include volume-track();
|
||||||
}
|
}
|
||||||
&::-ms-thumb {
|
&::-ms-thumb {
|
||||||
@include range-thumb();
|
@include volume-thumb();
|
||||||
}
|
}
|
||||||
|
|
||||||
&:focus {
|
&:focus {
|
||||||
|
Reference in New Issue
Block a user