Compare commits
50 Commits
Author | SHA1 | Date | |
---|---|---|---|
1ecbec4044 | |||
ab329b99df | |||
54af43dd75 | |||
188a2e72eb | |||
b7a14be2ac | |||
c99f20d5d8 | |||
5b968c97f4 | |||
d538cdcdf6 | |||
cad142fe85 | |||
b18ed03384 | |||
6a0b3dc823 | |||
402c45ee2b | |||
67f19166ac | |||
32b7b6b886 | |||
96df8fbc85 | |||
e742527e65 | |||
f426af6e9e | |||
aea86b6124 | |||
ce51344269 | |||
7d0311fd64 | |||
89e000f669 | |||
f341f1264d | |||
c687b867e7 | |||
4ee31ba661 | |||
a9126a4c82 | |||
6b70c4b49a | |||
d8fb876c81 | |||
73e6ad610f | |||
eee7553d09 | |||
130b5ebedf | |||
dae5fb9785 | |||
31a0eb8d14 | |||
b8b611fbb6 | |||
a285fcc4ec | |||
4fda65c862 | |||
a8cea7b5c9 | |||
01bdcc2b01 | |||
812d2d33f2 | |||
a59073c5ca | |||
7edc3ccd53 | |||
b217e23880 | |||
053b6c2e3f | |||
0d426ca479 | |||
a327056789 | |||
b006b73c69 | |||
3127cea1b2 | |||
a965d8a893 | |||
173e651e3f | |||
fa5cb828c0 | |||
5978810b7f |
4
.gitignore
vendored
@ -4,4 +4,6 @@ node_modules
|
||||
.DS_Store
|
||||
aws.json
|
||||
docs/index.dev.html
|
||||
*.mp4
|
||||
*.mp4
|
||||
notes.txt
|
||||
npm-debug.log
|
||||
|
21
changelog.md
@ -1,5 +1,26 @@
|
||||
# Changelog
|
||||
|
||||
## v1.5.11
|
||||
- iOS embed bug fixes (fixes #166)
|
||||
- Hide IE/Edge <input type='range'> tooltip (since we have a styled one) (fixes #160)
|
||||
- SASS bug fix for default values (fixes #158)
|
||||
|
||||
## v1.5.9 + v1.5.10
|
||||
- NPM bug fixes
|
||||
|
||||
## v1.5.8
|
||||
- Fix for touch device seek tooltip
|
||||
- Seek improvements
|
||||
|
||||
## v1.5.7
|
||||
- Fix for control tooltips always showing
|
||||
|
||||
## v1.5.6
|
||||
- Seek tooltip (option for tooltips changed, please check docs)
|
||||
- SASS compile error fixes (fixes #148)
|
||||
- Fullscreen fixes for controls not always hiding/showing (fixes #149)
|
||||
- Screen reader icon fixes (title was being read twice due to the tooltip/hidden label)
|
||||
|
||||
## v1.5.5
|
||||
- Fixed controls.md example
|
||||
- Bug fix for docs error page
|
||||
|
10
controls.md
@ -46,16 +46,17 @@ You can include only the controls you need when specifying custom html.
|
||||
This is an example `html` option with all controls.
|
||||
|
||||
```javascript
|
||||
["<div class='plyr__controls'>",
|
||||
var controls = ["<div class='plyr__controls'>",
|
||||
"<div class='plyr__progress'>",
|
||||
"<label for='seek{id}' class='plyr__sr-only'>Seek</label>",
|
||||
"<input id='seek{id}' class='plyr__progress--seek' type='range' min='0' max='100' step='0.5' value='0' data-plyr='seek'>",
|
||||
"<input id='seek{id}' class='plyr__progress--seek' type='range' min='0' max='100' step='0.1' value='0' data-plyr='seek'>",
|
||||
"<progress class='plyr__progress--played' max='100' value='0'>",
|
||||
"<span>0</span>% played",
|
||||
"</progress>",
|
||||
"<progress class='plyr__progress--buffer' max='100' value='0'>",
|
||||
"<span>0</span>% buffered",
|
||||
"</progress>",
|
||||
"<span class='plyr__tooltip'>00:00</span>",
|
||||
"</div>",
|
||||
"<span class='plyr__controls--left'>",
|
||||
"<button type='button' data-plyr='restart'>",
|
||||
@ -107,4 +108,9 @@ This is an example `html` option with all controls.
|
||||
"</button>",
|
||||
"</span>",
|
||||
"</div>"].join("\n");
|
||||
|
||||
// Setup the player
|
||||
plyr.setup('.js-player', {
|
||||
html: controls
|
||||
});
|
||||
```
|
||||
|
2
dist/plyr.css
vendored
4
dist/plyr.js
vendored
2
dist/sprite.svg
vendored
@ -1 +1 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg"><symbol id="icon-captions-off" viewBox="0 0 18 18"><title>Captions Off</title><path d="M1 2c-.552 0-1 .448-1 1v12c0 .552.448 1 1 1h16c.552 0 1-.448 1-1V3c0-.552-.448-1-1-1H1zm1 12V4h14v10H2z"/></symbol><symbol id="icon-captions-on" viewBox="0 0 18 18"><title>Captions On</title><path d="M1 2c-.552 0-1 .448-1 1v12c0 .552.448 1 1 1h16c.552 0 1-.448 1-1V3c0-.552-.448-1-1-1H1zm1 12V4h14v10H2z"/><path d="M3 11h3v2H3zM12 11h3v2h-3zM7 11h4v2H7z"/></symbol><symbol id="icon-enter-fullscreen" viewBox="0 0 18 18"><title>Enter Fullscreen</title><path d="M10.3 9.7c.7.677 1.4 0 1.4 0L16 5.4V10h2V3c0-.6-.4-1-1-1h-7v2h4.6l-4.3 4.3s-.7.723 0 1.4z"/><path d="M7 2v2H2v10h14v-1h2v2c0 .6-.4 1-1 1H1c-.6 0-1-.4-1-1V3c0-.6.4-1 1-1h6z"/></symbol><symbol id="icon-exit-fullscreen" viewBox="0 0 18 18"><title>Exit Fullscreen</title><path d="M7.7 8.3c-.7-.677-1.4 0-1.4 0L2 12.6V8H0v7c0 .6.4 1 1 1h7v-2H3.4l4.3-4.3s.7-.723 0-1.4z"/><path d="M11 16v-2h5V4H2v1H0V3c0-.6.4-1 1-1h16c.6 0 1 .4 1 1v12c0 .6-.4 1-1 1h-6z"/></symbol><symbol id="icon-fast-forward" viewBox="0 0 18 18"><title>Fast Forward</title><path d="M17.57 8.246L7 2c-.552 0-1 .448-1 1v1.954L1 2c-.552 0-1 .448-1 1v12c0 .552.448 1 1 1l5-2.955V15c0 .552.448 1 1 1l10.57-6.246c.266-.158.43-.444.43-.754s-.164-.597-.43-.754zM6 10.722l-4 2.364V4.914l4 2.364v3.444zm2 2.364V4.914L14.915 9 8 13.086z"/></symbol><symbol id="icon-muted" viewBox="0 0 18 18"><title>Muted</title><path d="M9.214 2c-.11 0-.225.032-.334.1L4.832 4.91C4.75 4.97 4.65 5 4.55 5H.995C.446 5 0 5.448 0 6v6c0 .552.446 1 .996 1H4.55c.1 0 .2.03.282.09L8.88 15.9c.11.068.223.1.334.1.392 0 .747-.4.747-.95V2.95c0-.55-.354-.95-.746-.95zM7.97 12.834L5.58 11.177c-.166-.115-.364-.178-.566-.178H2.49c-.274 0-.497-.225-.497-.5v-3c0-.277.223-.5.498-.5h2.526c.202 0 .4-.063.566-.18L7.97 5.165v7.67zM14.934 8.8c-.086-1.75-1.514-2.992-2.507-3.65-.47-.312-1.094-.122-1.325.408l-.038.086c-.188.43-.045.94.336 1.194.706.473 1.586 1.247 1.624 2.065.032.676-.553 1.468-1.663 2.27-.397.288-.528.84-.284 1.275l.042.075c.266.475.866.624 1.3.312 1.74-1.25 2.586-2.606 2.516-4.037z"/><path d="M13.957 9.2c.086 1.747 1.514 2.99 2.507 3.648.47.312 1.094.122 1.325-.408l.037-.086c.188-.43.045-.94-.336-1.194-.705-.473-1.585-1.247-1.623-2.065-.032-.676.553-1.468 1.663-2.27.398-.288.53-.84.285-1.275l-.042-.075c-.266-.475-.866-.624-1.3-.312-1.74 1.25-2.586 2.606-2.516 4.037z"/></symbol><symbol id="icon-pause" viewBox="0 0 18 18"><title>Pause</title><path d="M2 4v10c0 2 2 2 2 2h2s2 0 2-2V4c0-2-2-2-2-2H4S2 2 2 4zm2 0h2v10H4V4zM10 4v10c0 2 2 2 2 2h2s2 0 2-2V4c0-2-2-2-2-2h-2s-2 0-2 2zm2 0h2v10h-2V4z"/></symbol><symbol id="icon-play" viewBox="0 0 18 18"><title>Play</title><path d="M5 4.914L11.915 9 5 13.086V4.914zM4 2c-.552 0-1 .448-1 1v12c0 .552.448 1 1 1l10.57-6.246c.266-.158.43-.444.43-.754s-.164-.597-.43-.754L4 2z"/></symbol><symbol id="icon-restart" viewBox="0 0 16 16"><path d="M7.7 1.2l.7 6.4 2.1-2.1c1.9 1.9 1.9 5.1 0 7-.9 1-2.2 1.5-3.5 1.5-1.3 0-2.6-.5-3.5-1.5-1.9-1.9-1.9-5.1 0-7 .6-.6 1.4-1.1 2.3-1.3l-.6-1.9C4 2.6 2.9 3.2 2 4.1-.7 6.8-.7 11.2 2 14c1.3 1.3 3.1 2 4.9 2 1.9 0 3.6-.7 4.9-2 2.7-2.7 2.7-7.1 0-9.9L14 1.9l-6.3-.7z"/></symbol><symbol id="icon-rewind" viewBox="0 0 18 21"><title>Rewind</title><path d="M.43 10.754L11 17c.552 0 1-.448 1-1v-1.954L17 17c.552 0 1-.448 1-1V4c0-.552-.448-1-1-1l-5 2.955V4c0-.552-.448-1-1-1L.43 9.246C.165 9.404 0 9.69 0 10s.164.597.43.754zM12 8.278l4-2.364v8.172l-4-2.364V8.278zm-2-2.364v8.172L3.085 10 10 5.914z"/></symbol><symbol id="icon-volume" viewBox="0 0 18 18"><title>Volume</title><path d="M10.214 2c-.11 0-.225.032-.334.1L5.832 4.91C5.75 4.97 5.65 5 5.55 5H1.995C1.446 5 1 5.448 1 6v6c0 .552.446 1 .996 1H5.55c.1 0 .2.03.282.09L9.88 15.9c.11.068.223.1.334.1.392 0 .747-.4.747-.95V2.95c0-.55-.354-.95-.746-.95zM8.97 12.834L6.58 11.177c-.166-.115-.364-.178-.566-.178H3.49c-.274 0-.497-.225-.497-.5v-3c0-.277.223-.5.498-.5h2.526c.202 0 .4-.063.566-.18L8.97 5.165v7.67zM16.934 8.8c-.086-1.75-1.514-2.992-2.507-3.65-.47-.312-1.094-.122-1.325.408l-.038.086c-.188.43-.045.94.336 1.194.706.473 1.586 1.247 1.624 2.065.032.676-.553 1.468-1.663 2.27-.397.288-.528.84-.284 1.275l.042.075c.266.475.866.624 1.3.312 1.74-1.25 2.586-2.606 2.516-4.037z"/></symbol></svg>
|
||||
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg"><symbol id="icon-captions-off" viewBox="0 0 18 18"><path d="M1 2c-.552 0-1 .448-1 1v12c0 .552.448 1 1 1h16c.552 0 1-.448 1-1V3c0-.552-.448-1-1-1H1zm1 12V4h14v10H2z"/></symbol><symbol id="icon-captions-on" viewBox="0 0 18 18"><path d="M1 2c-.552 0-1 .448-1 1v12c0 .552.448 1 1 1h16c.552 0 1-.448 1-1V3c0-.552-.448-1-1-1H1zm1 12V4h14v10H2z"/><path d="M3 11h3v2H3zM12 11h3v2h-3zM7 11h4v2H7z"/></symbol><symbol id="icon-enter-fullscreen" viewBox="0 0 18 18"><path d="M10.3 9.7c.7.677 1.4 0 1.4 0L16 5.4V10h2V3c0-.6-.4-1-1-1h-7v2h4.6l-4.3 4.3s-.7.723 0 1.4z"/><path d="M7 2v2H2v10h14v-1h2v2c0 .6-.4 1-1 1H1c-.6 0-1-.4-1-1V3c0-.6.4-1 1-1h6z"/></symbol><symbol id="icon-exit-fullscreen" viewBox="0 0 18 18"><path d="M7.7 8.3c-.7-.677-1.4 0-1.4 0L2 12.6V8H0v7c0 .6.4 1 1 1h7v-2H3.4l4.3-4.3s.7-.723 0-1.4z"/><path d="M11 16v-2h5V4H2v1H0V3c0-.6.4-1 1-1h16c.6 0 1 .4 1 1v12c0 .6-.4 1-1 1h-6z"/></symbol><symbol id="icon-fast-forward" viewBox="0 0 18 18"><path d="M17.57 8.246L7 2c-.552 0-1 .448-1 1v1.954L1 2c-.552 0-1 .448-1 1v12c0 .552.448 1 1 1l5-2.955V15c0 .552.448 1 1 1l10.57-6.246c.266-.158.43-.444.43-.754s-.164-.597-.43-.754zM6 10.722l-4 2.364V4.914l4 2.364v3.444zm2 2.364V4.914L14.915 9 8 13.086z"/></symbol><symbol id="icon-muted" viewBox="0 0 18 18"><path d="M9.214 2c-.11 0-.225.032-.334.1L4.832 4.91C4.75 4.97 4.65 5 4.55 5H.995C.446 5 0 5.448 0 6v6c0 .552.446 1 .996 1H4.55c.1 0 .2.03.282.09L8.88 15.9c.11.068.223.1.334.1.392 0 .747-.4.747-.95V2.95c0-.55-.354-.95-.746-.95zM7.97 12.834L5.58 11.177c-.166-.115-.364-.178-.566-.178H2.49c-.274 0-.497-.225-.497-.5v-3c0-.277.223-.5.498-.5h2.526c.202 0 .4-.063.566-.18L7.97 5.165v7.67zM14.934 8.8c-.086-1.75-1.514-2.992-2.507-3.65-.47-.312-1.094-.122-1.325.408l-.038.086c-.188.43-.045.94.336 1.194.706.473 1.586 1.247 1.624 2.065.032.676-.553 1.468-1.663 2.27-.397.288-.528.84-.284 1.275l.042.075c.266.475.866.624 1.3.312 1.74-1.25 2.586-2.606 2.516-4.037z"/><path d="M13.957 9.2c.086 1.747 1.514 2.99 2.507 3.648.47.312 1.094.122 1.325-.408l.037-.086c.188-.43.045-.94-.336-1.194-.705-.473-1.585-1.247-1.623-2.065-.032-.676.553-1.468 1.663-2.27.398-.288.53-.84.285-1.275l-.042-.075c-.266-.475-.866-.624-1.3-.312-1.74 1.25-2.586 2.606-2.516 4.037z"/></symbol><symbol id="icon-pause" viewBox="0 0 18 18"><path d="M2 4v10c0 2 2 2 2 2h2s2 0 2-2V4c0-2-2-2-2-2H4S2 2 2 4zm2 0h2v10H4V4zM10 4v10c0 2 2 2 2 2h2s2 0 2-2V4c0-2-2-2-2-2h-2s-2 0-2 2zm2 0h2v10h-2V4z"/></symbol><symbol id="icon-play" viewBox="0 0 18 18"><path d="M5 4.914L11.915 9 5 13.086V4.914zM4 2c-.552 0-1 .448-1 1v12c0 .552.448 1 1 1l10.57-6.246c.266-.158.43-.444.43-.754s-.164-.597-.43-.754L4 2z"/></symbol><symbol id="icon-restart" viewBox="0 0 16 16"><path d="M7.7 1.2l.7 6.4 2.1-2.1c1.9 1.9 1.9 5.1 0 7-.9 1-2.2 1.5-3.5 1.5-1.3 0-2.6-.5-3.5-1.5-1.9-1.9-1.9-5.1 0-7 .6-.6 1.4-1.1 2.3-1.3l-.6-1.9C4 2.6 2.9 3.2 2 4.1-.7 6.8-.7 11.2 2 14c1.3 1.3 3.1 2 4.9 2 1.9 0 3.6-.7 4.9-2 2.7-2.7 2.7-7.1 0-9.9L14 1.9l-6.3-.7z"/></symbol><symbol id="icon-rewind" viewBox="0 0 18 21"><path d="M.43 10.754L11 17c.552 0 1-.448 1-1v-1.954L17 17c.552 0 1-.448 1-1V4c0-.552-.448-1-1-1l-5 2.955V4c0-.552-.448-1-1-1L.43 9.246C.165 9.404 0 9.69 0 10s.164.597.43.754zM12 8.278l4-2.364v8.172l-4-2.364V8.278zm-2-2.364v8.172L3.085 10 10 5.914z"/></symbol><symbol id="icon-volume" viewBox="0 0 18 18"><path d="M10.214 2c-.11 0-.225.032-.334.1L5.832 4.91C5.75 4.97 5.65 5 5.55 5H1.995C1.446 5 1 5.448 1 6v6c0 .552.446 1 .996 1H5.55c.1 0 .2.03.282.09L9.88 15.9c.11.068.223.1.334.1.392 0 .747-.4.747-.95V2.95c0-.55-.354-.95-.746-.95zM8.97 12.834L6.58 11.177c-.166-.115-.364-.178-.566-.178H3.49c-.274 0-.497-.225-.497-.5v-3c0-.277.223-.5.498-.5h2.526c.202 0 .4-.063.566-.18L8.97 5.165v7.67zM16.934 8.8c-.086-1.75-1.514-2.992-2.507-3.65-.47-.312-1.094-.122-1.325.408l-.038.086c-.188.43-.045.94.336 1.194.706.473 1.586 1.247 1.624 2.065.032.676-.553 1.468-1.663 2.27-.397.288-.528.84-.284 1.275l.042.075c.266.475.866.624 1.3.312 1.74-1.25 2.586-2.606 2.516-4.037z"/></symbol></svg>
|
Before Width: | Height: | Size: 4.3 KiB After Width: | Height: | Size: 4.0 KiB |
2
docs/dist/docs.css
vendored
2
docs/dist/docs.js
vendored
@ -1 +1 @@
|
||||
"document"in self&&("classList"in document.createElement("_")?!function(){"use strict";var e=document.createElement("_");if(e.classList.add("c1","c2"),!e.classList.contains("c2")){var t=function(e){var t=DOMTokenList.prototype[e];DOMTokenList.prototype[e]=function(e){var i,s=arguments.length;for(i=0;s>i;i++)e=arguments[i],t.call(this,e)}};t("add"),t("remove")}if(e.classList.toggle("c3",!1),e.classList.contains("c3")){var i=DOMTokenList.prototype.toggle;DOMTokenList.prototype.toggle=function(e,t){return 1 in arguments&&!this.contains(e)==!t?t:i.call(this,e)}}e=null}():!function(e){"use strict";if("Element"in e){var t="classList",i="prototype",s=e.Element[i],n=Object,o=String[i].trim||function(){return this.replace(/^\s+|\s+$/g,"")},r=Array[i].indexOf||function(e){for(var t=0,i=this.length;i>t;t++)if(t in this&&this[t]===e)return t;return-1},a=function(e,t){this.name=e,this.code=DOMException[e],this.message=t},c=function(e,t){if(""===t)throw new a("SYNTAX_ERR","An invalid or illegal string was specified");if(/\s/.test(t))throw new a("INVALID_CHARACTER_ERR","String contains an invalid character");return r.call(e,t)},l=function(e){for(var t=o.call(e.getAttribute("class")||""),i=t?t.split(/\s+/):[],s=0,n=i.length;n>s;s++)this.push(i[s]);this._updateClassName=function(){e.setAttribute("class",this.toString())}},u=l[i]=[],d=function(){return new l(this)};if(a[i]=Error[i],u.item=function(e){return this[e]||null},u.contains=function(e){return e+="",-1!==c(this,e)},u.add=function(){var e,t=arguments,i=0,s=t.length,n=!1;do e=t[i]+"",-1===c(this,e)&&(this.push(e),n=!0);while(++i<s);n&&this._updateClassName()},u.remove=function(){var e,t,i=arguments,s=0,n=i.length,o=!1;do for(e=i[s]+"",t=c(this,e);-1!==t;)this.splice(t,1),o=!0,t=c(this,e);while(++s<n);o&&this._updateClassName()},u.toggle=function(e,t){e+="";var i=this.contains(e),s=i?t!==!0&&"remove":t!==!1&&"add";return s&&this[s](e),t===!0||t===!1?t:!i},u.toString=function(){return this.join(" ")},n.defineProperty){var p={get:d,enumerable:!0,configurable:!0};try{n.defineProperty(s,t,p)}catch(h){-2146823252===h.number&&(p.enumerable=!1,n.defineProperty(s,t,p))}}else n[i].__defineGetter__&&s.__defineGetter__(t,d)}}(self)),plyr.setup(".js-media-player",{debug:!0,title:"Video demo",tooltips:!0,captions:{defaultActive:!0}}),shr.setup({count:{classname:"btn__count"}}),function(){function e(e,t,i){if(e)if(e.classList)e.classList[i?"add":"remove"](t);else{var s=(" "+e.className+" ").replace(/\s+/g," ").replace(" "+t+" ","");e.className=s+(i?" "+t:"")}}function t(t){if(t in s&&t!=n&&(n.length||t!=s.video)){var o=document.querySelector(".js-media-player").plyr;switch(t){case s.video:o.source({type:"video",title:"View From A Blue Moon",sources:[{src:"https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.mp4",type:"video/mp4"},{src:"https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.webm",type:"video/webm"}],poster:"https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.jpg",tracks:[{kind:"captions",label:"English",srclang:"en",src:"https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.vtt","default":!0}]});break;case s.audio:o.source({type:"audio",title:"Kishi Bashi – “It All Began With A Burst”",sources:[{src:"https://cdn.selz.com/plyr/1.5/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3",type:"audio/mp3"},{src:"https://cdn.selz.com/plyr/1.5/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg",type:"audio/ogg"}]});break;case s.youtube:o.source({type:"video",title:"View From A Blue Moon",sources:[{src:"bTqVqk7FSmY",type:"youtube"}]});break;case s.vimeo:o.source({type:"video",title:"View From A Blue Moon",sources:[{src:"143418951",type:"vimeo"}]})}n=t;for(var r=i.length-1;r>=0;r--)e(i[r].parentElement,"active",!1);e(document.querySelector('[data-source="'+t+'"]').parentElement,"active",!0)}}for(var i=document.querySelectorAll("[data-source]"),s={video:"video",audio:"audio",youtube:"youtube",vimeo:"vimeo"},n=window.location.hash.replace("#",""),o=window.history&&window.history.pushState,r=i.length-1;r>=0;r--)i[r].addEventListener("click",function(){var e=this.getAttribute("data-source");t(e),o&&history.pushState({type:e},"","#"+e)});if(window.addEventListener("popstate",function(e){e.state&&"type"in e.state&&t(e.state.type)}),o){var a=!n.length;a&&(n=s.video),n in s&&history.replaceState({type:n},"",a?"":"#"+n),a||t(n)}}(),document.domain.indexOf("plyr.io")>-1&&(!function(e,t,i,s,n,o,r){e.GoogleAnalyticsObject=n,e[n]=e[n]||function(){(e[n].q=e[n].q||[]).push(arguments)},e[n].l=1*new Date,o=t.createElement(i),r=t.getElementsByTagName(i)[0],o.async=1,o.src=s,r.parentNode.insertBefore(o,r)}(window,document,"script","//www.google-analytics.com/analytics.js","ga"),ga("create","UA-40881672-11","auto"),ga("send","pageview"));
|
||||
"document"in self&&("classList"in document.createElement("_")?!function(){"use strict";var e=document.createElement("_");if(e.classList.add("c1","c2"),!e.classList.contains("c2")){var t=function(e){var t=DOMTokenList.prototype[e];DOMTokenList.prototype[e]=function(e){var i,n=arguments.length;for(i=0;n>i;i++)e=arguments[i],t.call(this,e)}};t("add"),t("remove")}if(e.classList.toggle("c3",!1),e.classList.contains("c3")){var i=DOMTokenList.prototype.toggle;DOMTokenList.prototype.toggle=function(e,t){return 1 in arguments&&!this.contains(e)==!t?t:i.call(this,e)}}e=null}():!function(e){"use strict";if("Element"in e){var t="classList",i="prototype",n=e.Element[i],s=Object,o=String[i].trim||function(){return this.replace(/^\s+|\s+$/g,"")},r=Array[i].indexOf||function(e){for(var t=0,i=this.length;i>t;t++)if(t in this&&this[t]===e)return t;return-1},a=function(e,t){this.name=e,this.code=DOMException[e],this.message=t},c=function(e,t){if(""===t)throw new a("SYNTAX_ERR","An invalid or illegal string was specified");if(/\s/.test(t))throw new a("INVALID_CHARACTER_ERR","String contains an invalid character");return r.call(e,t)},l=function(e){for(var t=o.call(e.getAttribute("class")||""),i=t?t.split(/\s+/):[],n=0,s=i.length;s>n;n++)this.push(i[n]);this._updateClassName=function(){e.setAttribute("class",this.toString())}},u=l[i]=[],d=function(){return new l(this)};if(a[i]=Error[i],u.item=function(e){return this[e]||null},u.contains=function(e){return e+="",-1!==c(this,e)},u.add=function(){var e,t=arguments,i=0,n=t.length,s=!1;do e=t[i]+"",-1===c(this,e)&&(this.push(e),s=!0);while(++i<n);s&&this._updateClassName()},u.remove=function(){var e,t,i=arguments,n=0,s=i.length,o=!1;do for(e=i[n]+"",t=c(this,e);-1!==t;)this.splice(t,1),o=!0,t=c(this,e);while(++n<s);o&&this._updateClassName()},u.toggle=function(e,t){e+="";var i=this.contains(e),n=i?t!==!0&&"remove":t!==!1&&"add";return n&&this[n](e),t===!0||t===!1?t:!i},u.toString=function(){return this.join(" ")},s.defineProperty){var p={get:d,enumerable:!0,configurable:!0};try{s.defineProperty(n,t,p)}catch(h){-2146823252===h.number&&(p.enumerable=!1,s.defineProperty(n,t,p))}}else s[i].__defineGetter__&&n.__defineGetter__(t,d)}}(self)),plyr.setup(".js-media-player",{debug:!0,title:"Video demo",tooltips:{controls:!0},captions:{defaultActive:!0}}),shr.setup({count:{classname:"btn__count"}}),function(){function e(e,t,i){if(e)if(e.classList)e.classList[i?"add":"remove"](t);else{var n=(" "+e.className+" ").replace(/\s+/g," ").replace(" "+t+" ","");e.className=n+(i?" "+t:"")}}function t(t,o){if(t in n&&(o||t!=s)&&(s.length||t!=n.video)){var r=document.querySelector(".js-media-player").plyr;switch(t){case n.video:r.source({type:"video",title:"View From A Blue Moon",sources:[{src:"https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.mp4",type:"video/mp4"},{src:"https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.webm",type:"video/webm"}],poster:"https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.jpg",tracks:[{kind:"captions",label:"English",srclang:"en",src:"https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.en.vtt","default":!0}]});break;case n.audio:r.source({type:"audio",title:"Kishi Bashi – “It All Began With A Burst”",sources:[{src:"https://cdn.selz.com/plyr/1.5/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3",type:"audio/mp3"},{src:"https://cdn.selz.com/plyr/1.5/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg",type:"audio/ogg"}]});break;case n.youtube:r.source({type:"video",title:"View From A Blue Moon",sources:[{src:"bTqVqk7FSmY",type:"youtube"}]});break;case n.vimeo:r.source({type:"video",title:"View From A Blue Moon",sources:[{src:"143418951",type:"vimeo"}]})}s=t;for(var a=i.length-1;a>=0;a--)e(i[a].parentElement,"active",!1);e(document.querySelector('[data-source="'+t+'"]').parentElement,"active",!0)}}for(var i=document.querySelectorAll("[data-source]"),n={video:"video",audio:"audio",youtube:"youtube",vimeo:"vimeo"},s=window.location.hash.replace("#",""),o=window.history&&window.history.pushState,r=i.length-1;r>=0;r--)i[r].addEventListener("click",function(){var e=this.getAttribute("data-source");t(e),o&&history.pushState({type:e},"","#"+e)});if(window.addEventListener("popstate",function(e){e.state&&"type"in e.state&&t(e.state.type)}),o){var a=!s.length;a&&(s=n.video),s in n&&history.replaceState({type:s},"",a?"":"#"+s),s!==n.video&&t(s,!0)}}(),document.domain.indexOf("plyr.io")>-1&&(!function(e,t,i,n,s,o,r){e.GoogleAnalyticsObject=s,e[s]=e[s]||function(){(e[s].q=e[s].q||[]).push(arguments)},e[s].l=1*new Date,o=t.createElement(i),r=t.getElementsByTagName(i)[0],o.async=1,o.src=n,r.parentNode.insertBefore(o,r)}(window,document,"script","//www.google-analytics.com/analytics.js","ga"),ga("create","UA-40881672-11","auto"),ga("send","pageview"));
|
@ -58,7 +58,7 @@
|
||||
<source src="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.webm" type="video/webm">
|
||||
|
||||
<!-- Text track file -->
|
||||
<track kind="captions" label="English" srclang="en" src="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.vtt" default>
|
||||
<track kind="captions" label="English" srclang="en" src="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.en.vtt" default>
|
||||
|
||||
<!-- Fallback for browsers that don't support the <video> element -->
|
||||
<a href="https://cdn.selz.com/plyr/1.0/movie.mp4">Download</a>
|
||||
|
@ -6,11 +6,13 @@
|
||||
|
||||
// Setup the player
|
||||
plyr.setup('.js-media-player', {
|
||||
debug: true,
|
||||
title: 'Video demo',
|
||||
tooltips: true,
|
||||
debug: true,
|
||||
title: 'Video demo',
|
||||
tooltips: {
|
||||
controls: true
|
||||
},
|
||||
captions: {
|
||||
defaultActive: true
|
||||
defaultActive: true
|
||||
}
|
||||
});
|
||||
|
||||
@ -56,14 +58,20 @@ shr.setup({
|
||||
// On load
|
||||
if(historySupport) {
|
||||
var video = !currentType.length;
|
||||
|
||||
// If there's no current type set, assume video
|
||||
if(video) {
|
||||
currentType = types.video;
|
||||
}
|
||||
|
||||
// Replace current history state
|
||||
if(currentType in types) {
|
||||
history.replaceState({ 'type': currentType }, '', (video ? '' : '#' + currentType));
|
||||
}
|
||||
if(!video) {
|
||||
newSource(currentType);
|
||||
|
||||
// If it's not video, load the source
|
||||
if(currentType !== types.video) {
|
||||
newSource(currentType, true);
|
||||
}
|
||||
}
|
||||
|
||||
@ -81,10 +89,9 @@ shr.setup({
|
||||
}
|
||||
|
||||
// Set a new source
|
||||
function newSource(type) {
|
||||
|
||||
function newSource(type, init) {
|
||||
// Bail if new type isn't known, it's the current type, or current type is empty (video is default) and new type is video
|
||||
if(!(type in types) || type == currentType || (!currentType.length && type == types.video)) {
|
||||
if(!(type in types) || (!init && type == currentType) || (!currentType.length && type == types.video)) {
|
||||
return;
|
||||
}
|
||||
|
||||
@ -109,7 +116,7 @@ shr.setup({
|
||||
kind: 'captions',
|
||||
label: 'English',
|
||||
srclang:'en',
|
||||
src: 'https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.vtt',
|
||||
src: 'https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.en.vtt',
|
||||
default: true
|
||||
}]
|
||||
});
|
||||
|
@ -50,7 +50,12 @@ video,
|
||||
}
|
||||
.plyr__progress {
|
||||
border-radius: @border-radius-base @border-radius-base 0 0;
|
||||
overflow: hidden;
|
||||
|
||||
progress,
|
||||
[type='range'] {
|
||||
border-radius: @border-radius-base @border-radius-base 0 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
24
package.json
@ -1,9 +1,9 @@
|
||||
{
|
||||
"name": "plyr",
|
||||
"version": "1.5.5",
|
||||
"description": "A simple HTML5 media player using custom controls",
|
||||
"version": "1.5.14",
|
||||
"description": "A simple, accessible and customizable HTML5, YouTube and Vimeo media player",
|
||||
"homepage": "http://plyr.io",
|
||||
"main": "gulpfile.js",
|
||||
"main": "src/js/plyr.js",
|
||||
"dependencies": {},
|
||||
"devDependencies": {
|
||||
"gulp": "^3.9.0",
|
||||
@ -24,9 +24,6 @@
|
||||
"gulp-util": "^3.0.7",
|
||||
"run-sequence": "^1.1.5"
|
||||
},
|
||||
"scripts": {
|
||||
"preinstall": "npm install -g gulp"
|
||||
},
|
||||
"keywords": [
|
||||
"HTML5 Video",
|
||||
"HTML5 Audio",
|
||||
@ -36,8 +33,15 @@
|
||||
"type": "git",
|
||||
"url": "git://github.com/selz/plyr.git"
|
||||
},
|
||||
"authors": [
|
||||
"Sam Potts <me@sampotts.me>"
|
||||
],
|
||||
"license": "MIT"
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/selz/plyr/issues"
|
||||
},
|
||||
"directories": {
|
||||
"doc": "docs"
|
||||
},
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"author": "Sam Potts <sam@selz.com> (selz.com)"
|
||||
}
|
||||
|
77
readme.md
@ -40,13 +40,22 @@ If you have any cool ideas or features, please let me know by [creating an issue
|
||||
|
||||
Check `docs/index.html` and `docs/dist/docs.js` for an example setup.
|
||||
|
||||
**Heads up:** the example `index.html` file needs to be served from a webserver (such as Apache, Nginx, IIS or similar) unless you change the file sources to include http or https. e.g. change `//cdn.plyr.io/1.5.5/plyr.js` to `https://cdn.plyr.io/1.5.5/plyr.js`
|
||||
**Heads up:** the example `index.html` file needs to be served from a webserver (such as Apache, Nginx, IIS or similar) unless you change the file sources to include http or https. e.g. change `//cdn.plyr.io/1.5.14/plyr.js` to `https://cdn.plyr.io/1.5.14/plyr.js`
|
||||
|
||||
### Node Package Manager (NPM)
|
||||
Using NPM, you can grab Plyr:
|
||||
```
|
||||
npm install plyr
|
||||
```
|
||||
[https://www.npmjs.com/package/plyr](https://www.npmjs.com/package/plyr)
|
||||
|
||||
### Bower
|
||||
If bower is your thang, you can grab Plyr using:
|
||||
```
|
||||
bower install plyr
|
||||
```
|
||||
[http://bower.io/search/?q=plyr](http://bower.io/search/?q=plyr)
|
||||
|
||||
More info on setting up dependencies can be found in the [Bower Docs](http://bower.io/docs/creating-packages/#maintaining-dependencies)
|
||||
|
||||
### Ember
|
||||
@ -60,11 +69,11 @@ More info is on [npm](https://www.npmjs.com/package/ember-cli-plyr) and [GitHub]
|
||||
If you want to use our CDN, you can use the following:
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="https://cdn.plyr.io/1.5.5/plyr.css">
|
||||
<script src="https://cdn.plyr.io/1.5.5/plyr.js"></script>
|
||||
<link rel="stylesheet" href="https://cdn.plyr.io/1.5.14/plyr.css">
|
||||
<script src="https://cdn.plyr.io/1.5.14/plyr.js"></script>
|
||||
```
|
||||
|
||||
You can also access the `sprite.svg` file at `https://cdn.plyr.io/1.5.5/sprite.svg`.
|
||||
You can also access the `sprite.svg` file at `https://cdn.plyr.io/1.5.14/sprite.svg`.
|
||||
|
||||
### CSS & Styling
|
||||
If you want to use the default css, add the `plyr.css` file from `/dist` into your head, or even better use `plyr.less` or `plyr.sass` file included in `/src` in your build to save a request.
|
||||
@ -96,7 +105,7 @@ The SVG sprite for the controls icons is loaded in by AJAX to help with performa
|
||||
```
|
||||
|
||||
If you're using the `<base>` tag on your site, you may need to use something like this:
|
||||
[https://gist.github.com/leonderijke/c5cf7c5b2e424c0061d2](svgfixer.js)
|
||||
[svgfixer.js](https://gist.github.com/leonderijke/c5cf7c5b2e424c0061d2)
|
||||
|
||||
More info on SVG sprites here:
|
||||
[http://css-tricks.com/svg-sprites-use-better-icon-fonts/](http://css-tricks.com/svg-sprites-use-better-icon-fonts/)
|
||||
@ -148,13 +157,17 @@ For YouTube and Vimeo, Plyr uses the standard YouTube API markup (an empty `<div
|
||||
</div>
|
||||
```
|
||||
|
||||
|
||||
#### Cross Origin (CORS)
|
||||
You'll notice the `crossorigin` attribute on the example `<video>` and `<audio>` elements. This is because the media is loaded from another domain. If your media is hosted on another domain, you may need to add this attribute.
|
||||
|
||||
More info on CORS here:
|
||||
[https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS)
|
||||
|
||||
### Captions
|
||||
WebVTT captions are supported. To add a caption track, check the HTML example above and look for the `<track>` element.
|
||||
|
||||
Be sure to [validate your caption files](https://quuz.org/webvtt/)
|
||||
|
||||
### JavaScript
|
||||
|
||||
#### Quick setup
|
||||
@ -162,7 +175,7 @@ More info on CORS here:
|
||||
Here's an example of a default setup:
|
||||
|
||||
```html
|
||||
<script src="https://cdn.plyr.io/1.5.5/plyr.js"></script>
|
||||
<script src="https://cdn.plyr.io/1.5.14/plyr.js"></script>
|
||||
<script>plyr.setup();</script>
|
||||
```
|
||||
|
||||
@ -192,7 +205,7 @@ plyr.setup(options);
|
||||
|
||||
#### Options
|
||||
|
||||
Options must be passed as an object to the `setup()` method as above.
|
||||
Options must be passed as an object to the `setup()` method as above or as JSON in `data-plyr` attribute on each of your target elements (e.g. data-plyr='{ title: "testing" }') - note the single quotes encapsulating the JSON.
|
||||
|
||||
<table class="table" width="100%">
|
||||
<thead>
|
||||
@ -240,6 +253,12 @@ Options must be passed as an object to the `setup()` method as above.
|
||||
<td><code>false</code></td>
|
||||
<td>Display debugging information on what Plyr is doing.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>autoplay</code></td>
|
||||
<td>Boolean</td>
|
||||
<td><code>false</code></td>
|
||||
<td>Autoplay the media on load. This is generally advised against on UX grounds. It is also disabled on iOS (an Apple limitation).</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>seekTime</code></td>
|
||||
<td>Number</td>
|
||||
@ -260,11 +279,21 @@ Options must be passed as an object to the `setup()` method as above.
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>tooltips</code></td>
|
||||
<td>Boolean</td>
|
||||
<td><code>false</code></td>
|
||||
<td>Display control labels as tooltips on :hover & :focus (by default, the labels are screen reader only).</td>
|
||||
<td>Object</td>
|
||||
<td><code>{ controls: false, seek: true }</code></td>
|
||||
<td>
|
||||
<strong>controls</strong>: Display control labels as tooltips on :hover & :focus (by default, the labels are screen reader only).
|
||||
<br><br>
|
||||
<strong>seek</strong>: Display a seek tooltip to indicate on click where the media would seek to.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<tr>
|
||||
<td><code>duration</code></td>
|
||||
<td>Number</td>
|
||||
<td><code>null</code></td>
|
||||
<td>Specify a custom duration.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>displayDuration</code></td>
|
||||
<td>Boolean</td>
|
||||
<td><code>true</code></td>
|
||||
@ -451,16 +480,23 @@ Here's a list of the methods supported:
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>source(...)</code></td>
|
||||
<td>Array or undefined</td>
|
||||
<td>Object or undefined</td>
|
||||
<td>
|
||||
Get/Set the media source.
|
||||
<br><br>
|
||||
<strong>string</strong><br>
|
||||
<code>.source("/path/to/video.mp4")</code><br>
|
||||
This will set the <code>src</code> attribute on the <code>video</code> or <code>audio</code> element.
|
||||
<br><br>
|
||||
<strong>array</strong><br>
|
||||
<code>.source([{ src: "/path/to/video.webm", type: "video/webm", ...more attributes... }, { src: "/path/to/video.mp4", type: "video/mp4", ...more attributes... }])`</code><br>
|
||||
<pre><code>.source([
|
||||
{
|
||||
src: "/path/to/video.webm",
|
||||
type: "video/webm",
|
||||
...more attributes...
|
||||
},
|
||||
{
|
||||
src: "/path/to/video.mp4",
|
||||
type: "video/mp4",
|
||||
...more attributes...
|
||||
}
|
||||
])`</code></pre><br>
|
||||
This will inject a child `source` element for every element in the array with the specified attributes. `src` is the only required attribute although adding `type` is recommended as it helps the browser decide which file to download and play.
|
||||
<br><br>
|
||||
<strong>YouTube</strong><br>
|
||||
@ -583,8 +619,8 @@ Some more details on the object parameters
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>sources</code></td>
|
||||
<td>Array or String</td>
|
||||
<td>This is an array of sources or optionally a string for embedded players (YouTube and Vimeo). `type` is also optional for YouTube and Vimeo when specifying an array. For YouTube and Vimeo media, only the video ID must be passed as the source as shown above. The keys of this object are mapped directly to HTML attributes so more can be added to the object if required.</td>
|
||||
<td>Array</td>
|
||||
<td>This is an array of sources. <code>type</code> is optional for YouTube and Vimeo when specifying an array. For YouTube and Vimeo media, only the video ID must be passed as the source as shown above. The keys of this object are mapped directly to HTML attributes so more can be added to the object if required.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>poster</code></td>
|
||||
@ -802,6 +838,7 @@ Plyr is developed by [@sam_potts](https://twitter.com/sam_potts) / [sampotts.me]
|
||||
- [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)
|
||||
- [The Treehouse Show #131](https://teamtreehouse.com/library/episode-131-origami-react-responsive-hero-images)
|
||||
- [noupe.com](http://www.noupe.com/design/html5-plyr-is-a-responsive-and-accessible-video-player-94389.html)
|
||||
|
||||
## Used by
|
||||
- [Selz.com](https://selz.com)
|
||||
|
1051
src/js/plyr.js
@ -7,57 +7,58 @@
|
||||
// -------------------------------
|
||||
|
||||
// Colors
|
||||
@plyr-blue: #3498DB;
|
||||
@plyr-gray-dark: #343F4A;
|
||||
@plyr-gray: #565D64;
|
||||
@plyr-gray-light: #6B7D86;
|
||||
@plyr-gray-lighter: #CBD0D3;
|
||||
@plyr-off-white: #D6DADD;
|
||||
@plyr-blue: #3498DB;
|
||||
@plyr-gray-dark: #343F4A;
|
||||
@plyr-gray: #565D64;
|
||||
@plyr-gray-light: #6B7D86;
|
||||
@plyr-gray-lighter: #CBD0D3;
|
||||
@plyr-off-white: #D6DADD;
|
||||
|
||||
// Font sizes
|
||||
@plyr-font-size-small: 14px;
|
||||
@plyr-font-size-base: 16px;
|
||||
@plyr-font-size-small: 14px;
|
||||
@plyr-font-size-base: 16px;
|
||||
|
||||
// Captions
|
||||
@plyr-font-size-captions-base: ceil(@plyr-font-size-base * 1.25);
|
||||
@plyr-font-size-captions-medium: ceil(@plyr-font-size-base * 1.5);
|
||||
@plyr-font-size-captions-large: (@plyr-font-size-base * 2);
|
||||
@plyr-font-size-captions-base: ceil(@plyr-font-size-base * 1.25);
|
||||
@plyr-font-size-captions-medium: ceil(@plyr-font-size-base * 1.5);
|
||||
@plyr-font-size-captions-large: (@plyr-font-size-base * 2);
|
||||
|
||||
// Controls
|
||||
@plyr-control-spacing: 10px;
|
||||
@plyr-controls-bg: #fff;
|
||||
@plyr-control-bg-hover: @plyr-blue;
|
||||
@plyr-control-spacing: 10px;
|
||||
@plyr-controls-bg: #fff;
|
||||
@plyr-control-bg-hover: @plyr-blue;
|
||||
.contrast-control-color(@plyr-controls-bg);
|
||||
.contrast-control-color-hover(@plyr-control-bg-hover);
|
||||
|
||||
// Tooltips
|
||||
@plyr-tooltip-bg: @plyr-controls-bg;
|
||||
@plyr-tooltip-border-color: fade(@plyr-gray-dark, 10%);
|
||||
@plyr-tooltip-border-width: 1px;
|
||||
@plyr-tooltip-shadow: 0 0 5px @plyr-tooltip-border-color, 0 0 0 @plyr-tooltip-border-width @plyr-tooltip-border-color;
|
||||
@plyr-tooltip-color: @plyr-control-color;
|
||||
@plyr-tooltip-padding: @plyr-control-spacing;
|
||||
@plyr-tooltip-arrow-size: 6px;
|
||||
@plyr-tooltip-radius: 3px;
|
||||
@plyr-tooltip-bg: @plyr-controls-bg;
|
||||
@plyr-tooltip-border-color: fade(darken(@plyr-controls-bg, 75%), 10%);
|
||||
@plyr-tooltip-arrow-border-color: fade(darken(@plyr-controls-bg, 75%), 20%);
|
||||
@plyr-tooltip-border-width: 1px;
|
||||
@plyr-tooltip-shadow: 0 0 5px @plyr-tooltip-border-color, 0 0 0 @plyr-tooltip-border-width @plyr-tooltip-border-color;
|
||||
@plyr-tooltip-color: @plyr-control-color;
|
||||
@plyr-tooltip-padding: @plyr-control-spacing;
|
||||
@plyr-tooltip-arrow-size: 6px;
|
||||
@plyr-tooltip-radius: 3px;
|
||||
|
||||
// Progress
|
||||
@plyr-progress-bg: fade(@plyr-gray, 20%);
|
||||
@plyr-progress-playing-bg: @plyr-blue;
|
||||
@plyr-progress-buffered-bg: fade(@plyr-gray, 25%);
|
||||
@plyr-progress-loading-size: 40px;
|
||||
@plyr-progress-loading-bg: fade(#000, 15%);
|
||||
@plyr-progress-bg: fade(@plyr-gray, 20%);
|
||||
@plyr-progress-playing-bg: @plyr-blue;
|
||||
@plyr-progress-buffered-bg: fade(@plyr-gray, 25%);
|
||||
@plyr-progress-loading-size: 40px;
|
||||
@plyr-progress-loading-bg: fade(#000, 15%);
|
||||
|
||||
// Volume
|
||||
@plyr-volume-track-height: 6px;
|
||||
@plyr-volume-track-bg: darken(@plyr-controls-bg, 10%);
|
||||
@plyr-volume-thumb-height: (@plyr-volume-track-height * 2);
|
||||
@plyr-volume-thumb-width: (@plyr-volume-track-height * 2);
|
||||
@plyr-volume-thumb-bg: @plyr-control-color;
|
||||
@plyr-volume-thumb-bg-focus: @plyr-control-bg-hover;
|
||||
@plyr-volume-track-height: 6px;
|
||||
@plyr-volume-track-bg: darken(@plyr-controls-bg, 10%);
|
||||
@plyr-volume-thumb-height: (@plyr-volume-track-height * 2);
|
||||
@plyr-volume-thumb-width: (@plyr-volume-track-height * 2);
|
||||
@plyr-volume-thumb-bg: @plyr-control-color;
|
||||
@plyr-volume-thumb-bg-focus: @plyr-control-bg-hover;
|
||||
|
||||
// Breakpoints
|
||||
@plyr-bp-control-split: 560px; // When controls split into left/right
|
||||
@plyr-bp-captions-large: 768px; // When captions jump to the larger font size
|
||||
@plyr-bp-control-split: 560px; // When controls split into left/right
|
||||
@plyr-bp-captions-large: 768px; // When captions jump to the larger font size
|
||||
|
||||
// Animation
|
||||
// ---------------------------------------
|
||||
@ -110,8 +111,11 @@
|
||||
.seek-thumb() {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
width: (@plyr-control-spacing * 4);
|
||||
width: 1px;
|
||||
height: @plyr-control-spacing;
|
||||
}
|
||||
.seek-thumb-touch() {
|
||||
width: (@plyr-control-spacing * 4);
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.seek-track() {
|
||||
@ -163,6 +167,11 @@
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
// Hide default captions
|
||||
video::-webkit-media-text-track-container {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Container for embeds
|
||||
&__video-embed {
|
||||
padding-bottom: 56.25%; /* 16:9 */
|
||||
@ -186,6 +195,11 @@
|
||||
padding-bottom: 200%;
|
||||
transform: translateY(-35.95%);
|
||||
}
|
||||
|
||||
// To allow mouse events to be captured if full support
|
||||
&.plyr iframe {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Captions
|
||||
@ -322,6 +336,7 @@
|
||||
|
||||
// Tooltips
|
||||
&__tooltip {
|
||||
visibility: hidden;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
bottom: 100%;
|
||||
@ -337,9 +352,9 @@
|
||||
line-height: 1.5;
|
||||
font-weight: 600;
|
||||
|
||||
transform: translate(-50%, (@plyr-tooltip-padding * 3)) scale(.8);
|
||||
transform: translate(-50%, 10px) scale(.8);
|
||||
transform-origin: 50% 100%;
|
||||
transition: transform .2s .1s ease, opacity .2s .1s ease;
|
||||
transition: transform .2s .1s ease, opacity .2s .1s ease, visibility .3s ease;
|
||||
|
||||
// Arrows
|
||||
&::after,
|
||||
@ -357,7 +372,7 @@
|
||||
@plyr-border-arrow-size: (@plyr-tooltip-arrow-size + (@plyr-tooltip-border-width * 1));
|
||||
bottom: -(@plyr-border-arrow-size + @plyr-tooltip-border-width);
|
||||
border-right: @plyr-border-arrow-size solid transparent;
|
||||
border-top: @plyr-border-arrow-size solid @plyr-tooltip-border-color;
|
||||
border-top: @plyr-border-arrow-size solid @plyr-tooltip-arrow-border-color;
|
||||
border-left: @plyr-border-arrow-size solid transparent;
|
||||
z-index: 1;
|
||||
}
|
||||
@ -371,7 +386,9 @@
|
||||
}
|
||||
}
|
||||
button:hover .plyr__tooltip,
|
||||
button.tab-focus:focus .plyr__tooltip {
|
||||
button.tab-focus:focus .plyr__tooltip,
|
||||
&__tooltip--visible {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transform: translate(-50%, 0) scale(1);
|
||||
}
|
||||
@ -380,9 +397,14 @@
|
||||
}
|
||||
|
||||
// Common range styles
|
||||
input[type='range'].tab-focus:focus {
|
||||
outline: 1px dotted fade(@plyr-gray-dark, 80%);
|
||||
outline-offset: 3px;
|
||||
input[type='range'] {
|
||||
&::-ms-tooltip {
|
||||
display: none;
|
||||
}
|
||||
&.tab-focus:focus {
|
||||
outline: 1px dotted fade(@plyr-gray-dark, 80%);
|
||||
outline-offset: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
// Playback progress
|
||||
@ -484,6 +506,26 @@
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Seek tooltip to show time
|
||||
.plyr__tooltip {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Touch seek wider handle
|
||||
&--is-touch &--seek[type='range'] {
|
||||
&::-webkit-slider-thumb {
|
||||
.seek-thumb-touch();
|
||||
}
|
||||
// Mozilla
|
||||
&::-moz-range-thumb {
|
||||
.seek-thumb-touch();
|
||||
}
|
||||
// Microsoft
|
||||
&::-ms-thumb {
|
||||
.seek-thumb-touch();
|
||||
}
|
||||
}
|
||||
|
||||
// Loading state
|
||||
|
@ -7,71 +7,71 @@
|
||||
// -------------------------------
|
||||
|
||||
// Colors
|
||||
$plyr-blue: #3498DB !default;
|
||||
$plyr-gray-dark: #343F4A !default;
|
||||
$plyr-gray: #565D64 !default;
|
||||
$plyr-gray-light: #6B7D86 !default;
|
||||
$plyr-gray-lighter: #CBD0D3 !default;
|
||||
$plyr-off-white: #D6DADD !default;
|
||||
$plyr-blue: #3498DB !default;
|
||||
$plyr-gray-dark: #343F4A !default;
|
||||
$plyr-gray: #565D64 !default;
|
||||
$plyr-gray-light: #6B7D86 !default;
|
||||
$plyr-gray-lighter: #CBD0D3 !default;
|
||||
$plyr-off-white: #D6DADD !default;
|
||||
|
||||
// Font sizes
|
||||
$plyr-font-size-small: 14px !default;
|
||||
$plyr-font-size-base: 16px !default;
|
||||
$plyr-font-size-small: 14px !default;
|
||||
$plyr-font-size-base: 16px !default;
|
||||
|
||||
// Captions
|
||||
$plyr-font-size-captions-base: ceil($plyr-font-size-base * 1.25) !default;
|
||||
$plyr-font-size-captions-medium: ceil($plyr-font-size-base * 1.5) !default;
|
||||
$plyr-font-size-captions-large: ($plyr-font-size-base * 2) !default;
|
||||
$plyr-font-size-captions-base: ceil($plyr-font-size-base * 1.25) !default;
|
||||
$plyr-font-size-captions-medium: ceil($plyr-font-size-base * 1.5) !default;
|
||||
$plyr-font-size-captions-large: ($plyr-font-size-base * 2) !default;
|
||||
|
||||
// Controls
|
||||
$plyr-control-spacing: 10px !default;
|
||||
$plyr-controls-bg: #fff !default;
|
||||
$plyr-control-bg-hover: $plyr-blue !default;
|
||||
$plyr-control-color: null !default;
|
||||
$plyr-control-color-hover: null !default;
|
||||
$plyr-control-spacing: 10px !default;
|
||||
$plyr-controls-bg: #fff !default;
|
||||
$plyr-control-bg-hover: $plyr-blue !default;
|
||||
|
||||
// Contrast
|
||||
@if lightness($plyr-controls-bg) >= 65% {
|
||||
$plyr-control-color: $plyr-gray-light;
|
||||
$plyr-control-color: $plyr-gray-light !default;
|
||||
}
|
||||
@else {
|
||||
$plyr-control-color: $plyr-gray-lighter;
|
||||
$plyr-control-color: $plyr-gray-lighter !default;
|
||||
}
|
||||
@if lightness($plyr-control-bg-hover) >= 65% {
|
||||
$plyr-control-color-hover: $plyr-gray;
|
||||
$plyr-control-color-hover: $plyr-gray !default;
|
||||
}
|
||||
@else {
|
||||
$plyr-control-color-hover: #fff;
|
||||
$plyr-control-color-hover: #fff !default;
|
||||
}
|
||||
|
||||
// Tooltips
|
||||
$plyr-tooltip-bg: $plyr-controls-bg !default;
|
||||
$plyr-tooltip-border-color: transparentize(@gray-dark, .1) !default;
|
||||
$plyr-tooltip-border-width: 1px;
|
||||
$plyr-tooltip-shadow: 0 0 5px $plyr-tooltip-border-color, 0 0 0 $plyr-tooltip-border-width $plyr-tooltip-border-color;
|
||||
$plyr-tooltip-color: $plyr-control-color !default;
|
||||
$plyr-tooltip-padding: $plyr-control-spacing !default;
|
||||
$plyr-tooltip-arrow-size: 6px !default;
|
||||
$plyr-tooltip-radius: 3px !default;
|
||||
$plyr-tooltip-bg: $plyr-controls-bg !default;
|
||||
$plyr-tooltip-border-color: transparentize(darken($plyr-controls-bg, 75%), .1) !default;
|
||||
$plyr-tooltip-arrow-border-color: transparentize(darken($plyr-controls-bg, 75%), .2) !default;
|
||||
|
||||
$plyr-tooltip-border-width: 1px;
|
||||
$plyr-tooltip-shadow: 0 0 5px $plyr-tooltip-border-color, 0 0 0 $plyr-tooltip-border-width $plyr-tooltip-border-color;
|
||||
$plyr-tooltip-color: $plyr-control-color !default;
|
||||
$plyr-tooltip-padding: $plyr-control-spacing !default;
|
||||
$plyr-tooltip-arrow-size: 6px !default;
|
||||
$plyr-tooltip-radius: 3px !default;
|
||||
|
||||
// Progress
|
||||
$plyr-progress-bg: transparentize($plyr-gray, .2) !default;
|
||||
$plyr-progress-playing-bg: $plyr-blue !default;
|
||||
$plyr-progress-buffered-bg: transparentize($plyr-gray, .25) !default;
|
||||
$plyr-progress-loading-size: 40px !default;
|
||||
$plyr-progress-loading-bg: transparentize(#000, .15); !default;
|
||||
$plyr-progress-bg: transparentize($plyr-gray, .2) !default;
|
||||
$plyr-progress-playing-bg: $plyr-blue !default;
|
||||
$plyr-progress-buffered-bg: transparentize($plyr-gray, .25) !default;
|
||||
$plyr-progress-loading-size: 40px !default;
|
||||
$plyr-progress-loading-bg: transparentize(#000, .15) !default;
|
||||
|
||||
// Volume
|
||||
$plyr-volume-track-height: 6px !default;
|
||||
$plyr-volume-track-bg: darken($plyr-controls-bg, 10%) !default;
|
||||
$plyr-volume-thumb-height: ($plyr-volume-track-height * 2) !default;
|
||||
$plyr-volume-thumb-width: ($plyr-volume-track-height * 2) !default;
|
||||
$plyr-volume-thumb-bg: $plyr-control-color !default;
|
||||
$plyr-volume-thumb-bg-focus: $plyr-control-bg-hover !default;
|
||||
$plyr-volume-track-height: 6px !default;
|
||||
$plyr-volume-track-bg: darken($plyr-controls-bg, 10%) !default;
|
||||
$plyr-volume-thumb-height: ($plyr-volume-track-height * 2) !default;
|
||||
$plyr-volume-thumb-width: ($plyr-volume-track-height * 2) !default;
|
||||
$plyr-volume-thumb-bg: $plyr-control-color !default;
|
||||
$plyr-volume-thumb-bg-focus: $plyr-control-bg-hover !default;
|
||||
|
||||
// Breakpoints
|
||||
$plyr-bp-control-split: 560px !default; // When controls split into left/right
|
||||
$plyr-bp-captions-large: 768px !default; // When captions jump to the larger font size
|
||||
$plyr-bp-control-split: 560px !default; // When controls split into left/right
|
||||
$plyr-bp-captions-large: 768px !default; // When captions jump to the larger font size
|
||||
|
||||
// Animation
|
||||
// ---------------------------------------
|
||||
@ -111,8 +111,11 @@ $plyr-bp-captions-large: 768px !default; // When captions jump to the la
|
||||
@mixin seek-thumb() {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
width: ($plyr-control-spacing * 4);
|
||||
width: 1px;
|
||||
height: $plyr-control-spacing;
|
||||
}
|
||||
@mixin seek-thumb-touch() {
|
||||
width: ($plyr-control-spacing * 4);
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
@mixin seek-track() {
|
||||
@ -164,6 +167,11 @@ $plyr-bp-captions-large: 768px !default; // When captions jump to the la
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
// Hide default captions
|
||||
video::-webkit-media-text-track-container {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// For embeds
|
||||
&__video-embed {
|
||||
padding-bottom: 56.25%; /* 16:9 */
|
||||
@ -178,6 +186,7 @@ $plyr-bp-captions-large: 768px !default; // When captions jump to the la
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 0;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
// Vimeo hack
|
||||
@ -186,6 +195,11 @@ $plyr-bp-captions-large: 768px !default; // When captions jump to the la
|
||||
padding-bottom: 200%;
|
||||
transform: translateY(-35.95%);
|
||||
}
|
||||
|
||||
// To allow mouse events to be captured if full support
|
||||
&.plyr iframe {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Captions
|
||||
@ -322,6 +336,7 @@ $plyr-bp-captions-large: 768px !default; // When captions jump to the la
|
||||
|
||||
// Tooltips
|
||||
&__tooltip {
|
||||
visibility: hidden;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
bottom: 100%;
|
||||
@ -337,9 +352,9 @@ $plyr-bp-captions-large: 768px !default; // When captions jump to the la
|
||||
line-height: 1.5;
|
||||
font-weight: 600;
|
||||
|
||||
transform: translate(-50%, ($plyr-tooltip-padding * 3)) scale(.8);
|
||||
transform: translate(-50%, 10px) scale(.8);
|
||||
transform-origin: 50% 100%;
|
||||
transition: transform .2s .1s ease, opacity .2s .1s ease;
|
||||
transition: transform .2s .1s ease, opacity .2s .1s ease, visibility .3s ease;
|
||||
|
||||
// Arrows
|
||||
&::after,
|
||||
@ -357,7 +372,7 @@ $plyr-bp-captions-large: 768px !default; // When captions jump to the la
|
||||
$plyr-border-arrow-size: ($plyr-tooltip-arrow-size + ($plyr-tooltip-border-width * 1));
|
||||
bottom: -($plyr-border-arrow-size + $plyr-tooltip-border-width);
|
||||
border-right: $plyr-border-arrow-size solid transparent;
|
||||
border-top: $plyr-border-arrow-size solid $plyr-tooltip-border-color;
|
||||
border-top: $plyr-border-arrow-size solid $plyr-tooltip-arrow-border-color;
|
||||
border-left: $plyr-border-arrow-size solid transparent;
|
||||
z-index: 1;
|
||||
}
|
||||
@ -371,7 +386,9 @@ $plyr-bp-captions-large: 768px !default; // When captions jump to the la
|
||||
}
|
||||
}
|
||||
button:hover .plyr__tooltip,
|
||||
button.tab-focus:focus .plyr__tooltip {
|
||||
button.tab-focus:focus .plyr__tooltip,
|
||||
&__tooltip--visible {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transform: translate(-50%, 0) scale(1);
|
||||
}
|
||||
@ -387,7 +404,7 @@ $plyr-bp-captions-large: 768px !default; // When captions jump to the la
|
||||
|
||||
// Playback progress
|
||||
// <progress> element
|
||||
&-progress {
|
||||
&__progress {
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
left: 0;
|
||||
@ -484,6 +501,26 @@ $plyr-bp-captions-large: 768px !default; // When captions jump to the la
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Seek tooltip to show time
|
||||
.plyr__tooltip {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Touch seek wider handle
|
||||
&--is-touch &--seek[type='range'] {
|
||||
&::-webkit-slider-thumb {
|
||||
@include seek-thumb-touch();
|
||||
}
|
||||
// Mozilla
|
||||
&::-moz-range-thumb {
|
||||
@include seek-thumb-touch();
|
||||
}
|
||||
// Microsoft
|
||||
&::-ms-thumb {
|
||||
@include seek-thumb-touch();
|
||||
}
|
||||
}
|
||||
|
||||
// Loading state
|
||||
@ -627,33 +664,33 @@ $plyr-bp-captions-large: 768px !default; // When captions jump to the la
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Hide controls when playing in full screen
|
||||
&--fullscreen-active.plyr--fullscreen--hide-controls.plyr--playing,
|
||||
&.plyr--fullscreen.plyr--fullscreen--hide-controls.plyr--playing {
|
||||
.plyr__controls {
|
||||
transform: translateY(100%) translateY($plyr-control-spacing / 2);
|
||||
transition: transform .3s .2s ease;
|
||||
}
|
||||
.plyr__captions {
|
||||
bottom: ($plyr-control-spacing / 2);
|
||||
transition: bottom .3s .2s ease;
|
||||
}
|
||||
&.plyr--hover .plyr__controls {
|
||||
transform: translateY(0);
|
||||
}
|
||||
// Hide controls when playing in full screen
|
||||
&--fullscreen-active.plyr--fullscreen--hide-controls.plyr--playing,
|
||||
&.plyr--fullscreen.plyr--fullscreen--hide-controls.plyr--playing {
|
||||
.plyr__controls {
|
||||
transform: translateY(100%) translateY($plyr-control-spacing / 2);
|
||||
transition: transform .3s .2s ease;
|
||||
}
|
||||
.plyr__captions {
|
||||
bottom: ($plyr-control-spacing / 2);
|
||||
transition: bottom .3s .2s ease;
|
||||
}
|
||||
&.plyr--hover .plyr__controls {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
// Captions
|
||||
&.plyr--fullscreen .plyr__captions,
|
||||
&--fullscreen-active .plyr__captions,
|
||||
&--fullscreen--hide-controls.plyr--fullscreen-active.plyr--playing.plyr--hover .plyr__captions {
|
||||
top: auto;
|
||||
bottom: 90px;
|
||||
// Captions
|
||||
&.plyr--fullscreen .plyr__captions,
|
||||
&--fullscreen-active .plyr__captions,
|
||||
&--fullscreen--hide-controls.plyr--fullscreen-active.plyr--playing.plyr--hover .plyr__captions {
|
||||
top: auto;
|
||||
bottom: 90px;
|
||||
|
||||
@media (min-width: $plyr-bp-control-split) {
|
||||
bottom: 60px;
|
||||
}
|
||||
@media (min-width: $plyr-bp-control-split) {
|
||||
bottom: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -1,7 +1,6 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg 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">
|
||||
<title>Captions Off</title>
|
||||
<g>
|
||||
<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"></path>
|
||||
</g>
|
||||
</svg>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 474 B After Width: | Height: | Size: 443 B |
@ -1,10 +1,9 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>Captions On</title>
|
||||
<g>
|
||||
<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"></path>
|
||||
<rect x="3" y="11" width="3" height="2"></rect>
|
||||
<rect x="12" y="11" width="3" height="2"></rect>
|
||||
<rect x="7" y="11" width="4" height="2"></rect>
|
||||
</g>
|
||||
</svg>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 587 B After Width: | Height: | Size: 557 B |
@ -1,10 +1,7 @@
|
||||
<?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">
|
||||
<title>Enter Fullscreen</title>
|
||||
<g>
|
||||
<g transform="translate(9.000000, 9.000000) rotate(-180.000000) translate(-9.000000, -9.000000) translate(0.000000, 2.000000)">
|
||||
<path d="M7.69999981,6.30000001 C7.00064659,5.62264405 6.3,6.3 6.3,6.3 L2,10.6 L2,6 L0,6 L0,13 C0,13.6 0.4,14 1,14 L8,14 L8,12 L3.4,12 L7.7,7.7 C7.7,7.7 8.39935303,6.97735597 7.69999981,6.30000001 Z"></path>
|
||||
<path d="M11,14 L11,12 L16,12 L16,2 L2,2 L2,3 L0,3 L0,1 C0,0.4 0.4,0 1,0 L17,0 C17.6,0 18,0.4 18,1 L18,13 C18,13.6 17.6,14 17,14 L11,14 Z"></path>
|
||||
</g>
|
||||
<g transform="translate(9.000000, 9.000000) rotate(-180.000000) translate(-9.000000, -9.000000) translate(0.000000, 2.000000)">
|
||||
<path d="M7.69999981,6.30000001 C7.00064659,5.62264405 6.3,6.3 6.3,6.3 L2,10.6 L2,6 L0,6 L0,13 C0,13.6 0.4,14 1,14 L8,14 L8,12 L3.4,12 L7.7,7.7 C7.7,7.7 8.39935303,6.97735597 7.69999981,6.30000001 Z"></path>
|
||||
<path d="M11,14 L11,12 L16,12 L16,2 L2,2 L2,3 L0,3 L0,1 C0,0.4 0.4,0 1,0 L17,0 C17.6,0 18,0.4 18,1 L18,13 C18,13.6 17.6,14 17,14 L11,14 Z"></path>
|
||||
</g>
|
||||
</svg>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 787 B After Width: | Height: | Size: 719 B |
@ -1,10 +1,7 @@
|
||||
<?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">
|
||||
<title>Exit Fullscreen</title>
|
||||
<g>
|
||||
<g transform="translate(0.000000, 2.000000)">
|
||||
<path d="M7.69999981,6.30000001 C7.00064659,5.62264405 6.3,6.3 6.3,6.3 L2,10.6 L2,6 L0,6 L0,13 C0,13.6 0.4,14 1,14 L8,14 L8,12 L3.4,12 L7.7,7.7 C7.7,7.7 8.39935303,6.97735597 7.69999981,6.30000001 Z"></path>
|
||||
<path d="M11,14 L11,12 L16,12 L16,2 L2,2 L2,3 L0,3 L0,1 C0,0.4 0.4,0 1,0 L17,0 C17.6,0 18,0.4 18,1 L18,13 C18,13.6 17.6,14 17,14 L11,14 Z"></path>
|
||||
</g>
|
||||
<g transform="translate(0.000000, 2.000000)">
|
||||
<path d="M7.69999981,6.30000001 C7.00064659,5.62264405 6.3,6.3 6.3,6.3 L2,10.6 L2,6 L0,6 L0,13 C0,13.6 0.4,14 1,14 L8,14 L8,12 L3.4,12 L7.7,7.7 C7.7,7.7 8.39935303,6.97735597 7.69999981,6.30000001 Z"></path>
|
||||
<path d="M11,14 L11,12 L16,12 L16,2 L2,2 L2,3 L0,3 L0,1 C0,0.4 0.4,0 1,0 L17,0 C17.6,0 18,0.4 18,1 L18,13 C18,13.6 17.6,14 17,14 L11,14 Z"></path>
|
||||
</g>
|
||||
</svg>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 704 B After Width: | Height: | Size: 637 B |
@ -1,5 +1,4 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>Fast Forward</title>
|
||||
<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"></path>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 510 B After Width: | Height: | Size: 481 B |
@ -1,9 +1,8 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>Muted</title>
|
||||
<g transform="translate(0.000000, 2.000000)">
|
||||
<path d="M9.214,0 C9.103,0 8.989,0.032 8.88,0.101 L4.832,2.911 C4.749,2.969 4.65,3 4.549,3 L0.996,3 C0.446,3 1.33226763e-15,3.448 1.33226763e-15,4 L1.33226763e-15,10 C1.33226763e-15,10.552 0.446,11 0.996,11 L4.549,11 C4.651,11 4.749,11.031 4.832,11.089 L8.88,13.899 C8.989,13.968 9.103,14 9.214,14 C9.606,14 9.961,13.6 9.961,13.051 L9.961,0.95 C9.961,0.4 9.606,0.001 9.214,0.001 L9.214,0 Z M7.969,10.834 L5.582,9.177 C5.416,9.062 5.218,8.999 5.016,8.999 L2.491,8.999 C2.216,8.999 1.993,8.775 1.993,8.499 L1.993,5.499 C1.993,5.223 2.216,4.999 2.491,4.999 L5.016,4.999 C5.218,4.999 5.416,4.937 5.582,4.821 L7.969,3.164 L7.969,10.833 L7.969,10.834 Z"></path>
|
||||
<path d="M14.934,6.799 C14.848,5.051 13.42,3.808 12.427,3.15 C11.957,2.838 11.333,3.028 11.102,3.558 L11.064,3.644 C10.876,4.075 11.019,4.583 11.4,4.838 C12.106,5.311 12.986,6.085 13.024,6.903 C13.056,7.579 12.471,8.371 11.361,9.173 C10.963,9.461 10.832,10.012 11.076,10.448 L11.118,10.523 C11.384,10.998 11.984,11.147 12.418,10.835 C14.158,9.584 15.004,8.229 14.934,6.798 L14.934,6.799 Z"></path>
|
||||
<path d="M17.934,6.799 C17.848,5.051 16.42,3.808 15.427,3.15 C14.957,2.838 14.333,3.028 14.102,3.558 L14.064,3.644 C13.876,4.075 14.019,4.583 14.4,4.838 C15.106,5.311 15.986,6.085 16.024,6.903 C16.056,7.579 15.471,8.371 14.361,9.173 C13.963,9.461 13.832,10.012 14.076,10.448 L14.118,10.523 C14.384,10.998 14.984,11.147 15.418,10.835 C17.158,9.584 18.004,8.229 17.934,6.798 L17.934,6.799 Z" transform="translate(15.945467, 6.999165) rotate(-180.000000) translate(-15.945467, -6.999165) "></path>
|
||||
</g>
|
||||
</svg>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.8 KiB |
@ -1,8 +1,7 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>Pause</title>
|
||||
<g transform="translate(2.000000, 2.000000)">
|
||||
<path d="M0,2 L0,12 C5.24848613e-17,14 2,14 2,14 L4,14 C4,14 6,14 6,12 C6,11.786438 6,11.572876 6,11 L6,2 C6,3.17446247e-09 4,0 4,0 L2,0 C2,0 0,0 0,2 Z M2,2 L4,2 L4,12 L2,12 L2,2 Z"></path>
|
||||
<path d="M8,2 L8,12 C8,14 10,14 10,14 L12,14 C12,14 14,14 14,12 C14,11.786438 14,11.572876 14,11 L14,2 C14,3.17446247e-09 12,0 12,0 L10,0 C10,0 8,0 8,2 Z M10,2 L12,2 L12,12 L10,12 L10,2 Z"></path>
|
||||
</g>
|
||||
</svg>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 666 B After Width: | Height: | Size: 642 B |
@ -1,5 +1,4 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>Play</title>
|
||||
<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"></path>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 382 B After Width: | Height: | Size: 361 B |
@ -1,8 +1,5 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve">
|
||||
<svg viewBox="0 0 16 16" 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">
|
||||
<path d="M7.7,1.2l0.7,6.4l2.1-2.1c1.9,1.9,1.9,5.1,0,7C9.6,13.5,8.3,14,7,14c-1.3,0-2.6-0.5-3.5-1.5
|
||||
c-1.9-1.9-1.9-5.1,0-7c0.6-0.6,1.4-1.1,2.3-1.3L5.2,2.3C4,2.6,2.9,3.2,2,4.1c-2.7,2.7-2.7,7.1,0,9.9c1.3,1.3,3.1,2,4.9,2
|
||||
c1.9,0,3.6-0.7,4.9-2c2.7-2.7,2.7-7.1,0-9.9l2.2-2.2L7.7,1.2z"/>
|
||||
|
Before Width: | Height: | Size: 760 B After Width: | Height: | Size: 505 B |
@ -1,5 +1,4 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg viewBox="0 0 18 21" 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">
|
||||
<title>Rewind</title>
|
||||
<path d="M17.569,9.246 L7,3 C6.448,3 6,3.448 6,4 L6,5.954 L1,3 C0.448,3 0,3.448 0,4 L0,16 C0,16.552 0.448,17 1,17 L6,14.045 L6,16 C6,16.552 6.448,17 7,17 L17.569,10.754 C17.836,10.596 18,10.31 18,10 C18,9.69 17.836,9.403 17.569,9.246 L17.569,9.246 Z M6,11.722 L2,14.086 L2,5.914 L6,8.278 L6,11.722 L6,11.722 Z M8,14.086 L8,5.914 L14.915,10 L8,14.086 L8,14.086 Z" transform="translate(9.000000, 10.000000) rotate(-180.000000) translate(-9.000000, -10.000000) "></path>
|
||||
</svg>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 729 B After Width: | Height: | Size: 704 B |
@ -1,6 +1,5 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>Volume</title>
|
||||
<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"></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"></path>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.0 KiB After Width: | Height: | Size: 1020 B |