Compare commits
10 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 3bed21bd95 | |||
| 99cdfd60a1 | |||
| c6e5937deb | |||
| 4404e999eb | |||
| 3684024a58 | |||
| 1903b1bcdf | |||
| 9644833d26 | |||
| 93e3f7cdd9 | |||
| 617ae146c1 | |||
| 3459387f04 |
2
.gitignore
vendored
2
.gitignore
vendored
@ -3,4 +3,4 @@ node_modules
|
||||
*.sublime-workspace
|
||||
.DS_Store
|
||||
aws.json
|
||||
docs/index.dev.html
|
||||
docs/index.dev.html
|
||||
|
||||
@ -1,5 +1,9 @@
|
||||
# Changelog
|
||||
|
||||
## v1.0.21
|
||||
- Added an <input type="range"> for seeking to improve experience (and support dragging)
|
||||
- Icons for restart and captions improved (and some IDs changed)
|
||||
|
||||
## v1.0.20
|
||||
- Default controls included (Fixes #45)
|
||||
- Volume changes on `input` as well as `change` (Fixes #43)
|
||||
|
||||
21
controls.md
21
controls.md
@ -22,6 +22,8 @@ This is the default `html` option from `plyr.js`.
|
||||
```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>",
|
||||
@ -31,12 +33,12 @@ This is the default `html` option from `plyr.js`.
|
||||
"</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>",
|
||||
@ -48,7 +50,7 @@ This is the default `html` option from `plyr.js`.
|
||||
"</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>",
|
||||
@ -59,19 +61,20 @@ This is the default `html` option from `plyr.js`.
|
||||
"<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 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>",
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 420 B |
Binary file not shown.
|
Before Width: | Height: | Size: 360 B |
Binary file not shown.
|
Before Width: | Height: | Size: 157 B |
Binary file not shown.
|
Before Width: | Height: | Size: 199 B |
Binary file not shown.
|
Before Width: | Height: | Size: 329 B |
Binary file not shown.
|
Before Width: | Height: | Size: 441 B |
Binary file not shown.
|
Before Width: | Height: | Size: 328 B |
Binary file not shown.
|
Before Width: | Height: | Size: 419 B |
@ -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.
|
||||
@ -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>
|
||||
|
Before Width: | Height: | Size: 741 B |
@ -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>
|
||||
|
Before Width: | Height: | Size: 650 B |
@ -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>
|
||||
|
Before Width: | Height: | Size: 568 B |
@ -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>
|
||||
|
Before Width: | Height: | Size: 649 B |
@ -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>
|
||||
|
Before Width: | Height: | Size: 530 B |
@ -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>
|
||||
|
Before Width: | Height: | Size: 1.2 KiB |
@ -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>
|
||||
|
Before Width: | Height: | Size: 1.2 KiB |
@ -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>
|
||||
|
Before Width: | Height: | Size: 880 B |
@ -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;
|
||||
}
|
||||
@ -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>
|
||||
@ -1,6 +0,0 @@
|
||||
.icon {
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
fill: currentColor;
|
||||
}
|
||||
@ -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>
|
||||
|
Before Width: | Height: | Size: 6.1 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
2
dist/plyr.css
vendored
2
dist/plyr.css
vendored
File diff suppressed because one or more lines are too long
2
dist/plyr.js
vendored
2
dist/plyr.js
vendored
File diff suppressed because one or more lines are too long
2
dist/sprite.svg
vendored
2
dist/sprite.svg
vendored
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 5.5 KiB After Width: | Height: | Size: 5.3 KiB |
2
docs/dist/docs.js
vendored
2
docs/dist/docs.js
vendored
File diff suppressed because one or more lines are too long
2
docs/dist/templates.js
vendored
2
docs/dist/templates.js
vendored
@ -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: { }});
|
||||
@ -6,7 +6,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<!-- Docs styles -->
|
||||
<link rel="stylesheet" href="//cdn.plyr.io/1.0.20/docs.css">
|
||||
<link rel="stylesheet" href="//cdn.plyr.io/1.0.21/docs.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
|
||||
@ -8,10 +8,10 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<!-- Styles -->
|
||||
<link rel="stylesheet" href="//cdn.plyr.io/1.0.20/plyr.css">
|
||||
<link rel="stylesheet" href="//cdn.plyr.io/1.0.21/plyr.css">
|
||||
|
||||
<!-- Docs styles -->
|
||||
<link rel="stylesheet" href="//cdn.plyr.io/1.0.20/docs.css">
|
||||
<link rel="stylesheet" href="//cdn.plyr.io/1.0.21/docs.css">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
@ -67,13 +67,13 @@
|
||||
<!-- Load SVG defs -->
|
||||
<!-- You should bundle all SVG/Icons into one file using a build tool such as gulp and svg store -->
|
||||
<script>
|
||||
(function(d,p){var a=new XMLHttpRequest(),b=d.body;a.open("GET",p,!0);a.send();a.onload=function(){var c=d.createElement("div");c.style.display="none";c.innerHTML=a.responseText;b.insertBefore(c,b.childNodes[0])}})(document,"//cdn.plyr.io/1.0.20/sprite.svg");
|
||||
(function(d,p){var a=new XMLHttpRequest(),b=d.body;a.open("GET",p,!0);a.send();a.onload=function(){var c=d.createElement("div");c.style.display="none";c.innerHTML=a.responseText;b.insertBefore(c,b.childNodes[0])}})(document,"//cdn.plyr.io/1.0.21/sprite.svg");
|
||||
</script>
|
||||
|
||||
<!-- Plyr core script -->
|
||||
<script src="//cdn.plyr.io/1.0.20/plyr.js"></script>
|
||||
<script src="//cdn.plyr.io/1.0.21/plyr.js"></script>
|
||||
|
||||
<!-- Docs script -->
|
||||
<script src="//cdn.plyr.io/1.0.20/docs.js"></script>
|
||||
<script src="//cdn.plyr.io/1.0.21/docs.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -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>
|
||||
|
||||
9
notes.md
Normal file
9
notes.md
Normal file
@ -0,0 +1,9 @@
|
||||
Loading
|
||||
--------------
|
||||
http://stackoverflow.com/questions/8685038/tell-whether-video-is-loaded-or-not-in-javascript
|
||||
http://stackoverflow.com/questions/5181865/checking-if-a-html5-video-is-ready
|
||||
|
||||
Events
|
||||
--------------
|
||||
https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement
|
||||
https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "plyr",
|
||||
"version": "1.0.20",
|
||||
"version": "1.0.21",
|
||||
"description": "A simple HTML5 media player using custom controls",
|
||||
"homepage": "http://plyr.io",
|
||||
"main": "gulpfile.js",
|
||||
|
||||
25
readme.md
25
readme.md
@ -17,16 +17,20 @@ We wanted a lightweight, accessible and customisable media player that just supp
|
||||
- **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.
|
||||
- **No dependencies** - written in vanilla JavaScript, no jQuery required.
|
||||
|
||||
Oh and yes, it works with Bootstrap.
|
||||
|
||||
## Changelog
|
||||
Check out [the changelog](changelog.md)
|
||||
|
||||
## Planned development
|
||||
- Accept a string selector, a node, or a nodelist for the `container` property of `selectors`.
|
||||
- Accept a selector for the `html` template property.
|
||||
- Multiple language captions (with selection)
|
||||
- Localisation of control labels
|
||||
- Playlists (audio and video)
|
||||
- Set source by API
|
||||
- Tooltip option (for seeking and controls)
|
||||
... and whatever else has been raised in [issues](https://github.com/Selz/plyr/issues)
|
||||
|
||||
If you have any cool ideas or features, please let me know by [creating an issue](https://github.com/Selz/plyr/issues/new) or of course, forking and sending a pull request.
|
||||
|
||||
@ -45,11 +49,11 @@ More info on setting up dependencies can be found in the [Bower Docs](http://bow
|
||||
If you want to use our CDN, you can use the following. HTTPS (SSL) is supported.
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="//cdn.plyr.io/1.0.19/plyr.css">
|
||||
<script src="//cdn.plyr.io/1.0.19/plyr.js"></script>
|
||||
<link rel="stylesheet" href="//cdn.plyr.io/1.0.21/plyr.css">
|
||||
<script src="//cdn.plyr.io/1.0.21/plyr.js"></script>
|
||||
```
|
||||
|
||||
You can also access the `sprite.svg` file at `//cdn.plyr.io/1.0.19/sprite.svg`.
|
||||
You can also access the `sprite.svg` file at `//cdn.plyr.io/1.0.21/sprite.svg`.
|
||||
|
||||
### CSS
|
||||
If you want to use the default css, add the `plyr.css` file from /dist into your head, or even better use `plyr.less` or `plyr.sass` file included in `/src` in your build to save a request.
|
||||
@ -263,6 +267,11 @@ Here's a list of the methods supported:
|
||||
<td>Number</td>
|
||||
<td>Fast forwards by the provided parameter, in seconds. If no parameter is provided, the default seekInterval is used (10 seconds).</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>seek</code></td>
|
||||
<td>Number</td>
|
||||
<td>Seeks the media to the provided parameter, time in seconds.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>setVolume</code></td>
|
||||
<td>Number</td>
|
||||
@ -346,6 +355,9 @@ Plyr is developed by Sam Potts ([@sam_potts](https://twitter.com/sam_potts)) ([s
|
||||
- [The Changelog](http://thechangelog.com/plyr-simple-html5-media-player-custom-controls-webvtt-captions/)
|
||||
- [HTML5 Weekly #177](http://html5weekly.com/issues/177)
|
||||
- [Web Design Weekly #174](https://web-design-weekly.com/2015/02/24/web-design-weekly-174/)
|
||||
- [Hacker News](https://news.ycombinator.com/item?id=9136774)
|
||||
- [Web Platform Daily](http://webplatformdaily.org/releases/2015-03-04)
|
||||
- [LayerVault Designer News](https://news.layervault.com/stories/45394-plyr--a-simple-html5-media-player)
|
||||
|
||||
## Used by
|
||||
- [Selz.com](https://selz.com)
|
||||
@ -356,6 +368,7 @@ Let me know on [Twitter](https://twitter.com/sam_potts) I can add you to the abo
|
||||
Credit to the PayPal HTML5 Video player from which Plyr's caption functionality is ported from:
|
||||
- [PayPal's Accessible HTML5 Video Player](https://github.com/paypal/accessible-html5-video-player)
|
||||
- The icons used in Plyr are [Vicons](https://dribbble.com/shots/1663443-60-Vicons-Free-Icon-Set) plus some ones I made
|
||||
- [An awesome guide for Plyr in Japanese!](http://syncer.jp/how-to-use-plyr-io) by [@arayutw](https://twitter.com/arayutw)
|
||||
|
||||
Also these links helped created Plyr:
|
||||
- [Media Events - W3.org](http://www.w3.org/2010/05/video/mediaevents.html)
|
||||
|
||||
252
src/js/plyr.js
252
src/js/plyr.js
@ -1,6 +1,6 @@
|
||||
// ==========================================================================
|
||||
// Plyr
|
||||
// plyr.js v1.0.20
|
||||
// plyr.js v1.0.21
|
||||
// https://github.com/sampotts/plyr
|
||||
// License: The MIT License (MIT)
|
||||
// ==========================================================================
|
||||
@ -24,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']",
|
||||
@ -40,8 +41,7 @@
|
||||
played: ".player-progress-played"
|
||||
},
|
||||
captions: ".player-captions",
|
||||
duration: ".player-duration",
|
||||
seekTime: ".player-seek-time"
|
||||
duration: ".player-duration"
|
||||
},
|
||||
classes: {
|
||||
video: "player-video",
|
||||
@ -70,63 +70,68 @@
|
||||
enabled: true
|
||||
},
|
||||
html: (function() {
|
||||
return ["<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>",
|
||||
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>",
|
||||
"<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");
|
||||
})()
|
||||
"<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
|
||||
@ -271,34 +276,7 @@
|
||||
|
||||
// Get percentage
|
||||
function _getPercentage(current, max) {
|
||||
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
|
||||
};
|
||||
return ((current / max) * 100).toFixed(2);
|
||||
}
|
||||
|
||||
// Deep extend/merge two Objects
|
||||
@ -508,6 +486,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);
|
||||
@ -756,13 +735,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) {
|
||||
@ -811,19 +783,7 @@
|
||||
if(typeof seekTime !== "number") {
|
||||
seekTime = config.seekTime;
|
||||
}
|
||||
|
||||
var targetTime = player.media.currentTime - seekTime;
|
||||
|
||||
if (targetTime < 0) {
|
||||
player.media.currentTime = 0;
|
||||
}
|
||||
else {
|
||||
player.media.currentTime = targetTime;
|
||||
}
|
||||
// Special handling for "manual" captions
|
||||
if (!player.isTextTracks && player.type === "video") {
|
||||
_adjustManualCaptions(player);
|
||||
}
|
||||
_seek(player.media.currentTime - seekTime);
|
||||
}
|
||||
|
||||
// Fast forward
|
||||
@ -832,15 +792,35 @@
|
||||
if(typeof seekTime !== "number") {
|
||||
seekTime = config.seekTime;
|
||||
}
|
||||
_seek(player.media.currentTime + seekTime);
|
||||
}
|
||||
|
||||
var targetTime = player.media.currentTime + seekTime;
|
||||
// Seek to time
|
||||
var _seek = function(input) {
|
||||
//var value = config.seekTime;
|
||||
var targetTime = 0;
|
||||
|
||||
if (targetTime > player.media.duration) {
|
||||
player.media.currentTime = player.media.duration;
|
||||
// If no event or time is passed, bail
|
||||
if (typeof input === "undefined") {
|
||||
return;
|
||||
}
|
||||
else {
|
||||
player.media.currentTime = targetTime;
|
||||
// Explicit position
|
||||
else if (typeof input === "number") {
|
||||
targetTime = input;
|
||||
}
|
||||
// Event
|
||||
else if (input.type === "change" || input.type === "input") {
|
||||
// It's the seek slider
|
||||
// Seek to the selected time
|
||||
targetTime = ((this.value / this.max) * player.media.duration).toFixed(1);
|
||||
}
|
||||
|
||||
// Set the current time
|
||||
player.media.currentTime = targetTime;
|
||||
|
||||
// Logging
|
||||
_log("Seeking to " + player.media.currentTime + " seconds");
|
||||
|
||||
// Special handling for "manual" captions
|
||||
if (!player.isTextTracks && player.type === "video") {
|
||||
_adjustManualCaptions(player);
|
||||
@ -969,11 +949,27 @@
|
||||
switch(event.type) {
|
||||
// Video playing
|
||||
case "timeupdate":
|
||||
case "seeking":
|
||||
progress = player.progress.played.bar;
|
||||
text = player.progress.played.text;
|
||||
value = _getPercentage(player.media.currentTime, player.media.duration);
|
||||
|
||||
// Set seek range value only if it's a "natural" time event
|
||||
if(event.type == "timeupdate") {
|
||||
player.buttons.seek.value = value;
|
||||
}
|
||||
|
||||
break;
|
||||
|
||||
// Events from seek range
|
||||
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":
|
||||
@ -995,6 +991,8 @@
|
||||
progress.value = value;
|
||||
text.innerHTML = value;
|
||||
}
|
||||
|
||||
//_log(event);
|
||||
}
|
||||
|
||||
// Update the displayed play time
|
||||
@ -1010,6 +1008,13 @@
|
||||
player.duration.innerHTML = player.mins + ":" + player.secs;
|
||||
}
|
||||
|
||||
function _timeUpdate(event) {
|
||||
// Duration
|
||||
_updateTimeDisplay();
|
||||
// Playing progress
|
||||
_updateProgress(event);
|
||||
}
|
||||
|
||||
// Listen for events
|
||||
function _listeners() {
|
||||
// Play
|
||||
@ -1065,22 +1070,11 @@
|
||||
});
|
||||
}
|
||||
|
||||
// Duration
|
||||
_on(player.media, "timeupdate", _updateTimeDisplay);
|
||||
// Time change on media
|
||||
_on(player.media, "timeupdate seeking", _timeUpdate);
|
||||
|
||||
// Playing progress
|
||||
_on(player.media, "timeupdate", _updateProgress);
|
||||
|
||||
// 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;
|
||||
|
||||
// Special handling for "manual" captions
|
||||
if (!player.isTextTracks && player.type === "video") {
|
||||
_adjustManualCaptions(player);
|
||||
}
|
||||
});
|
||||
// Seek
|
||||
_on(player.buttons.seek, "change input", _seek);
|
||||
|
||||
// Captions
|
||||
_on(player.buttons.captions, "click", function() {
|
||||
@ -1153,9 +1147,6 @@
|
||||
// Setup fullscreen
|
||||
_setupFullscreen();
|
||||
|
||||
// Seeking
|
||||
_setupSeeking();
|
||||
|
||||
// Listeners
|
||||
_listeners();
|
||||
}
|
||||
@ -1169,6 +1160,7 @@
|
||||
restart: _restart,
|
||||
rewind: _rewind,
|
||||
forward: _forward,
|
||||
seek: _seek,
|
||||
setVolume: _setVolume,
|
||||
toggleMute: _toggleMute,
|
||||
toggleCaptions: _toggleCaptions
|
||||
|
||||
@ -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
|
||||
// <input type="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
|
||||
@ -197,11 +206,11 @@
|
||||
}
|
||||
}
|
||||
input + label,
|
||||
input.inverted:checked + label {
|
||||
.inverted:checked + label {
|
||||
color: @control-color-inactive;
|
||||
}
|
||||
button,
|
||||
input.inverted + label,
|
||||
.inverted + label,
|
||||
input:checked + label {
|
||||
color: @control-color;
|
||||
}
|
||||
@ -210,18 +219,21 @@
|
||||
background: transparent;
|
||||
overflow: hidden;
|
||||
}
|
||||
input:focus + label,
|
||||
button:focus {
|
||||
.tab-focus();
|
||||
color: @control-color-focus;
|
||||
}
|
||||
|
||||
button:focus,
|
||||
button:hover,
|
||||
input:focus + label,
|
||||
input + label:hover {
|
||||
background: @control-bg-hover;
|
||||
color: @control-color-hover;
|
||||
}
|
||||
button:focus,
|
||||
input:focus + label {
|
||||
outline: 0;
|
||||
}
|
||||
.icon-exit-fullscreen,
|
||||
.icon-muted {
|
||||
.icon-muted,
|
||||
.icon-captions-on {
|
||||
display: none;
|
||||
}
|
||||
.player-time {
|
||||
@ -246,44 +258,93 @@
|
||||
height: @control-spacing;
|
||||
background: @progress-bg;
|
||||
|
||||
&-buffer,
|
||||
&-played {
|
||||
&-buffer[value],
|
||||
&-played[value],
|
||||
&-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;
|
||||
border: none;
|
||||
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
border: none;
|
||||
background: transparent;
|
||||
}
|
||||
&-buffer[value],
|
||||
&-played[value] {
|
||||
&::-webkit-progress-bar {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&::-webkit-progress-bar {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
// Inherit from currentColor;
|
||||
&::-webkit-progress-value {
|
||||
background: currentColor;
|
||||
}
|
||||
&::-moz-progress-bar {
|
||||
background: currentColor;
|
||||
}
|
||||
// Inherit from currentColor;
|
||||
&::-webkit-progress-value {
|
||||
background: currentColor;
|
||||
transition: width .1s ease;
|
||||
}
|
||||
&::-moz-progress-bar {
|
||||
background: currentColor;
|
||||
transition: width .1s ease;
|
||||
}
|
||||
}
|
||||
&-played {
|
||||
z-index: 2;
|
||||
}
|
||||
&-played[value] {
|
||||
cursor: pointer;
|
||||
z-index: 2;
|
||||
color: @progress-playing-bg;
|
||||
}
|
||||
&-buffer[value] {
|
||||
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 {
|
||||
outline: 0;
|
||||
}
|
||||
&::-moz-focus-outer {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// States
|
||||
@ -295,15 +356,6 @@
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
// Muted
|
||||
&.muted .player-controls .icon-muted {
|
||||
display: block;
|
||||
|
||||
& + svg {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Volume control
|
||||
// <input[type='range']> element
|
||||
// Specificity is for bootstrap compatibility
|
||||
@ -320,49 +372,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 +459,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 {
|
||||
|
||||
@ -30,12 +30,12 @@ $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-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
|
||||
@ -66,27 +66,37 @@ $bp-captions-large: 768px; // When captions jump to the larger font size
|
||||
@mixin tab-focus()
|
||||
{
|
||||
outline: thin dotted #000;
|
||||
outline-offset: 1px;
|
||||
outline-offset: 0;
|
||||
}
|
||||
|
||||
// Range styling
|
||||
// <input type="range"> styling
|
||||
// ---------------------------------------
|
||||
@mixin range-thumb()
|
||||
@mixin volume-thumb()
|
||||
{
|
||||
height: $range-thumb-height;
|
||||
width: $range-thumb-width;
|
||||
background: $range-thumb-bg;
|
||||
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;
|
||||
}
|
||||
@mixin range-track()
|
||||
@mixin volume-track()
|
||||
{
|
||||
height: $range-track-height;
|
||||
background: $range-track-bg;
|
||||
height: $volume-track-height;
|
||||
background: $volume-track-bg;
|
||||
border: 0;
|
||||
border-radius: ($volume-track-height / 2);
|
||||
}
|
||||
@mixin seek-thumb() {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
width: 2px;
|
||||
height: $control-spacing;
|
||||
}
|
||||
@mixin seek-track() {
|
||||
background: none;
|
||||
border: 0;
|
||||
border-radius: ($range-track-height / 2);
|
||||
}
|
||||
|
||||
// Font smoothing
|
||||
@ -203,11 +213,11 @@ $bp-captions-large: 768px; // When captions jump to the larger font size
|
||||
}
|
||||
}
|
||||
input + label,
|
||||
input.inverted:checked + label {
|
||||
.inverted:checked + label {
|
||||
color: $control-color-inactive;
|
||||
}
|
||||
button,
|
||||
input.inverted + label,
|
||||
.inverted + label,
|
||||
input:checked + label {
|
||||
color: $control-color;
|
||||
}
|
||||
@ -227,7 +237,8 @@ $bp-captions-large: 768px; // When captions jump to the larger font size
|
||||
color: $control-color-hover;
|
||||
}
|
||||
.icon-exit-fullscreen,
|
||||
.icon-muted {
|
||||
.icon-muted,
|
||||
.icon-captions-on {
|
||||
display: none;
|
||||
}
|
||||
.player-time {
|
||||
@ -252,8 +263,9 @@ $bp-captions-large: 768px; // When captions jump to the larger font size
|
||||
height: $control-spacing;
|
||||
background: $progress-bg;
|
||||
|
||||
&-buffer,
|
||||
&-played {
|
||||
&-buffer[value],
|
||||
&-played[value],
|
||||
&-seek[type=range] {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
@ -262,34 +274,82 @@ $bp-captions-large: 768px; // When captions jump to the larger font size
|
||||
margin: 0;
|
||||
vertical-align: top;
|
||||
|
||||
&[value] {
|
||||
-webkit-appearance: none;
|
||||
border: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
border: none;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&-buffer[value],
|
||||
&-played[value] {
|
||||
&::-webkit-progress-bar {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&::-webkit-progress-bar {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
// Inherit from currentColor;
|
||||
&::-webkit-progress-value {
|
||||
background: currentColor;
|
||||
}
|
||||
&::-moz-progress-bar {
|
||||
background: currentColor;
|
||||
}
|
||||
// Inherit from currentColor;
|
||||
&::-webkit-progress-value {
|
||||
background: currentColor;
|
||||
transition: width .1s ease;
|
||||
}
|
||||
&::-moz-progress-bar {
|
||||
background: currentColor;
|
||||
transition: width .1s ease;
|
||||
}
|
||||
}
|
||||
&-played {
|
||||
z-index: 2;
|
||||
}
|
||||
&-played[value] {
|
||||
cursor: pointer;
|
||||
z-index: 2;
|
||||
color: $progress-playing-bg;
|
||||
}
|
||||
&-buffer[value] {
|
||||
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 {
|
||||
@include seek-track();
|
||||
}
|
||||
&::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
@include seek-thumb();
|
||||
}
|
||||
|
||||
// Mozilla
|
||||
&::-moz-range-track {
|
||||
@include seek-track();
|
||||
}
|
||||
&::-moz-range-thumb {
|
||||
-moz-appearance: none;
|
||||
@include seek-thumb();
|
||||
}
|
||||
|
||||
// Microsoft
|
||||
&::-ms-track {
|
||||
color: transparent;
|
||||
@include seek-track();
|
||||
}
|
||||
&::-ms-fill-lower,
|
||||
&::-ms-fill-upper {
|
||||
@include seek-track();
|
||||
}
|
||||
&::-ms-thumb {
|
||||
@include seek-thumb();
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
&::-moz-focus-outer {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// States
|
||||
@ -301,15 +361,6 @@ $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
|
||||
// Specificity is for bootstrap compatibility
|
||||
@ -329,7 +380,7 @@ $bp-captions-large: 768px; // When captions jump to the larger font size
|
||||
}
|
||||
&::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
margin-top: -(($range-thumb-height - $range-track-height) / 2);
|
||||
margin-top: -(($volume-thumb-height - $volume-track-height) / 2);
|
||||
@include range-thumb();
|
||||
}
|
||||
|
||||
@ -343,10 +394,10 @@ $bp-captions-large: 768px; // When captions jump to the larger font size
|
||||
|
||||
// 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,
|
||||
@ -361,13 +412,13 @@ $bp-captions-large: 768px; // When captions jump to the larger font size
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -412,8 +463,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 {
|
||||
|
||||
@ -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>
|
||||
|
Before Width: | Height: | Size: 725 B |
10
src/sprite/icon-captions-off.svg
Normal file
10
src/sprite/icon-captions-off.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 747 B |
13
src/sprite/icon-captions-on.svg
Normal file
13
src/sprite/icon-captions-on.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
|
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 2.1 KiB |
|
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 2.1 KiB |
@ -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>
|
||||
|
Before Width: | Height: | Size: 1.2 KiB |
10
src/sprite/icon-restart.svg
Normal file
10
src/sprite/icon-restart.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
Reference in New Issue
Block a user