Merge remote-tracking branch 'org/develop' into develop
This commit is contained in:
Monica Cheung
commit
48399f6364
2
.gitignore
vendored
2
.gitignore
vendored
@ -5,5 +5,5 @@ node_modules
|
||||
aws.json
|
||||
docs/index.dev.html
|
||||
*.mp4
|
||||
index-dev.html
|
||||
notes.txt
|
||||
npm-debug.log
|
||||
|
||||
2
dist/plyr.css
vendored
2
dist/plyr.css
vendored
File diff suppressed because one or more lines are too long
4
dist/plyr.js
vendored
4
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
@ -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"><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>
|
||||
<?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 16 16"><path d="M7 6.4L0 1v14l7-5.4V15l9-7-9-7"/></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 16 16"><path d="M5 1H2c-.6 0-1 .4-1 1v12c0 .6.4 1 1 1h3c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1zM14 1h-3c-.6 0-1 .4-1 1v12c0 .6.4 1 1 1h3c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1z"/></symbol><symbol id="icon-play" viewBox="0 0 16 16"><path d="M13.6 7.2l-10-7C2.9-.3 2 .2 2 1v14c0 .8.9 1.3 1.6.8l10-7c.5-.4.5-1.2 0-1.6z"/></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 16 16"><path d="M9 1L0 8l9 7V9.6l7 5.4V1L9 6.4"/></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.0 KiB After Width: | Height: | Size: 3.6 KiB |
2
docs/dist/docs.css
vendored
2
docs/dist/docs.css
vendored
File diff suppressed because one or more lines are too long
2
docs/dist/docs.js
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,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"));
|
||||
"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}}),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"));
|
||||
@ -118,10 +118,11 @@
|
||||
<!-- Plyr core script -->
|
||||
<script src="../dist/plyr.js"></script>
|
||||
|
||||
<!-- Shr core script -->
|
||||
<script src="https://cdn.shr.one/0.1.9/shr.js"></script>
|
||||
|
||||
<!-- Docs script -->
|
||||
<script src="dist/docs.js"></script>
|
||||
|
||||
<!-- Shr core script -->
|
||||
<script src="https://cdn.shr.one/0.1.9/shr.js"></script>
|
||||
<script>if(window.shr) { window.shr.setup({ count: { classname: 'btn__count' } }); }</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
// Docs example
|
||||
// ==========================================================================
|
||||
|
||||
/*global plyr, shr*/
|
||||
/*global plyr*/
|
||||
|
||||
// Setup the player
|
||||
plyr.setup('.js-media-player', {
|
||||
@ -16,13 +16,6 @@ plyr.setup('.js-media-player', {
|
||||
}
|
||||
});
|
||||
|
||||
// Setup shr
|
||||
shr.setup({
|
||||
count: {
|
||||
classname: 'btn__count'
|
||||
}
|
||||
});
|
||||
|
||||
// General functions
|
||||
(function() {
|
||||
var buttons = document.querySelectorAll('[data-source]'),
|
||||
|
||||
@ -16,15 +16,9 @@
|
||||
// Base
|
||||
html {
|
||||
height: 100%;
|
||||
font-size: 100%;
|
||||
background: linear-gradient(#fff, @body-background) fixed;
|
||||
}
|
||||
body {
|
||||
font-family: "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
text-align: center;
|
||||
color: @gray;
|
||||
.font-smoothing(on);
|
||||
padding: 0 (@padding-base / 2);
|
||||
}
|
||||
|
||||
|
||||
@ -92,7 +92,6 @@ nav {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
border-radius: @border-radius-base;
|
||||
font-weight: 600;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
|
||||
@ -9,7 +9,6 @@ section {
|
||||
|
||||
video,
|
||||
.plyr__video-embed {
|
||||
border-radius: @border-radius-base;
|
||||
max-width: 100%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
@ -20,14 +19,8 @@ video,
|
||||
// Example players
|
||||
.plyr {
|
||||
margin: 0 auto;
|
||||
border-radius: @border-radius-base;
|
||||
|
||||
&__controls {
|
||||
border-radius: 0 0 @border-radius-base @border-radius-base;
|
||||
}
|
||||
video,
|
||||
.plyr__video-embed {
|
||||
border-radius: @border-radius-base @border-radius-base 0 0;
|
||||
}
|
||||
&--fullscreen,
|
||||
&--fullscreen-active {
|
||||
max-width: none;
|
||||
@ -45,7 +38,7 @@ video,
|
||||
.plyr--audio {
|
||||
max-width: @example-width-audio;
|
||||
|
||||
.plyr__controls {
|
||||
/*.plyr__controls {
|
||||
border-radius: @border-radius-base;
|
||||
}
|
||||
.plyr__progress {
|
||||
@ -56,7 +49,7 @@ video,
|
||||
border-radius: @border-radius-base @border-radius-base 0 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}*/
|
||||
}
|
||||
|
||||
// Style full supported player
|
||||
|
||||
@ -2,6 +2,18 @@
|
||||
// Typography
|
||||
// ==========================================================================
|
||||
|
||||
// Base
|
||||
html {
|
||||
font-size: 100%;
|
||||
}
|
||||
body {
|
||||
font-family: "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
text-align: center;
|
||||
color: @gray;
|
||||
font-weight: @font-weight-base;
|
||||
}
|
||||
|
||||
// Headings
|
||||
h1,
|
||||
h2 {
|
||||
@ -10,6 +22,7 @@ h2 {
|
||||
margin: 0 0 (@padding-base / 2);
|
||||
line-height: 1.2;
|
||||
.font-smoothing();
|
||||
font-weight: @font-weight-bold;
|
||||
}
|
||||
h1 {
|
||||
.font-size(@font-size-h1);
|
||||
|
||||
@ -2,17 +2,17 @@
|
||||
// Fonts
|
||||
// ==========================================================================
|
||||
|
||||
@font-face {
|
||||
/*@font-face {
|
||||
font-family: "Avenir";
|
||||
src: url("//cdn.plyr.io/fonts/avenir-medium.woff2") format("woff2"),
|
||||
url("//cdn.plyr.io/fonts/avenir-medium.woff") format("woff");
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-weight: @font-weight-base;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Avenir";
|
||||
src: url("//cdn.plyr.io/fonts/avenir-bold.woff2") format("woff2"),
|
||||
url("//cdn.plyr.io/fonts/avenir-bold.woff") format("woff");
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
}
|
||||
font-weight: @font-weight-bold;
|
||||
}*/
|
||||
@ -22,6 +22,8 @@
|
||||
@font-size-base: 16;
|
||||
@font-size-small: 14;
|
||||
@font-size-h1: 64;
|
||||
@font-weight-base: 500;
|
||||
@font-weight-bold: 700;
|
||||
|
||||
// Elements
|
||||
@link-color: @blue;
|
||||
|
||||
18
readme.md
18
readme.md
@ -389,7 +389,7 @@ A `plyr` object is added to any element that Plyr is initialized on. You can the
|
||||
There are two ways to access the instance, firstly you re-query the element container you used for setup (e.g. `.js-plyr`) like so:
|
||||
|
||||
```javascript
|
||||
var player = document.querySelector('.js-plyr');
|
||||
var player = document.querySelector('.js-plyr').plyr;
|
||||
```
|
||||
|
||||
Or you can use the returned object from your call to the setup method:
|
||||
@ -488,20 +488,8 @@ Here's a list of the methods supported:
|
||||
<td>
|
||||
Get/Set the media source.
|
||||
<br><br>
|
||||
<strong>array</strong><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.
|
||||
<strong>Object</strong><br>
|
||||
See <a href="#source-method">below</a>
|
||||
<br><br>
|
||||
<strong>YouTube</strong><br>
|
||||
Currently this API method only accepts a YouTube ID when used with a YouTube player. I will add URL support soon, along with being able to swap between types (e.g. YouTube to Audio or Video and vice versa.)
|
||||
|
||||
211
src/js/plyr.js
211
src/js/plyr.js
@ -39,8 +39,9 @@
|
||||
duration: null,
|
||||
displayDuration: true,
|
||||
iconPrefix: 'icon',
|
||||
click: true,
|
||||
tooltips: {
|
||||
clickToPlay: true,
|
||||
hideControls: true,
|
||||
tooltips: {
|
||||
controls: false,
|
||||
seek: true
|
||||
},
|
||||
@ -83,6 +84,7 @@
|
||||
hover: 'plyr--hover',
|
||||
tooltip: 'plyr__tooltip',
|
||||
hidden: 'plyr__sr-only',
|
||||
hideControls: 'plyr--hide-controls',
|
||||
isIos: 'plyr--is-ios',
|
||||
isTouch: 'plyr--is-touch',
|
||||
captions: {
|
||||
@ -91,8 +93,7 @@
|
||||
},
|
||||
fullscreen: {
|
||||
enabled: 'plyr--fullscreen-enabled',
|
||||
active: 'plyr--fullscreen-active',
|
||||
hideControls: 'plyr--fullscreen--hide-controls'
|
||||
active: 'plyr--fullscreen-active'
|
||||
},
|
||||
tabFocus: 'tab-focus'
|
||||
},
|
||||
@ -102,14 +103,13 @@
|
||||
fullscreen: {
|
||||
enabled: true,
|
||||
fallback: true,
|
||||
hideControls: true,
|
||||
allowAudio: false
|
||||
},
|
||||
storage: {
|
||||
enabled: true,
|
||||
key: 'plyr'
|
||||
},
|
||||
controls: ['restart', 'rewind', 'play', 'fast-forward', 'current-time', 'duration', 'mute', 'volume', 'captions', 'fullscreen'],
|
||||
controls: ['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'captions', 'fullscreen'],
|
||||
i18n: {
|
||||
restart: 'Restart',
|
||||
rewind: 'Rewind {seektime} secs',
|
||||
@ -393,6 +393,30 @@
|
||||
return false;
|
||||
}
|
||||
|
||||
// Debounce
|
||||
// deBouncer by hnldesign.nl
|
||||
// based on code by Paul Irish and the original debouncing function from John Hann
|
||||
// http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
|
||||
function _debounce(func, threshold, execAsap) {
|
||||
var timeout;
|
||||
return function debounced () {
|
||||
var obj = this, args = arguments;
|
||||
function delayed () {
|
||||
if (!execAsap) {
|
||||
func.apply(obj, args);
|
||||
}
|
||||
timeout = null;
|
||||
}
|
||||
if (timeout) {
|
||||
clearTimeout(timeout);
|
||||
}
|
||||
else if (execAsap) {
|
||||
func.apply(obj, args);
|
||||
}
|
||||
timeout = setTimeout(delayed, threshold || 100);
|
||||
};
|
||||
}
|
||||
|
||||
// Bind event
|
||||
function _on(element, events, callback) {
|
||||
if (element) {
|
||||
@ -637,27 +661,20 @@
|
||||
|
||||
// Build the default HTML
|
||||
function _buildControls() {
|
||||
// Open and add the progress and seek elements
|
||||
var html = [
|
||||
'<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.1" value="0" data-plyr="seek">',
|
||||
'<progress class="plyr__progress--played" max="100" value="0">',
|
||||
'<span>0</span>% ' + config.i18n.played,
|
||||
'</progress>',
|
||||
'<progress class="plyr__progress--buffer" max="100" value="0">',
|
||||
'<span>0</span>% ' + config.i18n.buffered,
|
||||
'</progress>'];
|
||||
// Create html array
|
||||
var html = [];
|
||||
|
||||
// Seek tooltip
|
||||
if (config.tooltips.seek) {
|
||||
html.push('<span class="plyr__tooltip">00:00</span>');
|
||||
// Larger overlaid play button
|
||||
if (_inArray(config.controls, 'play-large')) {
|
||||
html.push(
|
||||
'<button type="button" data-plyr="play" class="plyr__play-large">',
|
||||
'<svg><use xlink:href="#' + config.iconPrefix + '-play" /></svg>',
|
||||
'<span class="plyr__sr-only">' + config.i18n.play + '</span>',
|
||||
'</button>'
|
||||
);
|
||||
}
|
||||
|
||||
// Close progress
|
||||
html.push('</div>',
|
||||
'<span class="plyr__controls--left">');
|
||||
html.push('<div class="plyr__controls">');
|
||||
|
||||
// Restart button
|
||||
if (_inArray(config.controls, 'restart')) {
|
||||
@ -679,7 +696,8 @@
|
||||
);
|
||||
}
|
||||
|
||||
// Play/pause button
|
||||
// Play Pause button
|
||||
// TODO: This should be a toggle button really?
|
||||
if (_inArray(config.controls, 'play')) {
|
||||
html.push(
|
||||
'<button type="button" data-plyr="play">',
|
||||
@ -703,6 +721,28 @@
|
||||
);
|
||||
}
|
||||
|
||||
// Progress
|
||||
if (_inArray(config.controls, 'progress')) {
|
||||
// Create progress
|
||||
html.push('<span 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.1" value="0" data-plyr="seek">',
|
||||
'<progress class="plyr__progress--played" max="100" value="0">',
|
||||
'<span>0</span>% ' + config.i18n.played,
|
||||
'</progress>',
|
||||
'<progress class="plyr__progress--buffer" max="100" value="0">',
|
||||
'<span>0</span>% ' + config.i18n.buffered,
|
||||
'</progress>');
|
||||
|
||||
// Seek tooltip
|
||||
if (config.tooltips.seek) {
|
||||
html.push('<span class="plyr__tooltip">00:00</span>');
|
||||
}
|
||||
|
||||
// Close
|
||||
html.push('</span>');
|
||||
}
|
||||
|
||||
// Media current time display
|
||||
if (_inArray(config.controls, 'current-time')) {
|
||||
html.push(
|
||||
@ -723,12 +763,6 @@
|
||||
);
|
||||
}
|
||||
|
||||
// Close left controls
|
||||
html.push(
|
||||
'</span>',
|
||||
'<span class="plyr__controls--right">'
|
||||
);
|
||||
|
||||
// Toggle mute button
|
||||
if (_inArray(config.controls, 'mute')) {
|
||||
html.push(
|
||||
@ -771,10 +805,7 @@
|
||||
}
|
||||
|
||||
// Close everything
|
||||
html.push(
|
||||
'</span>',
|
||||
'</div>'
|
||||
);
|
||||
html.push('</div>');
|
||||
|
||||
return html.join('');
|
||||
}
|
||||
@ -804,11 +835,6 @@
|
||||
|
||||
// Setup focus trap
|
||||
_focusTrap();
|
||||
|
||||
// Set control hide class hook
|
||||
if (config.fullscreen.hideControls) {
|
||||
_toggleClass(plyr.container, config.classes.fullscreen.hideControls, true);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1174,7 +1200,7 @@
|
||||
|
||||
// Setup tooltips
|
||||
if (config.tooltips.controls) {
|
||||
var labels = _getElements(config.selectors.labels + ' .' + config.classes.hidden);
|
||||
var labels = _getElements([config.selectors.controls.wrapper, ' ', config.selectors.labels, ' .', config.classes.hidden].join(''));
|
||||
|
||||
for (var i = labels.length - 1; i >= 0; i--) {
|
||||
var label = labels[i];
|
||||
@ -1193,7 +1219,7 @@
|
||||
// Buttons
|
||||
plyr.buttons = {};
|
||||
plyr.buttons.seek = _getElement(config.selectors.buttons.seek);
|
||||
plyr.buttons.play = _getElement(config.selectors.buttons.play);
|
||||
plyr.buttons.play = _getElements(config.selectors.buttons.play);
|
||||
plyr.buttons.pause = _getElement(config.selectors.buttons.pause);
|
||||
plyr.buttons.restart = _getElement(config.selectors.buttons.restart);
|
||||
plyr.buttons.rewind = _getElement(config.selectors.buttons.rewind);
|
||||
@ -1237,7 +1263,7 @@
|
||||
_log('It looks like there is a problem with your controls html', true);
|
||||
|
||||
// Restore native video controls
|
||||
_toggleControls(true);
|
||||
_toggleNativeControls(true);
|
||||
|
||||
return false;
|
||||
}
|
||||
@ -1249,7 +1275,7 @@
|
||||
}
|
||||
|
||||
// Toggle native controls
|
||||
function _toggleControls(toggle) {
|
||||
function _toggleNativeControls(toggle) {
|
||||
if(toggle) {
|
||||
plyr.media.setAttribute('controls', '');
|
||||
}
|
||||
@ -1270,7 +1296,9 @@
|
||||
|
||||
// If there's a play button, set label
|
||||
if (plyr.supported.full && plyr.buttons.play) {
|
||||
plyr.buttons.play.setAttribute('aria-label', label);
|
||||
for (var i = plyr.buttons.play.length - 1; i >= 0; i--) {
|
||||
plyr.buttons.play[i].setAttribute('aria-label', label);
|
||||
}
|
||||
}
|
||||
|
||||
// Set iframe title
|
||||
@ -1292,6 +1320,12 @@
|
||||
// Add type class
|
||||
_toggleClass(plyr.container, config.classes.type.replace('{0}', plyr.type), true);
|
||||
|
||||
// Add video class for embeds
|
||||
// This will require changes if audio embeds are added
|
||||
if (_inArray(config.types.embed, plyr.type)) {
|
||||
_toggleClass(plyr.container, config.classes.type.replace('{0}', 'video'), true);
|
||||
}
|
||||
|
||||
// If there's no autoplay attribute, assume the video is stopped and add state class
|
||||
_toggleClass(plyr.container, config.classes.stopped, config.autoplay);
|
||||
|
||||
@ -1869,6 +1903,8 @@
|
||||
function _checkPlaying() {
|
||||
_toggleClass(plyr.container, config.classes.playing, !plyr.media.paused);
|
||||
_toggleClass(plyr.container, config.classes.stopped, plyr.media.paused);
|
||||
|
||||
_toggleControls(plyr.media.paused);
|
||||
}
|
||||
|
||||
// Toggle fullscreen
|
||||
@ -1926,12 +1962,6 @@
|
||||
// Set button state
|
||||
_toggleState(plyr.buttons.fullscreen, plyr.isFullscreen);
|
||||
|
||||
// Hide on entering full screen
|
||||
if (config.fullscreen.hideControls) {
|
||||
//_toggleClass(plyr.controls, config.classes.hover, false);
|
||||
_showControls(true);
|
||||
}
|
||||
|
||||
// Trigger an event
|
||||
_triggerEvent(plyr.container, plyr.isFullscreen ? 'enterfullscreen' : 'exitfullscreen');
|
||||
}
|
||||
@ -2273,24 +2303,51 @@
|
||||
}
|
||||
|
||||
// Show the player controls in fullscreen mode
|
||||
function _showControls(force) {
|
||||
// We're only worried about fullscreen
|
||||
if (!plyr.isFullscreen) {
|
||||
function _toggleControls(toggle) {
|
||||
if (!config.hideControls || plyr.type === 'audio') {
|
||||
return;
|
||||
}
|
||||
var delay = false,
|
||||
isEnterFullscreen = false,
|
||||
show = toggle;
|
||||
|
||||
// Set shown class
|
||||
_toggleClass(plyr.container, config.classes.hover, true);
|
||||
// Default to false if no boolean
|
||||
if(typeof toggle !== "boolean") {
|
||||
if(toggle && toggle.type) {
|
||||
delay = (toggle.type === 'mousemove');
|
||||
isEnterFullscreen = (toggle.type === 'enterfullscreen');
|
||||
show = _inArray(['mousemove','mouseenter'], toggle.type);
|
||||
}
|
||||
else {
|
||||
show = false;
|
||||
}
|
||||
}
|
||||
|
||||
// Clear timer every movement
|
||||
window.clearTimeout(plyr.timers.hover);
|
||||
|
||||
// If the mouse is not over the controls, set a timeout to hide them
|
||||
plyr.timers.hover = window.setTimeout(function() {
|
||||
if (!plyr.controls.mouseover || (force === true)) {
|
||||
_toggleClass(plyr.container, config.classes.hover, false);
|
||||
if(show || plyr.media.paused) {
|
||||
_toggleClass(plyr.container, config.classes.hideControls, false);
|
||||
|
||||
// Always show controls when paused
|
||||
if(plyr.media.paused) {
|
||||
return;
|
||||
}
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
// If toggle is false or if we're playing (regardless of toggle), then
|
||||
// set the timer to hide the controls
|
||||
if(!show || !plyr.media.paused) {
|
||||
plyr.timers.hover = window.setTimeout(function() {
|
||||
// If the mouse is over the controls, bail
|
||||
if(plyr.controls.active && !isEnterFullscreen) {
|
||||
return;
|
||||
}
|
||||
|
||||
_toggleClass(plyr.container, config.classes.hideControls, true);
|
||||
}, delay ? 2000 : 0);
|
||||
}
|
||||
}
|
||||
|
||||
// Add common function to retrieve media source
|
||||
@ -2339,6 +2396,11 @@
|
||||
// Pause playback
|
||||
_pause();
|
||||
|
||||
// Set seek input to 0
|
||||
if(plyr.buttons.seek) {
|
||||
plyr.buttons.seek.value = 0;
|
||||
}
|
||||
|
||||
// Clean up YouTube stuff
|
||||
if (plyr.type === 'youtube') {
|
||||
// Destroy the embed instance
|
||||
@ -2578,13 +2640,15 @@
|
||||
// Seek tooltip
|
||||
_on(plyr.progress.container, 'mouseenter mouseleave mousemove', _updateSeekTooltip);
|
||||
|
||||
// Toggle controls visibility based on mouse movement and location
|
||||
var hoverTimer, isMouseOver = false;
|
||||
// Toggle controls visibility based on mouse movement
|
||||
if (config.hideControls) {
|
||||
_on(plyr.container, 'mouseenter mouseleave mousemove', _toggleControls);
|
||||
//_on(plyr.container, 'mousemove', _debounce(_toggleControls, 200, true));
|
||||
_on(plyr.container, 'enterfullscreen', _toggleControls);
|
||||
|
||||
if (config.fullscreen.hideControls) {
|
||||
// Keep an eye on the mouse location in relation to controls
|
||||
// Watch for cursor over controls so they don't hide when trying to interact
|
||||
_on(plyr.controls, 'mouseenter mouseleave', function(event) {
|
||||
plyr.controls.mouseover = (event.type === 'mouseenter');
|
||||
plyr.controls.active = (event.type === 'mouseenter');
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -2624,7 +2688,10 @@
|
||||
_on(plyr.media, 'waiting canplay seeked', _checkLoading);
|
||||
|
||||
// Click video
|
||||
if (config.click) {
|
||||
if (config.clickToPlay) {
|
||||
// Set cursor
|
||||
plyr.videoContainer.style.cursor = "pointer";
|
||||
|
||||
_on(plyr.media, 'click', function() {
|
||||
if (plyr.media.paused) {
|
||||
_play();
|
||||
@ -2639,12 +2706,6 @@
|
||||
});
|
||||
}
|
||||
|
||||
// Listen for mouse move to show controls
|
||||
if (config.fullscreen.hideControls) {
|
||||
// Show the controls on mouse move
|
||||
_on(plyr.media, 'mousemove', _showControls);
|
||||
}
|
||||
|
||||
// Proxy events to container
|
||||
_on(plyr.media, config.events.join(' '), function(event) {
|
||||
_triggerEvent(plyr.container, event.type);
|
||||
@ -2710,7 +2771,7 @@
|
||||
}
|
||||
|
||||
// Restore native video controls
|
||||
_toggleControls(true);
|
||||
_toggleNativeControls(true);
|
||||
|
||||
// Clone the media element to remove listeners
|
||||
// http://stackoverflow.com/questions/19469881/javascript-remove-all-event-listeners-of-specific-type
|
||||
@ -2808,7 +2869,7 @@
|
||||
_remove(_getElement(config.selectors.controls.wrapper));
|
||||
|
||||
// Restore native controls
|
||||
_toggleControls(true);
|
||||
_toggleNativeControls(true);
|
||||
|
||||
// Bail
|
||||
return;
|
||||
@ -2835,7 +2896,7 @@
|
||||
_mediaListeners();
|
||||
|
||||
// Remove native controls
|
||||
_toggleControls();
|
||||
_toggleNativeControls();
|
||||
|
||||
// Setup fullscreen
|
||||
_setupFullscreen();
|
||||
|
||||
1209
src/less/plyr.less
1209
src/less/plyr.less
File diff suppressed because it is too large
Load Diff
7
src/sprite/icon-fast-forward.svg
Executable file → Normal file
7
src/sprite/icon-fast-forward.svg
Executable file → Normal file
@ -1,4 +1,7 @@
|
||||
<?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">
|
||||
<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>
|
||||
<!-- 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">
|
||||
<polygon points="7,6.4 0,1 0,15 7,9.6 7,15 16,8 7,1 "/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 481 B After Width: | Height: | Size: 534 B |
@ -1,7 +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">
|
||||
<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>
|
||||
<?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">
|
||||
<path d="M5,1H2C1.4,1,1,1.4,1,2v12c0,0.6,0.4,1,1,1h3c0.6,0,1-0.4,1-1V2C6,1.4,5.6,1,5,1z"/>
|
||||
<path d="M14,1h-3c-0.6,0-1,0.4-1,1v12c0,0.6,0.4,1,1,1h3c0.6,0,1-0.4,1-1V2C15,1.4,14.6,1,14,1z"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 642 B After Width: | Height: | Size: 667 B |
7
src/sprite/icon-play.svg
Executable file → Normal file
7
src/sprite/icon-play.svg
Executable file → Normal file
@ -1,4 +1,7 @@
|
||||
<?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">
|
||||
<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>
|
||||
<!-- 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">
|
||||
<path d="M13.6,7.2l-10-7C2.9-0.3,2,0.2,2,1v14c0,0.8,0.9,1.3,1.6,0.8l10-7C14.1,8.4,14.1,7.6,13.6,7.2z"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 361 B After Width: | Height: | Size: 582 B |
@ -1,4 +1,7 @@
|
||||
<?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">
|
||||
<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>
|
||||
<?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">
|
||||
<polygon points="9,1 0,8 9,15 9,9.6 16,15 16,1 9,6.4 "/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 704 B After Width: | Height: | Size: 535 B |
Loading…
x
Reference in New Issue
Block a user