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

Merge branch 'develop' of github.com:selz/plyr into develop

Browse Source 
Conflicts:
	.gitignore
This commit is contained in:
Sam Potts 2015-03-05 20:08:26 +11:00
commit 3684024a58
57 changed files with 497 additions and 646 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
bower.json
View File

@ -29,5 +29,5 @@
"type": "git",
"url": "git://github.com/selz/plyr.git"
},
"license": "BSD"
"license": "MIT"
}

11
changelog.md
View File

@ -1,11 +1,20 @@
# Changelog
## v1.0.20
- Default controls included (Fixes #45)
- Volume changes on `input` as well as `change` (Fixes #43)
- Fix for undefined Play text
- License changed to MIT
## v1.0.19
- Fixed firefox fullscreen issue (#38)
## v1.0.18
- Added CDN references
## v1.0.17
- SASS support added (thanks to @brunowego)
- Docs completely seperated to avoid any confusion
- Docs completely separated to avoid any confusion
- New gulp tasks (will add more documentation for this)
## v1.0.16

127
controls.md
View File

@ -1,8 +1,8 @@
# Controls HTML
This is the markup that is rendered for the Plyr controls. The reason it's a seperate option is to allow full customization of markup based on your needs. It's a pet hate of other libraries that use `<a href="#">` or `<span>`s as buttons!
This is the markup that is rendered for the Plyr controls. You can use the default controls or provide a customized version of markup based on your needs.
The default Plyr setup uses a Hogan template. The reason being to allow for localization at a later date. Check out `controls.html` in `/src/templates` to get an idea of how the default html is structured. Alternatively just use the vanilla HTML below.
The demo Plyr setup uses a Hogan template. This purely to allow for localization at a later date. Check out `controls.html` in `/src/templates` to get an idea of how the default html is structured. Alternatively check out the `plyr.js` source.
## Requirements
@ -15,67 +15,68 @@ You need to add several placeholders to your html template that are replaced whe
Currently all buttons and inputs need to be present for Plyr to work but later we'll make it more dynamic so if you omit a button or input, it'll still work.
## Vanilla HTML template
## Default
You can of course, just specify vanilla HTML. Here's an example snippet:
This is the default `html` option from `plyr.js`.
```html
var controls = [
'<div class="player-controls">',
'<div class="player-progress">',
'<progress class="player-progress-played" max="100" value="0">',
'<span>0</span>% played',
'</progress>',
'<progress class="player-progress-buffer" max="100" value="0">',
'<span>0</span>% buffered',
'</progress>',
'</div>',
'<span class="player-controls-playback">',
'<button type="button" data-player="restart">',
'<svg><use xlink:href="#icon-refresh"></use></svg>',
'<span class="sr-only">Restart</span>',
'</button>',
'<button type="button" data-player="rewind">',
'<svg><use xlink:href="#icon-rewind"></use></svg>',
'<span class="sr-only">Rewind <span class="player-seek-time">{seektime}</span> seconds</span>',
'</button>',
'<button type="button" data-player="play">',
'<svg><use xlink:href="#icon-play"></use></svg>',
'<span class="sr-only">Play</span>',
'</button>',
'<button type="button" data-player="pause">',
'<svg><use xlink:href="#icon-pause"></use></svg>',
'<span class="sr-only">Pause</span>',
'</button>',
'<button type="button" data-player="fast-forward">',
'<svg><use xlink:href="#icon-fast-forward"></use></svg>',
'<span class="sr-only">Fast forward <span class="player-seek-time">{seektime}</span> seconds</span>',
'</button>',
'<span class="player-time">',
'<span class="sr-only">Time</span>',
'<span class="player-duration">00:00</span>',
'</span>',
'</span>',
'<span class="player-controls-sound">',
'<input class="inverted sr-only" id="mute{id}" type="checkbox" data-player="mute">',
'<label id="mute{id}" for="mute{id}">',
'<svg class="icon-muted"><use xlink:href="#icon-muted"></use></svg>',
'<svg><use xlink:href="#icon-sound"></use></svg>',
'<span class="sr-only">Mute</span>',
'</label>',
'<label for="volume{id}" class="sr-only">Volume</label>',
'<input id="volume{id}" class="player-volume" type="range" min="0" max="10" value="5" data-player="volume">',
'<input class="sr-only" id="captions{id}" type="checkbox" data-player="captions">',
'<label for="captions{id}">',
'<svg><use xlink:href="#icon-bubble"></use></svg>',
'<span class="sr-only">Captions</span>',
'</label>',
'<button type="button" data-player="fullscreen">',
'<svg class="icon-exit-fullscreen"><use xlink:href="#icon-collapse"></use></svg>',
'<svg><use xlink:href="#icon-expand"></use></svg>',
'<span class="sr-only">Toggle fullscreen</span>',
'</button>',
'</span>',
'</div>'
].join("\n");
```javascript
["<div class='player-controls'>",
"<div class='player-progress'>",
"<label for='seek{id}' class='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'>",
"<progress class='player-progress-played' max='100' value='0'>",
"<span>0</span>% played",
"</progress>",
"<progress class='player-progress-buffer' max='100' value='0'>",
"<span>0</span>% buffered",
"</progress>",
"</div>",
"<span class='player-controls-playback'>",
"<button type='button' data-player='restart'>",
"<svg><use xlink:href='#icon-restart'></use></svg>",
"<span class='sr-only'>Restart</span>",
"</button>",
"<button type='button' data-player='rewind'>",
"<svg><use xlink:href='#icon-rewind'></use></svg>",
"<span class='sr-only'>Rewind {seektime} seconds</span>",
"</button>",
"<button type='button' data-player='play'>",
"<svg><use xlink:href='#icon-play'></use></svg>",
"<span class='sr-only'>Play</span>",
"</button>",
"<button type='button' data-player='pause'>",
"<svg><use xlink:href='#icon-pause'></use></svg>",
"<span class='sr-only'>Pause</span>",
"</button>",
"<button type='button' data-player='fast-forward'>",
"<svg><use xlink:href='#icon-fast-forward'></use></svg>",
"<span class='sr-only'>Fast forward {seektime} seconds</span>",
"</button>",
"<span class='player-time'>",
"<span class='sr-only'>Time</span>",
"<span class='player-duration'>00:00</span>",
"</span>",
"</span>",
"<span class='player-controls-sound'>",
"<input class='inverted sr-only' id='mute{id}' type='checkbox' data-player='mute'>",
"<label id='mute{id}' for='mute{id}'>",
"<svg class='icon-muted'><use xlink:href='#icon-muted'></use></svg>",
"<svg><use xlink:href='#icon-volume'></use></svg>",
"<span class='sr-only'>Toggle Mute</span>",
"</label>",
"<label for='volume{id}' class='sr-only'>Volume</label>",
"<input id='volume{id}' class='player-volume' type='range' min='0' max='10' value='5' data-player='volume'>",
"<input class='sr-only' id='captions{id}' type='checkbox' data-player='captions'>",
"<label for='captions{id}'>",
"<svg class='icon-captions-on'><use xlink:href='#icon-captions-on'></use></svg>",
"<svg><use xlink:href='#icon-captions-off'></use></svg>",
"<span class='sr-only'>Toggle Captions</span>",
"</label>",
"<button type='button' data-player='fullscreen'>",
"<svg class='icon-exit-fullscreen'><use xlink:href='#icon-exit-fullscreen'></use></svg>",
"<svg><use xlink:href='#icon-enter-fullscreen'></use></svg>",
"<span class='sr-only'>Toggle fullscreen</span>",
"</button>",
"</span>",
"</div>"].join("\n");
```

BIN
design/IcoMoon/PNG/bubble.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 420 B

BIN
design/IcoMoon/PNG/fast-forward.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 360 B

BIN
design/IcoMoon/PNG/film.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 157 B

BIN
design/IcoMoon/PNG/monitor.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 199 B

BIN
design/IcoMoon/PNG/play.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 329 B

BIN
design/IcoMoon/PNG/refresh.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 441 B

BIN
design/IcoMoon/PNG/sound.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 328 B

BIN
design/IcoMoon/PNG/up.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 419 B

7
design/IcoMoon/Read Me.txt
View File

@ -1,7 +0,0 @@
The *SVG* folder contains the icons you selected as separate SVG files.
The *demo.html* lists the icons that you selected. To learn how to insert your icons as inline SVGs (with the <use> element), refer to the source of this HTML file. If you prefer to reference an external SVG instead of embedding it in the HTML, you will need to use javascript to fetch the SVG in order to make sure your SVGs will work fine in IE. IcoMoon's Quick Usage mode can take care of that and host your SVGs too.
You can ignore the *svgdefs.svg* file. It contains the same SVG <symbol> definitions as the ones you can find in the demo.html file.
If you prefer using PNGs or CSS sprites, refer to the Preferences panel of the IcoMoon app before downloading your zip pack.

6
design/IcoMoon/SVG/bubble.svg
View File

@ -1,6 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generated by IcoMoon.io -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" height="18" viewBox="0 0 18 18">
<path d="M9.016 3c2.748 0 4.984 2.243 4.984 5s-2.236 5-4.97 5l-0.060-0.004c-0.055-0.004-0.11-0.007-0.165-0.010l-0.336-0.014-3.665 1.098 0.629-2.483-0.517-0.747c-0.58-0.839-0.886-1.822-0.886-2.842 0-2.757 2.236-5 4.984-5zM9.016 1c-3.857 0-6.984 3.134-6.984 7 0 1.479 0.46 2.848 1.241 3.978l-1.272 5.022 6.722-2.015c0.098 0.004 0.194 0.015 0.293 0.015 3.857 0 6.984-3.134 6.984-7s-3.127-7-6.984-7v0z" fill="#444444"></path>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 741 B

6
design/IcoMoon/SVG/fast-forward.svg
View File

@ -1,6 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generated by IcoMoon.io -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" height="18" viewBox="0 0 18 18">
<path d="M17.569 8.246l-10.569-6.246c-0.552 0-1 0.448-1 1v1.954l-5-2.954c-0.552 0-1 0.448-1 1v12c0 0.552 0.448 1 1 1l5-2.955v1.955c0 0.552 0.448 1 1 1l10.569-6.246c0.267-0.158 0.431-0.444 0.431-0.754s-0.164-0.597-0.431-0.754zM6 10.722l-4 2.364v-8.172l4 2.364v3.444zM8 13.086v-8.172l6.915 4.086-6.915 4.086z" fill="#444444"></path>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 650 B

6
design/IcoMoon/SVG/film.svg
View File

@ -1,6 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generated by IcoMoon.io -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" height="18" viewBox="0 0 18 18">
<path d="M17 2h-16c-0.552 0-1 0.448-1 1v12c0 0.552 0.448 1 1 1h16c0.552 0 1-0.448 1-1v-12c0-0.552-0.448-1-1-1zM2 4h2v2h-2v-2zM2 8h2v2h-2v-2zM2 14v-2h2v2h-2zM6 14v-10h6v10h-6zM16 14h-2v-2h2v2zM16 10h-2v-2h2v2zM16 6h-2v-2h2v2z" fill="#444444"></path>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 568 B

6
design/IcoMoon/SVG/monitor.svg
View File

@ -1,6 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generated by IcoMoon.io -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" height="18" viewBox="0 0 18 18">
<path d="M16 1h-14c-0.552 0-1 0.448-1 1v12c0 0.552 0.448 1 1 1h5.5c-0.829 0-1.5 0.671-1.5 1.5v0.5h6v-0.5c0-0.829-0.671-1.5-1.5-1.5h5.5c0.552 0 1-0.448 1-1v-12c0-0.552-0.448-1-1-1zM15 12.5c0 0.276-0.224 0.5-0.5 0.5h-11c-0.276 0-0.5-0.224-0.5-0.5v-9c0-0.276 0.224-0.5 0.5-0.5h11c0.276 0 0.5 0.224 0.5 0.5v9z" fill="#444444"></path>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 649 B

6
design/IcoMoon/SVG/play.svg
View File

@ -1,6 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generated by IcoMoon.io -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" height="18" viewBox="0 0 18 18">
<path d="M5 4.914l6.915 4.086-6.915 4.086v-8.172zM4 2c-0.552 0-1 0.448-1 1v12c0 0.552 0.448 1 1 1l10.569-6.246c0.267-0.158 0.431-0.444 0.431-0.754s-0.164-0.597-0.431-0.754l-10.569-6.246z" fill="#444444"></path>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 530 B

7
design/IcoMoon/SVG/refresh.svg
View File

@ -1,7 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generated by IcoMoon.io -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" height="18" viewBox="0 0 18 18">
<path d="M8.013 14.006h-0.822c-2.372-0.388-4.187-2.453-4.187-4.934 0-0.831 0.213-1.609 0.574-2.299l0.613 0.85c0.446 0.618 1.409 0.446 1.614-0.289l1.162-4.179c0.162-0.58-0.275-1.155-0.877-1.154l-4.174 0.006c-0.741 0.001-1.17 0.841-0.736 1.443l1.128 1.564c-0.817 1.145-1.302 2.544-1.302 4.059 0 3.499 2.566 6.399 5.918 6.917 0.091 0.014 0.18 0.010 0.267-0.001v0.012h0.822c0.545 0 0.987-0.442 0.987-0.987v-0.020c0-0.545-0.442-0.987-0.987-0.987z" fill="#444444"></path>
<path d="M16.82 14.551l-1.129-1.564c0.818-1.145 1.302-2.544 1.302-4.059 0-3.499-2.566-6.399-5.918-6.918-0.091-0.014-0.18-0.010-0.267 0.001v-0.013h-0.822c-0.545 0-0.986 0.442-0.986 0.987v0.020c0 0.546 0.442 0.988 0.986 0.988h0.822c2.372 0.388 4.187 2.453 4.187 4.934 0 0.831-0.213 1.609-0.573 2.299l-0.614-0.85c-0.446-0.618-1.409-0.446-1.613 0.289l-1.163 4.179c-0.161 0.581 0.275 1.155 0.878 1.154l4.174-0.006c0.742-0.001 1.17-0.842 0.736-1.443z" fill="#444444"></path>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.2 KiB

7
design/IcoMoon/SVG/sound.svg
View File

@ -1,7 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generated by IcoMoon.io -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" height="18" viewBox="0 0 18 18">
<path d="M10.214 2c-0.111 0-0.225 0.032-0.334 0.101l-4.048 2.81c-0.083 0.058-0.182 0.089-0.283 0.089h-3.553c-0.55 0-0.996 0.448-0.996 1v6c0 0.552 0.446 1 0.996 1h3.553c0.102 0 0.2 0.031 0.283 0.089l4.048 2.81c0.109 0.069 0.223 0.101 0.334 0.101 0.392 0 0.747-0.4 0.747-0.949v-12.101c0-0.55-0.355-0.949-0.747-0.949zM8.969 12.834l-2.387-1.657c-0.166-0.115-0.364-0.178-0.566-0.178h-2.525c-0.275 0-0.498-0.224-0.498-0.5v-3c0-0.276 0.223-0.5 0.498-0.5h2.525c0.202 0 0.4-0.062 0.566-0.178l2.387-1.657v7.669z" fill="#444444"></path>
<path d="M16.934 8.799c-0.086-1.748-1.514-2.991-2.507-3.649-0.47-0.312-1.094-0.122-1.325 0.408l-0.038 0.086c-0.188 0.431-0.045 0.939 0.336 1.194 0.706 0.473 1.586 1.247 1.624 2.065 0.032 0.676-0.553 1.468-1.663 2.27-0.398 0.288-0.529 0.839-0.285 1.275l0.042 0.075c0.266 0.475 0.866 0.624 1.3 0.312 1.74-1.251 2.586-2.606 2.516-4.037z" fill="#444444"></path>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.2 KiB

7
design/IcoMoon/SVG/up.svg
View File

@ -1,7 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generated by IcoMoon.io -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" height="18" viewBox="0 0 18 18">
<path d="M17 9c0-4.418-3.582-8-8-8s-8 3.582-8 8c0 4.418 3.582 8 8 8s8-3.582 8-8zM3 9c0-3.309 2.691-6 6-6s6 2.691 6 6-2.691 6-6 6-6-2.691-6-6z" fill="#444444"></path>
<path d="M9.998 12.010v-3.633l1.293 1.317c0.392 0.388 1.025 0.388 1.417 0s0.391-1.016 0-1.403l-2.967-3c-0.188-0.186-0.442-0.291-0.709-0.291-0.011 0-0.023 0-0.034 0.001s-0.023-0.001-0.034-0.001c-0.266 0-0.521 0.105-0.709 0.291l-2.967 3c-0.391 0.388-0.391 1.016 0 1.403s1.025 0.388 1.417 0l1.294-1.317v3.633c0 0.547 0.443 0.99 0.99 0.99h0.018c0.547 0 0.99-0.443 0.99-0.99z" fill="#444444"></path>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 880 B

147
design/IcoMoon/demo-files/demo.css
View File

@ -1,147 +0,0 @@
body {
padding: 0;
margin: 0;
font-family: sans-serif;
font-size: 1em;
line-height: 1.5;
color: #555;
background: #fff;
}
h1 {
font-size: 1.5em;
font-weight: normal;
box-shadow: 0 1px #ddd, 0 2px #fff, 0 3px #ddd;
}
small {
font-size: .66666667em;
}
a {
color: #e74c3c;
text-decoration: none;
}
a:hover, a:focus {
box-shadow: 0 1px #e74c3c;
}
.bshadow0, input {
box-shadow: inset 0 -2px #e7e7e7;
}
input:hover {
box-shadow: inset 0 -2px #ccc;
}
input, fieldset {
font-size: 1em;
margin: 0;
padding: 0;
border: 0;
}
input {
color: inherit;
line-height: 1.5;
height: 1.5em;
padding: .25em 0;
}
input:focus {
outline: none;
box-shadow: inset 0 -2px #449fdb;
}
.glyph {
font-size: 16px;
width: 17em;
margin-right: 1.5em;
float: left;
overflow: hidden;
}
.glyph svg {
color: #444444;
}
.liga {
width: 80%;
width: calc(100% - 2.5em);
}
.talign-right {
text-align: right;
}
.talign-center {
text-align: center;
}
.bgc1 {
background: #f1f1f1;
}
.fgc0 {
color: #000;
}
.fgc1 {
color: #999;
}
p {
margin-top: 1em;
margin-bottom: 1em;
}
.mvm {
margin-top: .75em;
margin-bottom: .75em;
}
.mtn {
margin-top: 0;
}
.mtl, .mal {
margin-top: 1.5em;
}
.mbl, .mal {
margin-bottom: 1.5em;
}
.mal, .mhl {
margin-left: 1.5em;
margin-right: 1.5em;
}
.mhmm {
margin-left: 1em;
margin-right: 1em;
}
.mls {
margin-left: .25em;
}
.ptl {
padding-top: 1.5em;
}
.pbs, .pvs {
padding-bottom: .25em;
}
.pvs, .pts {
padding-top: .25em;
}
.unit {
float: left;
}
.unitRight {
float: right;
}
.size1of2 {
width: 50%;
}
.size1of1 {
width: 100%;
}
.clearfix:before, .clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.hidden-true {
display: none;
}
.textbox0 {
width: 3em;
background: #f1f1f1;
padding: .25em .5em;
line-height: 1.5;
height: 1.5em;
}
.fs0 {
font-size: 16px;
}
.fs1 {
font-size: 18px;
}

99
design/IcoMoon/demo.html
View File

@ -1,99 +0,0 @@
<!doctype html>
<html>
<head>
<title>IcoMoon - SVG Icons</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="demo-files/demo.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<svg display="none" width="0" height="0" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="icon-bubble" viewBox="0 0 1024 1024">
<title>bubble</title>
<path class="path1" d="M512.889 170.667c156.334 0 283.556 127.596 283.556 284.444s-127.221 284.444-282.722 284.459l-3.388-0.208c-3.14-0.222-6.251-0.412-9.388-0.555l-19.111-0.791-208.473 62.485 35.778-141.227-29.388-42.51c-32.974-47.751-50.418-103.653-50.418-161.653 0-156.848 127.195-284.444 283.556-284.444zM512.889 56.889c-219.445 0-397.333 178.292-397.333 398.222 0 84.124 26.167 162.028 70.612 226.32l-72.389 285.68 382.416-114.626c5.584 0.236 11.056 0.848 16.695 0.848 219.445 0 397.333-178.292 397.333-398.222s-177.888-398.222-397.333-398.222v0z"></path>
</symbol>
<symbol id="icon-sound" viewBox="0 0 1024 1024">
<title>sound</title>
<path class="path1" d="M581.056 113.778c-6.332 0-12.779 1.819-19.001 5.764l-230.277 159.847c-4.722 3.292-10.332 5.056-16.11 5.056h-202.112c-31.305 0-56.667 25.472-56.667 56.889v341.333c0 31.417 25.362 56.889 56.667 56.889h202.112c5.778 0 11.388 1.764 16.11 5.056l230.277 159.847c6.222 3.945 12.695 5.764 19.001 5.764 22.277 0 42.5-22.736 42.5-54v-688.43c0-31.278-20.222-54.014-42.5-54.014zM510.222 730.139l-135.78-94.265c-9.472-6.569-20.722-10.1-32.222-10.1h-143.666c-15.666 0-28.334-12.736-28.334-28.444v-170.667c0-15.708 12.667-28.444 28.334-28.444h143.668c11.5 0 22.75-3.527 32.222-10.098l135.778-94.26v436.277z"></path>
<path class="path2" d="M963.333 500.583c-4.889-99.417-86.112-170.139-142.612-207.57-26.75-17.737-62.222-6.93-75.364 23.195l-2.137 4.889c-10.667 24.5-2.583 53.403 19.111 67.945 40.167 26.903 90.222 70.958 92.389 117.486 1.833 38.473-31.445 83.5-94.612 129.111-22.667 16.375-30.112 47.708-16.222 72.555l2.389 4.292c15.111 27.001 49.278 35.486 73.945 17.762 98.999-71.15 147.111-148.233 143.111-229.664z"></path>
</symbol>
<symbol id="icon-monitor" viewBox="0 0 1024 1024">
<title>monitor</title>
<path class="path1" d="M910.222 56.889h-796.444c-31.417 0-56.889 25.472-56.889 56.889v682.667c0 31.417 25.472 56.889 56.889 56.889h312.889c-47.14 0-85.333 38.194-85.333 85.333v28.444h341.333v-28.444c0-47.14-38.194-85.333-85.333-85.333h312.889c31.417 0 56.889-25.472 56.889-56.889v-682.667c0-31.417-25.472-56.889-56.889-56.889zM853.333 711.111c0 15.723-12.722 28.444-28.444 28.444h-625.778c-15.723 0-28.444-12.722-28.444-28.444v-512c0-15.723 12.722-28.444 28.444-28.444h625.778c15.723 0 28.444 12.722 28.444 28.444v512z"></path>
</symbol>
<symbol id="icon-up" viewBox="0 0 1024 1024">
<title>up</title>
<path class="path1" d="M967.111 512c0-251.362-203.749-455.111-455.111-455.111s-455.111 203.749-455.111 455.111c0 251.362 203.749 455.111 455.111 455.111s455.111-203.749 455.111-455.111zM170.667 512c0-188.222 153.111-341.333 341.333-341.333s341.333 153.111 341.333 341.333-153.111 341.333-341.333 341.333-341.333-153.111-341.333-341.333z"></path>
<path class="path2" d="M568.784 683.221v-206.667l73.584 74.917c22.277 22.055 58.332 22.055 80.612 0 22.251-22.055 22.251-57.778 0-79.833l-168.779-170.667c-10.695-10.583-25.166-16.528-40.306-16.528-0.651 0-1.3 0.025-1.95 0.048-0.649-0.023-1.296-0.048-1.948-0.048-15.141 0-29.611 5.945-40.306 16.528l-168.779 170.667c-22.251 22.055-22.251 57.778 0 79.833 22.277 22.055 58.332 22.055 80.612 0l73.588-74.917v206.667c0 31.111 25.223 56.334 56.334 56.334h1.006c31.111 0 56.332-25.223 56.332-56.334z"></path>
</symbol>
<symbol id="icon-play" viewBox="0 0 1024 1024">
<title>play</title>
<path class="path1" d="M284.444 279.556l393.388 232.444-393.388 232.444v-464.889zM227.556 113.778c-31.417 0-56.889 25.472-56.889 56.889v682.667c0 31.417 25.472 56.889 56.889 56.889l601.278-355.305c15.166-8.972 24.5-25.278 24.5-42.917s-9.333-33.945-24.5-42.917l-601.278-355.305z"></path>
</symbol>
<symbol id="icon-fast-forward" viewBox="0 0 1024 1024">
<title>fast-forward</title>
<path class="path1" d="M999.5 469.083l-601.278-355.305c-31.417 0-56.889 25.472-56.889 56.889v111.184l-284.444-168.073c-31.417 0-56.889 25.472-56.889 56.889v682.667c0 31.417 25.472 56.889 56.889 56.889l284.444-168.084v111.195c0 31.417 25.472 56.889 56.889 56.889l601.278-355.305c15.195-8.972 24.5-25.278 24.5-42.917s-9.305-33.945-24.5-42.917zM341.333 609.972l-227.556 134.473v-464.889l227.556 134.473v195.943zM455.111 744.444v-464.889l393.388 232.444-393.388 232.444z"></path>
</symbol>
<symbol id="icon-refresh" viewBox="0 0 1024 1024">
<title>refresh</title>
<path class="path1" d="M455.874 796.763h-46.741c-134.912-22.064-238.203-139.554-238.203-280.692 0-47.296 12.142-91.534 32.651-130.773l34.875 48.352c25.397 35.179 80.169 25.371 91.813-16.452l66.11-237.758c9.198-33.013-15.646-65.719-49.909-65.664l-237.451 0.363c-42.183 0.055-66.555 47.852-41.877 82.087l64.19 88.951c-46.489 65.136-74.084 144.722-74.084 230.894 0 199.076 146 364.055 336.684 393.513 5.196 0.805 10.256 0.583 15.2-0.055v0.693h46.741c31.012 0 56.133-25.122 56.133-56.162v-1.14c0-31.012-25.122-56.158-56.133-56.158z"></path>
<path class="path2" d="M956.871 827.803l-64.219-88.951c46.517-65.138 74.084-144.722 74.084-230.894 0-199.076-145.972-364.057-336.656-393.54-5.198-0.805-10.256-0.583-15.202 0.084v-0.724h-46.768c-30.985 0-56.105 25.148-56.105 56.16v1.14c0 31.040 25.12 56.188 56.105 56.188h46.768c134.914 22.064 238.174 139.554 238.174 280.692 0 47.296-12.142 91.534-32.622 130.773l-34.903-48.352c-25.371-35.18-80.171-25.371-91.785 16.423l-66.137 237.756c-9.17 33.042 15.671 65.721 49.936 65.666l237.451-0.334c42.185-0.057 66.555-47.881 41.879-82.087z"></path>
</symbol>
<symbol id="icon-film" viewBox="0 0 1024 1024">
<title>film</title>
<path class="path1" d="M967.111 113.778h-910.222c-31.417 0-56.889 25.472-56.889 56.889v682.667c0 31.417 25.472 56.889 56.889 56.889h910.222c31.417 0 56.889-25.472 56.889-56.889v-682.667c0-31.417-25.472-56.889-56.889-56.889zM113.778 227.556h113.778v113.778h-113.778v-113.778zM113.778 455.111h113.778v113.778h-113.778v-113.778zM113.778 796.444v-113.778h113.778v113.778h-113.778zM341.333 796.444v-568.889h341.333v568.889h-341.333zM910.222 796.444h-113.778v-113.778h113.778v113.778zM910.222 568.889h-113.778v-113.778h113.778v113.778zM910.222 341.333h-113.778v-113.778h113.778v113.778z"></path>
</symbol>
</defs>
</svg>
<header class="bgc1 clearfix">
<p class="mhl">SVG Icons - Generated by <a href="https://icomoon.io/app">IcoMoon</a></p>
</header>
<div class="clearfix mhl ptl">
<h1 class="mvm mtn fgc1">Grid Size: 18</h1>
<div class="glyph fs1">
<div class="clearfix pbs">
<svg class="icon icon-bubble"><use xlink:href="#icon-bubble"></use></svg><span class="mls"> icon-bubble</span>
</div>
</div>
<div class="glyph fs1">
<div class="clearfix pbs">
<svg class="icon icon-sound"><use xlink:href="#icon-sound"></use></svg><span class="mls"> icon-sound</span>
</div>
</div>
<div class="glyph fs1">
<div class="clearfix pbs">
<svg class="icon icon-monitor"><use xlink:href="#icon-monitor"></use></svg><span class="mls"> icon-monitor</span>
</div>
</div>
<div class="glyph fs1">
<div class="clearfix pbs">
<svg class="icon icon-up"><use xlink:href="#icon-up"></use></svg><span class="mls"> icon-up</span>
</div>
</div>
<div class="glyph fs1">
<div class="clearfix pbs">
<svg class="icon icon-play"><use xlink:href="#icon-play"></use></svg><span class="mls"> icon-play</span>
</div>
</div>
<div class="glyph fs1">
<div class="clearfix pbs">
<svg class="icon icon-fast-forward"><use xlink:href="#icon-fast-forward"></use></svg><span class="mls"> icon-fast-forward</span>
</div>
</div>
<div class="glyph fs1">
<div class="clearfix pbs">
<svg class="icon icon-refresh"><use xlink:href="#icon-refresh"></use></svg><span class="mls"> icon-refresh</span>
</div>
</div>
<div class="glyph fs1">
<div class="clearfix pbs">
<svg class="icon icon-film"><use xlink:href="#icon-film"></use></svg><span class="mls"> icon-film</span>
</div>
</div>
</div>
</body>
</html>

6
design/IcoMoon/style.css
View File

@ -1,6 +0,0 @@
.icon {
display: inline-block;
width: 1em;
height: 1em;
fill: currentColor;
}

39
design/IcoMoon/svgdefs.svg
View File

@ -1,39 +0,0 @@
<svg display="none" width="0" height="0" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="icon-bubble" viewBox="0 0 1024 1024">
<title>bubble</title>
<path class="path1" d="M512.889 170.667c156.334 0 283.556 127.596 283.556 284.444s-127.221 284.444-282.722 284.459l-3.388-0.208c-3.14-0.222-6.251-0.412-9.388-0.555l-19.111-0.791-208.473 62.485 35.778-141.227-29.388-42.51c-32.974-47.751-50.418-103.653-50.418-161.653 0-156.848 127.195-284.444 283.556-284.444zM512.889 56.889c-219.445 0-397.333 178.292-397.333 398.222 0 84.124 26.167 162.028 70.612 226.32l-72.389 285.68 382.416-114.626c5.584 0.236 11.056 0.848 16.695 0.848 219.445 0 397.333-178.292 397.333-398.222s-177.888-398.222-397.333-398.222v0z"></path>
</symbol>
<symbol id="icon-sound" viewBox="0 0 1024 1024">
<title>sound</title>
<path class="path1" d="M581.056 113.778c-6.332 0-12.779 1.819-19.001 5.764l-230.277 159.847c-4.722 3.292-10.332 5.056-16.11 5.056h-202.112c-31.305 0-56.667 25.472-56.667 56.889v341.333c0 31.417 25.362 56.889 56.667 56.889h202.112c5.778 0 11.388 1.764 16.11 5.056l230.277 159.847c6.222 3.945 12.695 5.764 19.001 5.764 22.277 0 42.5-22.736 42.5-54v-688.43c0-31.278-20.222-54.014-42.5-54.014zM510.222 730.139l-135.78-94.265c-9.472-6.569-20.722-10.1-32.222-10.1h-143.666c-15.666 0-28.334-12.736-28.334-28.444v-170.667c0-15.708 12.667-28.444 28.334-28.444h143.668c11.5 0 22.75-3.527 32.222-10.098l135.778-94.26v436.277z"></path>
<path class="path2" d="M963.333 500.583c-4.889-99.417-86.112-170.139-142.612-207.57-26.75-17.737-62.222-6.93-75.364 23.195l-2.137 4.889c-10.667 24.5-2.583 53.403 19.111 67.945 40.167 26.903 90.222 70.958 92.389 117.486 1.833 38.473-31.445 83.5-94.612 129.111-22.667 16.375-30.112 47.708-16.222 72.555l2.389 4.292c15.111 27.001 49.278 35.486 73.945 17.762 98.999-71.15 147.111-148.233 143.111-229.664z"></path>
</symbol>
<symbol id="icon-monitor" viewBox="0 0 1024 1024">
<title>monitor</title>
<path class="path1" d="M910.222 56.889h-796.444c-31.417 0-56.889 25.472-56.889 56.889v682.667c0 31.417 25.472 56.889 56.889 56.889h312.889c-47.14 0-85.333 38.194-85.333 85.333v28.444h341.333v-28.444c0-47.14-38.194-85.333-85.333-85.333h312.889c31.417 0 56.889-25.472 56.889-56.889v-682.667c0-31.417-25.472-56.889-56.889-56.889zM853.333 711.111c0 15.723-12.722 28.444-28.444 28.444h-625.778c-15.723 0-28.444-12.722-28.444-28.444v-512c0-15.723 12.722-28.444 28.444-28.444h625.778c15.723 0 28.444 12.722 28.444 28.444v512z"></path>
</symbol>
<symbol id="icon-up" viewBox="0 0 1024 1024">
<title>up</title>
<path class="path1" d="M967.111 512c0-251.362-203.749-455.111-455.111-455.111s-455.111 203.749-455.111 455.111c0 251.362 203.749 455.111 455.111 455.111s455.111-203.749 455.111-455.111zM170.667 512c0-188.222 153.111-341.333 341.333-341.333s341.333 153.111 341.333 341.333-153.111 341.333-341.333 341.333-341.333-153.111-341.333-341.333z"></path>
<path class="path2" d="M568.784 683.221v-206.667l73.584 74.917c22.277 22.055 58.332 22.055 80.612 0 22.251-22.055 22.251-57.778 0-79.833l-168.779-170.667c-10.695-10.583-25.166-16.528-40.306-16.528-0.651 0-1.3 0.025-1.95 0.048-0.649-0.023-1.296-0.048-1.948-0.048-15.141 0-29.611 5.945-40.306 16.528l-168.779 170.667c-22.251 22.055-22.251 57.778 0 79.833 22.277 22.055 58.332 22.055 80.612 0l73.588-74.917v206.667c0 31.111 25.223 56.334 56.334 56.334h1.006c31.111 0 56.332-25.223 56.332-56.334z"></path>
</symbol>
<symbol id="icon-play" viewBox="0 0 1024 1024">
<title>play</title>
<path class="path1" d="M284.444 279.556l393.388 232.444-393.388 232.444v-464.889zM227.556 113.778c-31.417 0-56.889 25.472-56.889 56.889v682.667c0 31.417 25.472 56.889 56.889 56.889l601.278-355.305c15.166-8.972 24.5-25.278 24.5-42.917s-9.333-33.945-24.5-42.917l-601.278-355.305z"></path>
</symbol>
<symbol id="icon-fast-forward" viewBox="0 0 1024 1024">
<title>fast-forward</title>
<path class="path1" d="M999.5 469.083l-601.278-355.305c-31.417 0-56.889 25.472-56.889 56.889v111.184l-284.444-168.073c-31.417 0-56.889 25.472-56.889 56.889v682.667c0 31.417 25.472 56.889 56.889 56.889l284.444-168.084v111.195c0 31.417 25.472 56.889 56.889 56.889l601.278-355.305c15.195-8.972 24.5-25.278 24.5-42.917s-9.305-33.945-24.5-42.917zM341.333 609.972l-227.556 134.473v-464.889l227.556 134.473v195.943zM455.111 744.444v-464.889l393.388 232.444-393.388 232.444z"></path>
</symbol>
<symbol id="icon-refresh" viewBox="0 0 1024 1024">
<title>refresh</title>
<path class="path1" d="M455.874 796.763h-46.741c-134.912-22.064-238.203-139.554-238.203-280.692 0-47.296 12.142-91.534 32.651-130.773l34.875 48.352c25.397 35.179 80.169 25.371 91.813-16.452l66.11-237.758c9.198-33.013-15.646-65.719-49.909-65.664l-237.451 0.363c-42.183 0.055-66.555 47.852-41.877 82.087l64.19 88.951c-46.489 65.136-74.084 144.722-74.084 230.894 0 199.076 146 364.055 336.684 393.513 5.196 0.805 10.256 0.583 15.2-0.055v0.693h46.741c31.012 0 56.133-25.122 56.133-56.162v-1.14c0-31.012-25.122-56.158-56.133-56.158z"></path>
<path class="path2" d="M956.871 827.803l-64.219-88.951c46.517-65.138 74.084-144.722 74.084-230.894 0-199.076-145.972-364.057-336.656-393.54-5.198-0.805-10.256-0.583-15.202 0.084v-0.724h-46.768c-30.985 0-56.105 25.148-56.105 56.16v1.14c0 31.040 25.12 56.188 56.105 56.188h46.768c134.914 22.064 238.174 139.554 238.174 280.692 0 47.296-12.142 91.534-32.622 130.773l-34.903-48.352c-25.371-35.18-80.171-25.371-91.785 16.423l-66.137 237.756c-9.17 33.042 15.671 65.721 49.936 65.666l237.451-0.334c42.185-0.057 66.555-47.881 41.879-82.087z"></path>
</symbol>
<symbol id="icon-film" viewBox="0 0 1024 1024">
<title>film</title>
<path class="path1" d="M967.111 113.778h-910.222c-31.417 0-56.889 25.472-56.889 56.889v682.667c0 31.417 25.472 56.889 56.889 56.889h910.222c31.417 0 56.889-25.472 56.889-56.889v-682.667c0-31.417-25.472-56.889-56.889-56.889zM113.778 227.556h113.778v113.778h-113.778v-113.778zM113.778 455.111h113.778v113.778h-113.778v-113.778zM113.778 796.444v-113.778h113.778v113.778h-113.778zM341.333 796.444v-568.889h341.333v568.889h-341.333zM910.222 796.444h-113.778v-113.778h113.778v113.778zM910.222 568.889h-113.778v-113.778h113.778v113.778zM910.222 341.333h-113.778v-113.778h113.778v113.778z"></path>
</symbol>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 6.1 KiB

BIN
design/captions.sketch
View File

Binary file not shown.

BIN
design/collapse.sketch
View File

Binary file not shown.

BIN
design/expand.sketch
View File

Binary file not shown.

BIN
design/muted.sketch
View File

Binary file not shown.

BIN
design/pause.sketch
View File

Binary file not shown.

BIN
design/rewind.sketch
View File

Binary file not shown.

2
dist/plyr.css vendored
View File

File diff suppressed because one or more lines are too long

2
dist/plyr.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/sprite.svg vendored
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.5 KiB

After

Width:  |  Height:  |  Size: 5.3 KiB

2
docs/dist/docs.css vendored
View File

@ -1 +1 @@
/*! normalize.css v2.1.3 | MIT License | git.io/normalize */article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden],template{display:none}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}a{background:0 0}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}hr{box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre-wrap}q{quotes:"\201C" "\201D" "\2018" "\2019"}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}@font-face{font-family:Avenir;src:url(//cdn.sampotts.me/plyr/fonts/AvenirLTStd-Medium.woff2) format("woff2"),url(//cdn.sampotts.me/plyr/fonts/AvenirLTStd-Medium.woff) format("woff"),url(//cdn.sampotts.me/plyr/fonts/AvenirLTStd-Medium.ttf) format("truetype");font-style:normal;font-weight:400}@font-face{font-family:Avenir;src:url(//cdn.sampotts.me/plyr/fonts/AvenirLTStd-Heavy.woff2) format("woff2"),url(//cdn.sampotts.me/plyr/fonts/AvenirLTStd-Heavy.woff) format("woff"),url(//cdn.sampotts.me/plyr/fonts/AvenirLTStd-Heavy.ttf) format("truetype");font-style:normal;font-weight:600}*,::after,::before{box-sizing:border-box}body{font-family:Avenir,"Helvetica Neue",Helvetica,Arial,sans-serif;background:#fff;line-height:1.5;text-align:center;color:#6D797F}h1,h2{letter-spacing:-.025em;color:#2E3C44;margin:0 0 10px;line-height:1.2;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}h1{font-size:64px;font-size:4rem;color:#3498DB}p,small{margin:0 0 20px}small{display:block;padding:0 10px;font-size:14px;font-size:.9rem}header{padding:20px;margin-bottom:20px}header p{font-size:18px;font-size:1.1rem}@media (min-width:560px){header{padding-top:60px;padding-bottom:60px}}section{padding-bottom:20px}@media (min-width:560px){section{padding-bottom:40px}}a{text-decoration:none;color:#3498db;border-bottom:1px solid currentColor;transition:all .3s ease}a:focus,a:hover{color:#000}a:focus{outline:#343f4a dotted thin;outline-offset:1px}a.logo{border:0}.btn{display:inline-block;padding:10px 30px;background:#3498db;border:0;color:#fff;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-weight:600;border-radius:3px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.btn:focus,.btn:hover{color:#fff;background:#258cd1}.example-audio .player{max-width:480px}.example-video .player{max-width:1200px}.example-audio .player,.example-video .player{margin:0 auto 20px}.example-audio .player-fullscreen,.example-audio .player.fullscreen-active,.example-video .player-fullscreen,.example-video .player.fullscreen-active{max-width:none}footer{margin-bottom:20px}footer p{margin-bottom:10px}
/*! normalize.css v2.1.3 | MIT License | git.io/normalize */article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden],template{display:none}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}a{background:0 0}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}hr{box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre-wrap}q{quotes:"\201C" "\201D" "\2018" "\2019"}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}@font-face{font-family:Avenir;src:url(//cdn.plyr.io/fonts/avenir-medium.woff2) format("woff2"),url(//cdn.plyr.io/fonts/avenir-medium.woff) format("woff"),url(//cdn.plyr.io/fonts/avenir-medium.ttf) format("truetype");font-style:normal;font-weight:400}@font-face{font-family:Avenir;src:url(//cdn.plyr.io/fonts/avenir-bold.woff2) format("woff2"),url(//cdn.plyr.io/fonts/avenir-bold.woff) format("woff"),url(//cdn.plyr.io/fonts/avenir-bold.ttf) format("truetype");font-style:normal;font-weight:600}*,::after,::before{box-sizing:border-box}body{font-family:Avenir,"Helvetica Neue",Helvetica,Arial,sans-serif;background:#fff;line-height:1.5;text-align:center;color:#6D797F}.error body,html.error{height:100%}.error body{width:100%;display:table;table-layout:fixed}.error main{display:table-cell;width:100%;vertical-align:middle}h1,h2{letter-spacing:-.025em;color:#2E3C44;margin:0 0 10px;line-height:1.2;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}h1{font-size:64px;font-size:4rem;color:#3498DB}p,small{margin:0 0 20px}small{display:block;padding:0 10px;font-size:14px;font-size:.9rem}header{padding:20px;margin-bottom:20px}header p{font-size:18px;font-size:1.1rem}@media (min-width:560px){header{padding-top:60px;padding-bottom:60px}}section{padding-bottom:20px}@media (min-width:560px){section{padding-bottom:40px}}a{text-decoration:none;color:#3498db;border-bottom:1px solid currentColor;transition:all .3s ease}a:focus,a:hover{color:#000}a:focus{outline:#343f4a dotted thin;outline-offset:1px}a.logo{border:0}.btn{display:inline-block;padding:10px 30px;background:#3498db;border:0;color:#fff;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-weight:600;border-radius:3px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.btn:focus,.btn:hover{color:#fff;background:#258cd1}.example-audio .player{max-width:480px}.example-video .player{max-width:1200px}.example-audio .player,.example-video .player{margin:0 auto 20px}.example-audio .player-fullscreen,.example-audio .player.fullscreen-active,.example-video .player-fullscreen,.example-video .player.fullscreen-active{max-width:none}footer{margin-bottom:20px}footer p{margin-bottom:10px}

2
docs/dist/docs.js vendored
View File

File diff suppressed because one or more lines are too long

2
docs/dist/templates.js vendored
View File

@ -1,2 +1,2 @@
var templates = {};
templates['controls'] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<div class=\"player-controls\">");t.b("\n" + i);t.b(" <div class=\"player-progress\">");t.b("\n" + i);t.b(" <progress class=\"player-progress-played\" max=\"100\" value=\"0\">");t.b("\n" + i);t.b(" <span>0</span>% played");t.b("\n" + i);t.b(" </progress>");t.b("\n" + i);t.b(" <progress class=\"player-progress-buffer\" max=\"100\" value=\"0\">");t.b("\n" + i);t.b(" <span>0</span>% buffered");t.b("\n" + i);t.b(" </progress>");t.b("\n" + i);t.b(" </div>");t.b("\n" + i);t.b(" <span class=\"player-controls-playback\">");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"restart\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-refresh\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Restart</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"rewind\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-rewind\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Rewind <span class=\"player-seek-time\">{seektime}</span> seconds</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"play\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-play\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Play</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"pause\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-pause\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Pause</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"fast-forward\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-fast-forward\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Fast forward <span class=\"player-seek-time\">{seektime}</span> seconds</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <span class=\"player-time\">");t.b("\n" + i);t.b(" <span class=\"sr-only\">Time</span>");t.b("\n" + i);t.b(" <span class=\"player-duration\">00:00</span>");t.b("\n" + i);t.b(" </span>");t.b("\n" + i);t.b(" </span>");t.b("\n" + i);t.b(" <span class=\"player-controls-sound\">");t.b("\n" + i);t.b(" <input class=\"inverted sr-only\" id=\"mute{id}\" type=\"checkbox\" data-player=\"mute\">");t.b("\n" + i);t.b(" <label id=\"mute{id}\" for=\"mute{id}\">");t.b("\n" + i);t.b(" <svg class=\"icon-muted\"><use xlink:href=\"#icon-muted\"></use></svg>");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-sound\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Mute</span>");t.b("\n" + i);t.b(" </label>");t.b("\n");t.b("\n" + i);t.b(" <label for=\"volume{id}\" class=\"sr-only\">Volume</label>");t.b("\n" + i);t.b(" <input id=\"volume{id}\" class=\"player-volume\" type=\"range\" min=\"0\" max=\"10\" value=\"5\" data-player=\"volume\">");t.b("\n");t.b("\n" + i);t.b(" <input class=\"sr-only\" id=\"captions{id}\" type=\"checkbox\" data-player=\"captions\">");t.b("\n" + i);t.b(" <label for=\"captions{id}\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-bubble\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Captions</span>");t.b("\n" + i);t.b(" </label>");t.b("\n");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"fullscreen\">");t.b("\n" + i);t.b(" <svg class=\"icon-exit-fullscreen\"><use xlink:href=\"#icon-collapse\"></use></svg>");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-expand\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Toggle fullscreen</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" </span>");t.b("\n" + i);t.b("</div>");return t.fl(); },partials: {}, subs: { }});
templates['controls'] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<div class=\"player-controls\">");t.b("\n" + i);t.b(" <div class=\"player-progress\">");t.b("\n" + i);t.b(" <label for=\"seek{id}\" class=\"sr-only\">Seek</label>");t.b("\n" + i);t.b(" <input id=\"seek{id}\" class=\"player-progress-seek\" type=\"range\" min=\"0\" max=\"100\" step=\"0.5\" value=\"0\" data-player=\"seek\">");t.b("\n" + i);t.b(" <progress class=\"player-progress-played\" max=\"100\" value=\"0\">");t.b("\n" + i);t.b(" <span>0</span>% played");t.b("\n" + i);t.b(" </progress>");t.b("\n" + i);t.b(" <progress class=\"player-progress-buffer\" max=\"100\" value=\"0\">");t.b("\n" + i);t.b(" <span>0</span>% buffered");t.b("\n" + i);t.b(" </progress>");t.b("\n" + i);t.b(" </div>");t.b("\n" + i);t.b(" <span class=\"player-controls-playback\">");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"restart\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-restart\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Restart</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"rewind\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-rewind\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Rewind {seektime} seconds</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"play\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-play\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Play</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"pause\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-pause\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Pause</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"fast-forward\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-fast-forward\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Fast forward {seektime} seconds</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <span class=\"player-time\">");t.b("\n" + i);t.b(" <span class=\"sr-only\">Time</span>");t.b("\n" + i);t.b(" <span class=\"player-duration\">00:00</span>");t.b("\n" + i);t.b(" </span>");t.b("\n" + i);t.b(" </span>");t.b("\n" + i);t.b(" <span class=\"player-controls-sound\">");t.b("\n" + i);t.b(" <input class=\"inverted sr-only\" id=\"mute{id}\" type=\"checkbox\" data-player=\"mute\">");t.b("\n" + i);t.b(" <label id=\"mute{id}\" for=\"mute{id}\">");t.b("\n" + i);t.b(" <svg class=\"icon-muted\"><use xlink:href=\"#icon-muted\"></use></svg>");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-volume\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Toggle Mute</span>");t.b("\n" + i);t.b(" </label>");t.b("\n");t.b("\n" + i);t.b(" <label for=\"volume{id}\" class=\"sr-only\">Volume</label>");t.b("\n" + i);t.b(" <input id=\"volume{id}\" class=\"player-volume\" type=\"range\" min=\"0\" max=\"10\" step=\"0.5\" value=\"0\" data-player=\"volume\">");t.b("\n");t.b("\n" + i);t.b(" <input class=\"sr-only\" id=\"captions{id}\" type=\"checkbox\" data-player=\"captions\">");t.b("\n" + i);t.b(" <label for=\"captions{id}\">");t.b("\n" + i);t.b(" <svg class=\"icon-captions-on\"><use xlink:href=\"#icon-captions-on\"></use></svg>");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-captions-off\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Toggle Captions</span>");t.b("\n" + i);t.b(" </label>");t.b("\n");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"fullscreen\">");t.b("\n" + i);t.b(" <svg class=\"icon-exit-fullscreen\"><use xlink:href=\"#icon-exit-fullscreen\"></use></svg>");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-enter-fullscreen\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Toggle fullscreen</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" </span>");t.b("\n" + i);t.b("</div>");return t.fl(); },partials: {}, subs: { }});

18
docs/error.html Normal file
View File

@ -0,0 +1,18 @@
<!doctype html>
<html lang="en" class="error">
<head>
<meta charset="utf-8" />
<title>Doh. Looks like something went wrong.</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Docs styles -->
<link rel="stylesheet" href="//cdn.plyr.io/1.0.20/docs.css">
</head>
<body>
<main>
<h1>Doh.</h1>
<p>Looks like something went wrong.</p>
<a href="http://plyr.io" class="btn">Back to plyr.io</a>
</main>
</body>
</html>

12
docs/index.html
View File

@ -8,16 +8,16 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Styles -->
<link rel="stylesheet" href="//cdn.plyr.io/1.0.17/plyr.css">
<link rel="stylesheet" href="//cdn.plyr.io/1.0.20/plyr.css">
<!-- Docs styles -->
<link rel="stylesheet" href="//cdn.plyr.io/1.0.17/docs.css">
<link rel="stylesheet" href="//cdn.plyr.io/1.0.20/docs.css">
</head>
<body>
<header>
<h1>Plyr</h1>
<p>A simple HTML5 media player with custom controls and WebVTT captions.</p>
<a href="https://github.com/selz/plyr" target="_blank" class="btn">Download on Github</a>
<a href="https://github.com/selz/plyr" target="_blank" class="btn">Download on GitHub</a>
</header>
<main>
@ -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.17/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.20/sprite.svg");
</script>
<!-- Plyr core script -->
<script src="//cdn.plyr.io/1.0.17/plyr.js"></script>
<script src="//cdn.plyr.io/1.0.20/plyr.js"></script>
<!-- Docs script -->
<script src="//cdn.plyr.io/1.0.17/docs.js"></script>
<script src="//cdn.plyr.io/1.0.20/docs.js"></script>
</body>
</html>

4
docs/src/js/docs.js
View File

@ -15,8 +15,8 @@ plyr.setup({
});
// Google analytics
// For demo site (http://plyr.io) only
if(document.domain === "plyr.io") {
// For demo site (http://[www.]plyr.io) only
if(document.domain.indexOf("plyr.io") > -1) {
(function(i,s,o,g,r,a,m){i.GoogleAnalyticsObject=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)

19
docs/src/less/docs.less
View File

@ -31,9 +31,6 @@
}
// Base
html {
//font-size: 62.5%;
}
body {
font-family: "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
background: #fff;
@ -42,6 +39,22 @@ body {
color: #6D797F;
}
// Error page
html.error,
.error body {
height: 100%;
}
.error body {
width: 100%;
display: table;
table-layout: fixed;
}
.error main {
display: table-cell;
width: 100%;
vertical-align: middle;
}
// Type
h1,
h2 {

12
docs/src/less/lib/fontface.less
View File

@ -1,16 +1,16 @@
@font-face {
font-family: "Avenir";
src: url("//cdn.sampotts.me/plyr/fonts/AvenirLTStd-Medium.woff2") format("woff2"),
url("//cdn.sampotts.me/plyr/fonts/AvenirLTStd-Medium.woff") format("woff"),
url("//cdn.sampotts.me/plyr/fonts/AvenirLTStd-Medium.ttf") format("truetype");
src: url("//cdn.plyr.io/fonts/avenir-medium.woff2") format("woff2"),
url("//cdn.plyr.io/fonts/avenir-medium.woff") format("woff"),
url("//cdn.plyr.io/fonts/avenir-medium.ttf") format("truetype");
font-style: normal;
font-weight: 400;
}
@font-face {
font-family: "Avenir";
src: url("//cdn.sampotts.me/plyr/fonts/AvenirLTStd-Heavy.woff2") format("woff2"),
url("//cdn.sampotts.me/plyr/fonts/AvenirLTStd-Heavy.woff") format("woff"),
url("//cdn.sampotts.me/plyr/fonts/AvenirLTStd-Heavy.ttf") format("truetype");
src: url("//cdn.plyr.io/fonts/avenir-bold.woff2") format("woff2"),
url("//cdn.plyr.io/fonts/avenir-bold.woff") format("woff"),
url("//cdn.plyr.io/fonts/avenir-bold.ttf") format("truetype");
font-style: normal;
font-weight: 600;
}

23
docs/src/templates/controls.html
View File

@ -1,5 +1,7 @@
<div class="player-controls">
<div class="player-progress">
<label for="seek{id}" class="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">
<progress class="player-progress-played" max="100" value="0">
<span>0</span>% played
</progress>
@ -9,12 +11,12 @@
</div>
<span class="player-controls-playback">
<button type="button" data-player="restart">
<svg><use xlink:href="#icon-refresh"></use></svg>
<svg><use xlink:href="#icon-restart"></use></svg>
<span class="sr-only">Restart</span>
</button>
<button type="button" data-player="rewind">
<svg><use xlink:href="#icon-rewind"></use></svg>
<span class="sr-only">Rewind <span class="player-seek-time">{seektime}</span> seconds</span>
<span class="sr-only">Rewind {seektime} seconds</span>
</button>
<button type="button" data-player="play">
<svg><use xlink:href="#icon-play"></use></svg>
@ -26,7 +28,7 @@
</button>
<button type="button" data-player="fast-forward">
<svg><use xlink:href="#icon-fast-forward"></use></svg>
<span class="sr-only">Fast forward <span class="player-seek-time">{seektime}</span> seconds</span>
<span class="sr-only">Fast forward {seektime} seconds</span>
</button>
<span class="player-time">
<span class="sr-only">Time</span>
@ -37,22 +39,23 @@
<input class="inverted sr-only" id="mute{id}" type="checkbox" data-player="mute">
<label id="mute{id}" for="mute{id}">
<svg class="icon-muted"><use xlink:href="#icon-muted"></use></svg>
<svg><use xlink:href="#icon-sound"></use></svg>
<span class="sr-only">Mute</span>
<svg><use xlink:href="#icon-volume"></use></svg>
<span class="sr-only">Toggle Mute</span>
</label>
<label for="volume{id}" class="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="player-volume" type="range" min="0" max="10" step="0.5" value="0" data-player="volume">
<input class="sr-only" id="captions{id}" type="checkbox" data-player="captions">
<label for="captions{id}">
<svg><use xlink:href="#icon-bubble"></use></svg>
<span class="sr-only">Captions</span>
<svg class="icon-captions-on"><use xlink:href="#icon-captions-on"></use></svg>
<svg><use xlink:href="#icon-captions-off"></use></svg>
<span class="sr-only">Toggle Captions</span>
</label>
<button type="button" data-player="fullscreen">
<svg class="icon-exit-fullscreen"><use xlink:href="#icon-collapse"></use></svg>
<svg><use xlink:href="#icon-expand"></use></svg>
<svg class="icon-exit-fullscreen"><use xlink:href="#icon-exit-fullscreen"></use></svg>
<svg><use xlink:href="#icon-enter-fullscreen"></use></svg>
<span class="sr-only">Toggle fullscreen</span>
</button>
</span>

45
gulpfile.js
View File

@ -2,6 +2,7 @@
// Gulp build script
// ==========================================================================
/*global require, __dirname*/
/*jshint -W079 */
var fs = require("fs"),
path = require("path"),
@ -20,7 +21,8 @@ var fs = require("fs"),
rename = require("gulp-rename"),
s3 = require("gulp-s3"),
gzip = require("gulp-gzip"),
replace = require("gulp-replace");
replace = require("gulp-replace"),
open = require("gulp-open");
var root = __dirname,
paths = {
@ -190,13 +192,12 @@ gulp.task("watch", function () {
gulp.watch(paths.docs.src.templates, "js");
});
// Publish the docs site
try {
var aws = loadJSON(path.join(root, "aws.json"));
}
catch (e) { }
// Publish a version to CDN and docs
// --------------------------------------------
var version = package.version,
// Some options
var aws = loadJSON(path.join(root, "aws.json")),
version = package.version,
maxAge = 31536000, // seconds 1 year
options = {
cdn: {
@ -216,6 +217,7 @@ options = {
},
cdnpath = new RegExp(aws.cdn.bucket + "\/(\\d+\\.)?(\\d+\\.)?(\\*|\\d+)","gi");
// Publish version to CDN bucket
gulp.task("cdn", function () {
console.log("Uploading " + version + " to " + aws.cdn.bucket);
@ -228,16 +230,37 @@ gulp.task("cdn", function () {
.pipe(s3(aws.cdn, options.cdn));
});
// Publish to Docs bucket
gulp.task("docs", function () {
console.log("Uploading " + version + " docs to " + aws.docs.bucket);
// Replace versioned files in index.html
gulp.src([paths.docs.root + "index.html"])
// Replace versioned files in *.html
gulp.src([paths.docs.root + "*.html"])
.pipe(replace(cdnpath, aws.cdn.bucket + "/" + version))
.pipe(gulp.dest(paths.docs.root))
.pipe(gzip())
.pipe(s3(aws.docs, options.docs));
// Upload error.html to cdn using docs options
gulp.src([paths.docs.root + "error.html"])
.pipe(gzip())
.pipe(s3(aws.cdn, options.docs));
});
gulp.task("publish", function () {
run("templates", tasks.js, tasks.less, "sprite", "cdn", "docs");
// Open the docs site to check it's sweet
gulp.task("open", function () {
console.log("Opening " + aws.docs.bucket + "...");
// A file must be specified or gulp will skip the task
// Doesn't matter which file since we set the URL above
// Weird, I know...
gulp.src([paths.docs.root + "index.html"])
.pipe(open("", {
url: "http://" + aws.docs.bucket
}));
});
// Do everything
gulp.task("publish", function () {
run("templates", tasks.js, tasks.less, "sprite", "cdn", "docs", "open");
});

25
license.md
View File

@ -1,12 +1,21 @@
Copyright (c) 2015, Selz.com
All rights reserved.
The MIT License (MIT)
Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
Copyright (c) 2015 Selz.com
1. Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
2. Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
3. Neither the name of the copyright holder nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

5
package.json
View File

@ -1,6 +1,6 @@
{
"name": "plyr",
"version": "1.0.18",
"version": "1.0.20",
"description": "A simple HTML5 media player using custom controls",
"homepage": "http://plyr.io",
"main": "gulpfile.js",
@ -13,6 +13,7 @@
"gulp-hogan-compile": "^0.4.1",
"gulp-less": "~1.3.1",
"gulp-minify-css": "~0.3.6",
"gulp-open": "^0.3.2",
"gulp-rename": "^1.2.0",
"gulp-replace": "^0.5.3",
"gulp-s3": "^0.3.0",
@ -38,5 +39,5 @@
"authors": [
"Sam Potts <me@sampotts.me>"
],
"license": "BSD"
"license": "MIT"
}

40
readme.md
View File

@ -3,19 +3,21 @@ A simple, accessible HTML5 media player.
[Checkout the demo](http://plyr.io)
[![Image of Plyr](https://cdn.plyr.io/static/plyr.png)](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.
## Features
- **Accessible** - full support for captions and screen readers.
- **Lightweight** - just 4.8KB minified and gzipped.
- **Lightweight** - just 5.3KB minified and gzipped.
- **Customisable** - make the player look how you want with the markup you want.
- **Semantic** - uses HTML5 form inputs for volume (range) and progress element for playback progress.
- **Responsive** - any screen size.
- **No dependencies** - written in vanilla JavaScript.
- **API** - easy to use API.
- **Fallback** - if there's no support, the native players are used.
- **Fullscreen** - options to run the player full browser or the user can toggle fullscreen.
- **Semantic** - uses the *right* elements. `<input type="range">` for volume and `<progress>` for progress and well, `<button>`s for buttons. There's no `<span>` or `<a href="#">` button hacks.
- **Responsive** - as you'd expect these days.
- **Audio & Video** - support for both formats.
- **API** - toggle playback, volume, seeking, and more.
- **Fullscreen** - supports native fullscreen with fallback to "full window" modes.
- **No dependencies** - written in vanilla JavaScript, no jQuery required.
## Changelog
Check out [the changelog](changelog.md)
@ -40,14 +42,14 @@ bower install plyr
More info on setting up dependencies can be found in the [Bower Docs](http://bower.io/docs/creating-packages/#maintaining-dependencies)
### CDN
If you want to use our CDN, you can use the following. Currently it's HTTP only.
If you want to use our CDN, you can use the following. HTTPS (SSL) is supported.
```html
<link rel="stylesheet" href="http://cdn.plyr.io/1.0.18/plyr.css">
<script src="http://cdn.plyr.io/1.0.18/plyr.js"></script>
<link rel="stylesheet" href="//cdn.plyr.io/1.0.19/plyr.css">
<script src="//cdn.plyr.io/1.0.19/plyr.js"></script>
```
You can also access the `sprite.svg` file at `http://cdn.plyr.io/1.0.18/sprite.svg`.
You can also access the `sprite.svg` file at `//cdn.plyr.io/1.0.19/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.
@ -129,13 +131,15 @@ Much of the behaviour of the player is configurable when initialising the librar
<script src="dist/plyr.js"></script>
<script>
plyr.setup({
html: **your controls html**
*options*
});
</script>
```
#### Options
You can pass the following options to the setup method.
<table class="table" width="100%">
<thead>
<tr>
@ -155,8 +159,8 @@ plyr.setup({
<tr>
<td><code>html</code></td>
<td>String</td>
<td><code>&mdash;</code></td>
<td>This is **required**. See <a href="controls.md">controls.md</a> for more info on how the html needs to be structured.</td>
<td><code><a href="controls.md">See controls.md</a></code></td>
<td>See <a href="controls.md">controls.md</a> for more info on how the html needs to be structured.</td>
</tr>
<tr>
<td><code>debug</code></td>
@ -174,7 +178,7 @@ plyr.setup({
<td><code>volume</code></td>
<td>Number</td>
<td><code>5</code></td>
<td>A number, between 1 and 10, representing the inital volume of the player.</td>
<td>A number, between 1 and 10, representing the initial volume of the player.</td>
</tr>
<tr>
<td><code>click</code></td>
@ -262,7 +266,7 @@ Here's a list of the methods supported:
<tr>
<td><code>setVolume</code></td>
<td>Number</td>
<td>Sets the player voume to the provided parameter. The value should be between 0 (muted) and 10 (loudest). If no parameter is provided, the default volume is used (5). Values over 10 are ignored.</td>
<td>Sets the player volume to the provided parameter. The value should be between 0 (muted) and 10 (loudest). If no parameter is provided, the default volume is used (5). Values over 10 are ignored.</td>
</tr>
<tr>
<td><code>toggleMute</code></td>
@ -333,7 +337,7 @@ If a User Agent is disabled but supports `<video>` and `<audio>` natively, it wi
Any unsupported browsers will display links to download the media if the correct html is used.
## Issues
If you find anything weird with Plyr, please let us know using the Github issues tracker.
If you find anything weird with Plyr, please let us know using the GitHub issues tracker.
## Author
Plyr is developed by Sam Potts ([@sam_potts](https://twitter.com/sam_potts)) ([sampotts.me](http://sampotts.me))
@ -358,4 +362,4 @@ Also these links helped created Plyr:
- [Styling the `<progress>` element - hongkiat.com](http://www.hongkiat.com/blog/html5-progress-bar/)
## Copyright and License
Copyright 2014, Selz.com under [the BSD license](license.md).
[The MIT license](license.md).

158
src/js/plyr.js
View File

@ -1,7 +1,8 @@
// ==========================================================================
// Plyr
// plyr.js v1.0.17
// plyr.js v1.0.20
// https://github.com/sampotts/plyr
// License: The MIT License (MIT)
// ==========================================================================
// Credits: http://paypal.github.io/accessible-html5-video-player/
// ==========================================================================
@ -23,6 +24,7 @@
container: ".player",
controls: ".player-controls",
buttons: {
seek: "[data-player='seek']",
play: "[data-player='play']",
pause: "[data-player='pause']",
restart: "[data-player='restart']",
@ -39,8 +41,7 @@
played: ".player-progress-played"
},
captions: ".player-captions",
duration: ".player-duration",
seekTime: ".player-seek-time"
duration: ".player-duration"
},
classes: {
video: "player-video",
@ -67,7 +68,68 @@
},
storage: {
enabled: true
}
},
html: (function() {
return ["<div class='player-controls'>",
"<div class='player-progress'>",
"<label for='seek{id}' class='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'>",
"<progress class='player-progress-played' max='100' value='0'>",
"<span>0</span>% played",
"</progress>",
"<progress class='player-progress-buffer' max='100' value='0'>",
"<span>0</span>% buffered",
"</progress>",
"</div>",
"<span class='player-controls-playback'>",
"<button type='button' data-player='restart'>",
"<svg><use xlink:href='#icon-restart'></use></svg>",
"<span class='sr-only'>Restart</span>",
"</button>",
"<button type='button' data-player='rewind'>",
"<svg><use xlink:href='#icon-rewind'></use></svg>",
"<span class='sr-only'>Rewind {seektime} seconds</span>",
"</button>",
"<button type='button' data-player='play'>",
"<svg><use xlink:href='#icon-play'></use></svg>",
"<span class='sr-only'>Play</span>",
"</button>",
"<button type='button' data-player='pause'>",
"<svg><use xlink:href='#icon-pause'></use></svg>",
"<span class='sr-only'>Pause</span>",
"</button>",
"<button type='button' data-player='fast-forward'>",
"<svg><use xlink:href='#icon-fast-forward'></use></svg>",
"<span class='sr-only'>Fast forward {seektime} seconds</span>",
"</button>",
"<span class='player-time'>",
"<span class='sr-only'>Time</span>",
"<span class='player-duration'>00:00</span>",
"</span>",
"</span>",
"<span class='player-controls-sound'>",
"<input class='inverted sr-only' id='mute{id}' type='checkbox' data-player='mute'>",
"<label id='mute{id}' for='mute{id}'>",
"<svg class='icon-muted'><use xlink:href='#icon-muted'></use></svg>",
"<svg><use xlink:href='#icon-volume'></use></svg>",
"<span class='sr-only'>Toggle Mute</span>",
"</label>",
"<label for='volume{id}' class='sr-only'>Volume</label>",
"<input id='volume{id}' class='player-volume' type='range' min='0' max='10' value='5' data-player='volume'>",
"<input class='sr-only' id='captions{id}' type='checkbox' data-player='captions'>",
"<label for='captions{id}'>",
"<svg class='icon-captions-on'><use xlink:href='#icon-captions-on'></use></svg>",
"<svg><use xlink:href='#icon-captions-off'></use></svg>",
"<span class='sr-only'>Toggle Captions</span>",
"</label>",
"<button type='button' data-player='fullscreen'>",
"<svg class='icon-exit-fullscreen'><use xlink:href='#icon-exit-fullscreen'></use></svg>",
"<svg><use xlink:href='#icon-enter-fullscreen'></use></svg>",
"<span class='sr-only'>Toggle fullscreen</span>",
"</button>",
"</span>",
"</div>"].join("\n");
})()
};
// Debugging
@ -215,33 +277,6 @@
return Math.floor((current / max) * 100);
}
// Get click position relative to parent
// http://www.kirupa.com/html5/getting_mouse_click_position.htm
function _getClickPosition(event) {
var parentPosition = _fullscreen().isFullScreen() ? { x: 0, y: 0 } : _getPosition(event.currentTarget);
return {
x: event.clientX - parentPosition.x,
y: event.clientY - parentPosition.y
};
}
// Get element position
function _getPosition(element) {
var xPosition = 0;
var yPosition = 0;
while (element) {
xPosition += (element.offsetLeft - element.scrollLeft + element.clientLeft);
yPosition += (element.offsetTop - element.scrollTop + element.clientTop);
element = element.offsetParent;
}
return {
x: xPosition,
y: yPosition
};
}
// Deep extend/merge two Objects
// http://andrewdupont.net/2009/08/28/deep-extending-objects-in-javascript/
// Removed call to arguments.callee (used explicit function name instead)
@ -449,6 +484,7 @@
// Buttons
player.buttons = {};
player.buttons.seek = _getElement(config.selectors.buttons.seek);
player.buttons.play = _getElement(config.selectors.buttons.play);
player.buttons.pause = _getElement(config.selectors.buttons.pause);
player.buttons.restart = _getElement(config.selectors.buttons.restart);
@ -489,11 +525,11 @@
// Setup aria attributes
function _setupAria() {
var label = player.buttons.play.innerText;
var label = player.buttons.play.innerText || "Play";
// If there's a media title set, use that for the label
if (typeof(config.title) !== "undefined" && config.title.length) {
label = player.buttons.play.innerText + ", " + config.title;
label += ", " + config.title;
}
player.buttons.play.setAttribute("aria-label", label);
@ -697,13 +733,6 @@
}
}
// Setup seeking
function _setupSeeking() {
// Update number of seconds in rewind and fast forward buttons
player.seekTime[0].innerHTML = config.seekTime;
player.seekTime[1].innerHTML = config.seekTime;
}
// Setup fullscreen
function _setupFullscreen() {
if(player.type === "video" && config.fullscreen.enabled) {
@ -795,12 +824,12 @@
}
// Toggle fullscreen
function _toggleFullscreen() {
function _toggleFullscreen(event) {
// Check for native support
var nativeSupport = fullscreen.supportsFullScreen;
// If it's a fullscreen change event, it's probably a native close
if(event.type === fullscreen.fullScreenEventName) {
if(event && event.type === fullscreen.fullScreenEventName) {
config.fullscreen.active = fullscreen.isFullScreen();
}
// If there's native support, use it
@ -913,8 +942,21 @@
progress = player.progress.played.bar;
text = player.progress.played.text;
value = _getPercentage(player.media.currentTime, player.media.duration);
// Set seeking value
player.buttons.seek.value = value;
break;
// Seeking
case "change":
case "input":
progress = player.progress.played.bar;
text = player.progress.played.text;
value = event.target.value;
break;
// Check buffer status
case "playing":
case "progress":
@ -936,6 +978,8 @@
progress.value = value;
text.innerHTML = value;
}
//_log(event);
}
// Update the displayed play time
@ -974,8 +1018,9 @@
// Fast forward
_on(player.buttons.forward, "click", _forward);
// Get the HTML5 range input element and append audio volume adjustment on change
_on(player.volume, "change", function() {
// Get the HTML5 range input element and append audio volume adjustment on change/input
// IE10 doesn't support the "input" event so they have to wait for change
_on(player.volume, "change input", function() {
_setVolume(this.value);
});
@ -1005,16 +1050,24 @@
});
}
// Time change on media
_on(player.media, "timeupdate", function(event) {
// Duration
_on(player.media, "timeupdate", _updateTimeDisplay);
_updateTimeDisplay();
// Playing progress
_on(player.media, "timeupdate", _updateProgress);
_updateProgress(event);
});
// Skip when clicking progress bar
_on(player.progress.played.bar, "click", function(event) {
player.pos = _getClickPosition(event).x / this.offsetWidth;
player.media.currentTime = player.pos * player.media.duration;
// Seek
_on(player.buttons.seek, "change input", function(event) {
// Update progress elements
_updateProgress(event);
// Update the text label
_updateTimeDisplay();
// Seek to the selected time
player.media.currentTime = ((this.value / this.max) * player.media.duration);
// Special handling for "manual" captions
if (!player.isTextTracks && player.type === "video") {
@ -1093,9 +1146,6 @@
// Setup fullscreen
_setupFullscreen();
// Seeking
_setupSeeking();
// Listeners
_listeners();
}

177
src/less/plyr.less
View File

@ -21,7 +21,6 @@
@control-bg-hover: @blue;
@control-color: @gray-light;
@control-color-inactive: @gray;
@control-color-focus: #fff;
@control-color-hover: #fff;
// Progress
@ -29,13 +28,13 @@
@progress-playing-bg: @blue;
@progress-buffered-bg: @gray;
// Range
@range-track-height: 6px;
@range-track-bg: @gray;
@range-thumb-height: (@range-track-height * 2);
@range-thumb-width: (@range-track-height * 2);
@range-thumb-bg: @control-color;
@range-thumb-bg-focus: @control-bg-hover;
// Volume
@volume-track-height: 6px;
@volume-track-bg: @gray;
@volume-thumb-height: (@volume-track-height * 2);
@volume-thumb-width: (@volume-track-height * 2);
@volume-thumb-bg: @control-color;
@volume-thumb-bg-focus: @control-bg-hover;
// Breakpoints
@bp-control-split: 560px; // When controls split into left/right
@ -64,25 +63,35 @@
// Tab focus styles
.tab-focus() {
outline: thin dotted #000;
outline-offset: 1px;
outline-offset: 0;
}
// Range styling
// ---------------------------------------
.range-thumb() {
height: @range-thumb-height;
width: @range-thumb-width;
background: @range-thumb-bg;
.volume-thumb() {
height: @volume-thumb-height;
width: @volume-thumb-width;
background: @volume-thumb-bg;
border: 0;
border-radius: (@range-thumb-height / 2);
border-radius: (@volume-thumb-height / 2);
transition: background .3s ease;
cursor: ew-resize;
}
.range-track() {
height: @range-track-height;
background: @range-track-bg;
.volume-track() {
height: @volume-track-height;
background: @volume-track-bg;
border: 0;
border-radius: (@volume-track-height / 2);
}
.seek-thumb() {
background: transparent;
border: 0;
width: 2px;
height: @control-spacing;
}
.seek-track() {
background: none;
border: 0;
border-radius: (@range-track-height / 2);
}
// Font smoothing
@ -196,13 +205,13 @@
transition: fill .3s ease;
}
}
input + label,
input.inverted:checked + label {
[type="checkbox"] + label,
.inverted:checked + label {
color: @control-color-inactive;
}
button,
input.inverted + label,
input:checked + label {
.inverted + label,
[type="checkbox"]:checked + label {
color: @control-color;
}
button {
@ -210,18 +219,21 @@
background: transparent;
overflow: hidden;
}
input:focus + label,
button:focus {
.tab-focus();
color: @control-color-focus;
}
button:focus,
button:hover,
input + label:hover {
[type="checkbox"]:focus + label,
[type="checkbox"] + label:hover {
background: @control-bg-hover;
color: @control-color-hover;
}
button:focus,
[type="checkbox"]:focus + label {
outline: 0;
}
.icon-exit-fullscreen,
.icon-muted {
.icon-muted,
.icon-captions-on {
display: none;
}
.player-time {
@ -247,20 +259,24 @@
background: @progress-bg;
&-buffer,
&-played {
&-played,
&-seek[type=range] {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
height: @control-spacing;
margin: 0;
padding: 0;
vertical-align: top;
&[value] {
-webkit-appearance: none;
-moz-appearance: none;
border: none;
background: transparent;
}
&-buffer,
&-played {
&::-webkit-progress-bar {
background: transparent;
}
@ -273,17 +289,63 @@
background: currentColor;
}
}
}
&-played {
z-index: 2;
}
&-played[value] {
cursor: pointer;
&-played{
color: @progress-playing-bg;
}
&-buffer[value] {
&-buffer {
color: @progress-buffered-bg;
}
// Seek control
// <input[type='range']> element
// Specificity is for bootstrap compatibility
&-seek[type=range] {
z-index: 3;
cursor: pointer;
outline: 0;
// Webkit
&::-webkit-slider-runnable-track {
.seek-track();
}
&::-webkit-slider-thumb {
-webkit-appearance: none;
.seek-thumb();
}
// Mozilla
&::-moz-range-track {
.seek-track();
}
&::-moz-range-thumb {
-moz-appearance: none;
.seek-thumb();
}
// Microsoft
&::-ms-track {
color: transparent;
.seek-track();
}
&::-ms-fill-lower,
&::-ms-fill-upper {
.seek-track();
}
&::-ms-thumb {
.seek-thumb();
}
&:focus {
//.tab-focus();
outline: 0;
}
&::-moz-focus-outer {
border: 0;
}
}
}
// States
@ -295,18 +357,9 @@
display: inline-block;
}
// Muted
&.muted .player-controls .icon-muted {
display: block;
& + svg {
display: none;
}
}
// Volume control
// <input[type='range']> element
// Specificty is for bootstrap compatibility
// Specificity is for bootstrap compatibility
&-volume[type=range] {
display: inline-block;
vertical-align: middle;
@ -320,49 +373,49 @@
// Webkit
&::-webkit-slider-runnable-track {
.range-track();
.volume-track();
}
&::-webkit-slider-thumb {
-webkit-appearance: none;
margin-top: -((@range-thumb-height - @range-track-height) / 2);
.range-thumb();
margin-top: -((@volume-thumb-height - @volume-track-height) / 2);
.volume-thumb();
}
// Mozilla
&::-moz-range-track {
.range-track();
.volume-track();
}
&::-moz-range-thumb {
.range-thumb();
.volume-thumb();
}
// Microsoft
&::-ms-track {
height: @range-track-height;
height: @volume-track-height;
background: transparent;
border-color: transparent;
border-width: ((@range-thumb-height - @range-track-height) / 2) 0;
border-width: ((@volume-thumb-height - @volume-track-height) / 2) 0;
color: transparent;
}
&::-ms-fill-lower,
&::-ms-fill-upper {
.range-track();
.volume-track();
}
&::-ms-thumb {
.range-thumb();
.volume-thumb();
}
&:focus {
outline: 0;
&::-webkit-slider-thumb {
background: @range-thumb-bg-focus;
background: @volume-thumb-bg-focus;
}
&::-moz-range-thumb {
background: @range-thumb-bg-focus;
background: @volume-thumb-bg-focus;
}
&::-ms-thumb {
background: @range-thumb-bg-focus;
background: @volume-thumb-bg-focus;
}
}
}
@ -407,8 +460,10 @@
}
}
// When true full screen, show exit fullscreen icon
&.fullscreen-active .icon-exit-fullscreen {
// Change icons on state change
&.fullscreen-active .icon-exit-fullscreen,
&.muted .player-controls .icon-muted,
&.captions-active .player-controls .icon-captions-on {
display: block;
& + svg {

32
src/sass/plyr.scss
View File

@ -202,13 +202,13 @@ $bp-captions-large: 768px; // When captions jump to the larger font size
transition: fill .3s ease;
}
}
input + label,
input.inverted:checked + label {
[type="checkbox"] + label,
.inverted:checked + label {
color: $control-color-inactive;
}
button,
input.inverted + label,
input:checked + label {
.inverted + label,
[type="checkbox"]:checked + label {
color: $control-color;
}
button {
@ -216,18 +216,19 @@ $bp-captions-large: 768px; // When captions jump to the larger font size
background: transparent;
overflow: hidden;
}
input:focus + label,
[type="checkbox"]:focus + label,
button:focus {
@include tab-focus();
color: $control-color-focus;
}
button:hover,
input + label:hover {
[type="checkbox"] + label:hover {
background: $control-bg-hover;
color: $control-color-hover;
}
.icon-exit-fullscreen,
.icon-muted {
.icon-muted,
.icon-captions-on {
display: none;
}
.player-time {
@ -301,18 +302,9 @@ $bp-captions-large: 768px; // When captions jump to the larger font size
display: inline-block;
}
// Muted
&.muted .player-controls .icon-muted {
display: block;
& + svg {
display: none;
}
}
// Volume control
// <input[type='range']> element
// Specificty is for bootstrap compatibility
// Specificity is for bootstrap compatibility
&-volume[type=range] {
vertical-align: middle;
-webkit-appearance: none;
@ -412,8 +404,10 @@ $bp-captions-large: 768px; // When captions jump to the larger font size
}
}
// When true full screen, show exit fullscreen icon
&.fullscreen-active .icon-exit-fullscreen {
// Change icons on state change
&.fullscreen-active .icon-exit-fullscreen,
&.muted .player-controls .icon-muted,
&.captions-active .player-controls .icon-captions-on {
display: block;
& + svg {

6
src/sprite/icon-bubble.svg
View File

@ -1,6 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generated by IcoMoon.io -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" height="18" viewBox="0 0 18 18">
<path d="M9.016 3c2.748 0 4.984 2.243 4.984 5s-2.236 5-4.97 5l-0.060-0.004c-0.055-0.004-0.11-0.007-0.165-0.010l-0.336-0.014-3.665 1.098 0.629-2.483-0.517-0.747c-0.58-0.839-0.886-1.822-0.886-2.842 0-2.757 2.236-5 4.984-5zM9.016 1c-3.857 0-6.984 3.134-6.984 7 0 1.479 0.46 2.848 1.241 3.978l-1.272 5.022 6.722-2.015c0.098 0.004 0.194 0.015 0.293 0.015 3.857 0 6.984-3.134 6.984-7s-3.127-7-6.984-7v0z"></path>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 725 B

10
src/sprite/icon-captions-off.svg Normal file
View File

@ -0,0 +1,10 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
<title>icon-captions-off</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" sketch:type="MSPage">
<path d="M1,2 C0.448,2 0,2.448 0,3 L0,15 C0,15.552 0.448,16 1,16 L17,16 C17.552,16 18,15.552 18,15 L18,3 C18,2.448 17.552,2 17,2 L1,2 Z M2,14 L2,4 L16,4 L16,14 L2,14 L2,14 Z" id="Shape" sketch:type="MSShapeGroup"></path>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 747 B

13
src/sprite/icon-captions-on.svg Normal file
View File

@ -0,0 +1,13 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
<title>icon-captions-on</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" sketch:type="MSPage">
<path d="M1,2 C0.448,2 0,2.448 0,3 L0,15 C0,15.552 0.448,16 1,16 L17,16 C17.552,16 18,15.552 18,15 L18,3 C18,2.448 17.552,2 17,2 L1,2 Z M2,14 L2,4 L16,4 L16,14 L2,14 L2,14 Z" id="Shape" sketch:type="MSShapeGroup"></path>
<rect id="Rectangle-1" sketch:type="MSShapeGroup" x="3" y="11" width="3" height="2"></rect>
<rect id="Rectangle-3" sketch:type="MSShapeGroup" x="12" y="11" width="3" height="2"></rect>
<rect id="Rectangle-2" sketch:type="MSShapeGroup" x="7" y="11" width="4" height="2"></rect>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

0
src/sprite/icon-expand.svg → src/sprite/icon-enter-fullscreen.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.1 KiB

After

Width:  |  Height:  |  Size: 2.1 KiB

0
src/sprite/icon-collapse.svg → src/sprite/icon-exit-fullscreen.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.1 KiB

After

Width:  |  Height:  |  Size: 2.1 KiB

7
src/sprite/icon-refresh.svg
View File

@ -1,7 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generated by IcoMoon.io -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" height="18" viewBox="0 0 18 18">
<path d="M8.013 14.006h-0.822c-2.372-0.388-4.187-2.453-4.187-4.934 0-0.831 0.213-1.609 0.574-2.299l0.613 0.85c0.446 0.618 1.409 0.446 1.614-0.289l1.162-4.179c0.162-0.58-0.275-1.155-0.877-1.154l-4.174 0.006c-0.741 0.001-1.17 0.841-0.736 1.443l1.128 1.564c-0.817 1.145-1.302 2.544-1.302 4.059 0 3.499 2.566 6.399 5.918 6.917 0.091 0.014 0.18 0.010 0.267-0.001v0.012h0.822c0.545 0 0.987-0.442 0.987-0.987v-0.020c0-0.545-0.442-0.987-0.987-0.987z"></path>
<path d="M16.82 14.551l-1.129-1.564c0.818-1.145 1.302-2.544 1.302-4.059 0-3.499-2.566-6.399-5.918-6.918-0.091-0.014-0.18-0.010-0.267 0.001v-0.013h-0.822c-0.545 0-0.986 0.442-0.986 0.987v0.020c0 0.546 0.442 0.988 0.986 0.988h0.822c2.372 0.388 4.187 2.453 4.187 4.934 0 0.831-0.213 1.609-0.573 2.299l-0.614-0.85c-0.446-0.618-1.409-0.446-1.613 0.289l-1.163 4.179c-0.161 0.581 0.275 1.155 0.878 1.154l4.174-0.006c0.742-0.001 1.17-0.842 0.736-1.443z"></path>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.2 KiB

10
src/sprite/icon-restart.svg Normal file
View File

@ -0,0 +1,10 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
<title>icon-restart</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" sketch:type="MSPage">
<path d="M17,2 C16.448,2 16,2.448 16,3 L16,7.318 L7,2 C6.448,2 6,2.448 6,3 L6,4.954 L1,2 C0.448,2 0,2.448 0,3 L0,15 C0,15.552 0.448,16 1,16 L6,13.045 L6,15 C6,15.552 6.448,16 7,16 L16,10.682 L16,15 C16,15.552 16.448,16 17,16 C17.552,16 18,15.552 18,15 L18,3 C18,2.448 17.552,2 17,2 L17,2 Z M6,10.722 L2,13.086 L2,4.914 L6,7.278 L6,10.722 L6,10.722 Z M8,13.086 L8,4.914 L14.915,9 L8,13.086 L8,13.086 Z" id="Shape" sketch:type="MSShapeGroup" transform="translate(9.000000, 9.000000) scale(-1, 1) translate(-9.000000, -9.000000) "></path>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

0
src/sprite/icon-sound.svg → src/sprite/icon-volume.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB