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

Merge branch 'master' into develop

Browse Source 
# Conflicts:
#	dist/plyr.css
#	src/less/plyr.less
This commit is contained in:
Sam 2016-05-11 22:47:27 +10:00
commit 4a69ef3874
9 changed files with 78 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dist/plyr.css 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",
"version": "1.6.4",
"version": "1.6.5",
"description": "A simple, accessible and customizable HTML5, YouTube and Vimeo media player",
"homepage": "http://plyr.io",
"main": "src/js/plyr.js",

12
readme.md
View File

@ -40,7 +40,7 @@ If you have any cool ideas or features, please let me know by [creating an issue
## Implementation
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.6.4/plyr.js` to `https://cdn.plyr.io/1.6.4/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.6.5/plyr.js` to `https://cdn.plyr.io/1.6.5/plyr.js`
### Node Package Manager (NPM)
@ -71,11 +71,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:
```html
<link rel="stylesheet" href="https://cdn.plyr.io/1.6.4/plyr.css">
<script src="https://cdn.plyr.io/1.6.4/plyr.js"></script>
<link rel="stylesheet" href="https://cdn.plyr.io/1.6.5/plyr.css">
<script src="https://cdn.plyr.io/1.6.5/plyr.js"></script>
```
You can also access the `sprite.svg` file at `https://cdn.plyr.io/1.6.4/sprite.svg`.
You can also access the `sprite.svg` file at `https://cdn.plyr.io/1.6.5/sprite.svg`.
### 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.scss` file included in `/src` in your build to save a request.
@ -113,7 +113,7 @@ Using AJAX means you can load the sprite from a different origin. Avoiding the i
c.innerHTML = a.responseText;
b.insertBefore(c, b.childNodes[0]);
};
})(document, 'https://cdn.plyr.io/1.6.4/sprite.svg');
})(document, 'https://cdn.plyr.io/1.6.5/sprite.svg');
</script>
```
@ -188,7 +188,7 @@ Be sure to [validate your caption files](https://quuz.org/webvtt/)
Here's an example of a default setup:
```html
<script src="https://cdn.plyr.io/1.6.4/plyr.js"></script>
<script src="https://cdn.plyr.io/1.6.5/plyr.js"></script>
<script>plyr.setup();</script>
```

2
src/js/plyr.js
View File

@ -1,6 +1,6 @@
// ==========================================================================
// Plyr
// plyr.js v1.6.4
// plyr.js v1.6.5
// https://github.com/selz/plyr
// License: The MIT License (MIT)
// ==========================================================================

4
src/less/base.less
View File

@ -8,6 +8,7 @@
min-width: 200px;
font-family: Avenir, "Avenir Next", "Helvetica Neue", "Segoe UI", Helvetica, Arial, sans-serif;
& when (@plyr-border-box = true) {
// border-box everything
// http://paulirish.com/2012/box-sizing-border-box-ftw/
&,
@ -16,11 +17,14 @@
*::before {
box-sizing: border-box;
}
}
& when (@plyr-touch-action = true) {
// Fix 300ms delay
a, button, input, label {
touch-action: manipulation;
}
}
// Media elements
video,

15
src/less/utilities.less
View File

@ -4,11 +4,22 @@
// Screen reader only elements
.plyr__sr-only {
position: absolute !important;
clip: rect(1px, 1px, 1px, 1px);
overflow: hidden;
// !important is not always needed
& when (@plyr-sr-only-important = true) {
position: absolute !important;
padding: 0 !important;
border: 0 !important;
height: 1px !important;
width: 1px !important;
overflow: hidden;
}
& when (@plyr-sr-only-important = false) {
position: absolute;
padding: 0;
border: 0;
height: 1px;
width: 1px;
}
}

5
src/less/variables.less
View File

@ -2,6 +2,11 @@
// Variables
// ==========================================================================
// Settings
@plyr-border-box: true;
@plyr-touch-action: true;
@plyr-sr-only-important: true;
// Colors
@plyr-color-main: #3498db;

19
src/scss/plyr.scss
View File

@ -21,6 +21,7 @@
min-width: 200px;
font-family: Avenir, "Avenir Next", "Helvetica Neue", "Segoe UI", Helvetica, Arial, sans-serif;
@if $plyr-border-box == true {
// border-box everything
// http://paulirish.com/2012/box-sizing-border-box-ftw/
&,
@ -29,11 +30,14 @@
*::before {
box-sizing: border-box;
}
}
@if $plyr-touch-action == true {
// Fix 300ms delay
a, button, input, label {
touch-action: manipulation;
}
}
// Media elements
video,
@ -138,13 +142,23 @@
// Screen reader only elements
.plyr__sr-only {
position: absolute !important;
clip: rect(1px, 1px, 1px, 1px);
overflow: hidden;
// !important is not always needed
@if $plyr-sr-only-important == true {
position: absolute !important;
padding: 0 !important;
border: 0 !important;
height: 1px !important;
width: 1px !important;
overflow: hidden;
} @else {
position: absolute;
padding: 0;
border: 0;
height: 1px;
width: 1px;
}
}
// Video
@ -629,6 +643,7 @@
// --------------------------------------------------------------
.plyr .plyr__volume {
display: none;
flex: 1;
position: relative;
input[type="range"] {

5
src/scss/variables.scss
View File

@ -4,6 +4,11 @@
// https://robots.thoughtbot.com/sass-default
// ==========================================================================
// Settings
$plyr-border-box: true !default;
$plyr-touch-action: true !default;
$plyr-sr-only-important: true !default;
// Colors
$plyr-color-main: #3498db !default;