diff --git a/dist/plyr.css b/dist/plyr.css index 4fd1d334..596b5704 100644 --- a/dist/plyr.css +++ b/dist/plyr.css @@ -1 +1 @@ -@-webkit-keyframes progress{to{background-position:40px 0}}@keyframes progress{to{background-position:40px 0}}.sr-only{position:absolute!important;clip:rect(1px,1px,1px,1px);padding:0!important;border:0!important;height:1px!important;width:1px!important;overflow:hidden}.player{position:relative;max-width:100%;min-width:290px}.player,.player *,.player ::after,.player ::before{box-sizing:border-box}.player-video-wrapper{position:relative}.player audio,.player video{width:100%;height:auto;vertical-align:middle}.player-video-embed{padding-bottom:56.25%;height:0}.player-video-embed iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}.player-captions{display:none;position:absolute;bottom:0;left:0;width:100%;padding:20px;min-height:2.5em;color:#fff;font-size:16px;font-weight:600;text-shadow:-1px -1px 0 #565d64,1px -1px 0 #565d64,-1px 1px 0 #565d64,1px 1px 0 #565d64;text-align:center;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}@media (min-width:768px){.player-captions{font-size:24px}}.player.captions-active .player-captions{display:block}.player-controls{zoom:1;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;position:relative;padding:10px;background:#fff;line-height:1;text-align:center;box-shadow:0 1px 1px rgba(52,63,74,.2)}.player-controls:after,.player-controls:before{content:"";display:table}.player-controls:after{clear:both}.player-controls-right{display:block;margin:10px auto 0}@media (min-width:560px){.player-controls-left{float:left}.player-controls-right{float:right;margin-top:0}}.player-controls button,.player-controls input+label{display:inline-block;vertical-align:middle;margin:0 2px;padding:5px 10px;transition:background .3s ease,color .3s ease,opacity .3s ease;border-radius:3px;cursor:pointer}.player-controls button svg,.player-controls input+label svg{width:18px;height:18px;display:block;fill:currentColor;transition:fill .3s ease}.player-controls .inverted:checked+label,.player-controls input+label{opacity:.5}.player-controls .inverted+label,.player-controls button,.player-controls input:checked+label{color:#6b7d86;opacity:1}.player-controls button{border:0;background:0 0;overflow:hidden}.player-controls [type=checkbox]+label:hover,.player-controls [type=checkbox]:focus+label,.player-controls button:focus,.player-controls button:hover{background:#3498db;color:#fff;opacity:1}.player-controls button:focus,.player-controls input:focus+label{outline:0}.player-controls .icon-captions-on,.player-controls .icon-exit-fullscreen,.player-controls .icon-muted{display:none}.player-controls .player-time{display:inline-block;vertical-align:middle;margin-left:10px;color:#6b7d86;font-weight:600;font-size:14px;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.player-controls .player-time+.player-time{display:none}@media (min-width:560px){.player-controls .player-time+.player-time{display:inline-block}}.player-controls .player-time+.player-time::before{content:"\2044";margin-right:10px}.player-tooltip{visibility:hidden;position:absolute;z-index:2;bottom:100%;margin-bottom:10px;padding:10px 15px;opacity:0;background:#fff;border-radius:3px;color:#fff;font-size:14px;line-height:1.5;font-weight:600;-webkit-transform:translate(-50%,30px);transform:translate(-50%,30px);transition:-webkit-transform .2s .2s ease,opacity .2s .2s ease;transition:transform .2s .2s ease,opacity .2s .2s ease}.player-tooltip::after{content:"";display:block;position:absolute;left:50%;bottom:-5px;margin-left:-5px;width:0;height:0;transition:inherit;border-style:solid;border-width:5px 5px 0;border-color:#fff transparent transparent}.player button:focus .player-tooltip,.player button:hover .player-tooltip,.player input:focus+label .player-tooltip,.player label:hover .player-tooltip{visibility:visible;opacity:1;-webkit-transform:translate(-50%,0);transform:translate(-50%,0)}.player button:hover .player-tooltip,.player label:hover .player-tooltip{z-index:3}.player-progress{position:absolute;bottom:100%;left:0;right:0;width:100%;height:10px;background:rgba(86,93,100,.2)}.player-progress-buffer[value],.player-progress-played[value],.player-progress-seek[type=range]{position:absolute;left:0;top:0;width:100%;height:10px;margin:0;padding:0;vertical-align:top;-webkit-appearance:none;-moz-appearance:none;border:none;background:0 0}.player-progress-buffer[value]::-webkit-progress-bar,.player-progress-played[value]::-webkit-progress-bar{background:0 0}.player-progress-buffer[value]::-webkit-progress-value,.player-progress-played[value]::-webkit-progress-value{background:currentColor}.player-progress-buffer[value]::-moz-progress-bar,.player-progress-played[value]::-moz-progress-bar{background:currentColor}.player-progress-played[value]{z-index:2;color:#3498db}.player-progress-buffer[value]{color:rgba(86,93,100,.25)}.player-progress-seek[type=range]{z-index:4;cursor:pointer;outline:0}.player-progress-seek[type=range]::-webkit-slider-runnable-track{background:0 0;border:0}.player-progress-seek[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:0 0;border:0;width:20px;height:10px}.player-progress-seek[type=range]::-moz-range-track{background:0 0;border:0}.player-progress-seek[type=range]::-moz-range-thumb{-moz-appearance:none;background:0 0;border:0;width:20px;height:10px}.player-progress-seek[type=range]::-ms-track{color:transparent;background:0 0;border:0}.player-progress-seek[type=range]::-ms-fill-lower,.player-progress-seek[type=range]::-ms-fill-upper{background:0 0;border:0}.player-progress-seek[type=range]::-ms-thumb{background:0 0;border:0;width:20px;height:10px}.player-progress-seek[type=range]:focus{outline:0}.player-progress-seek[type=range]::-moz-focus-outer{border:0}.player.loading .player-progress-buffer{-webkit-animation:progress 1s linear infinite;animation:progress 1s linear infinite;background-size:40px 40px;background-repeat:repeat-x;background-color:rgba(86,93,100,.25);background-image:linear-gradient(-45deg,rgba(0,0,0,.15) 25%,transparent 25%,transparent 50%,rgba(0,0,0,.15) 50%,rgba(0,0,0,.15) 75%,transparent 75%,transparent);color:transparent}.player-controls [data-player=pause],.player.playing .player-controls [data-player=play]{display:none}.player.playing .player-controls [data-player=pause]{display:inline-block}.player-volume[type=range]{display:inline-block;vertical-align:middle;-webkit-appearance:none;-moz-appearance:none;width:100px;margin:0 10px 0 0;padding:0;cursor:pointer;background:0 0;border:none}.player-volume[type=range]::-webkit-slider-runnable-track{height:6px;background:#e6e6e6;border:0;border-radius:3px}.player-volume[type=range]::-webkit-slider-thumb{-webkit-appearance:none;margin-top:-3px;height:12px;width:12px;background:#6b7d86;border:0;border-radius:6px;transition:background .3s ease;cursor:ew-resize}.player-volume[type=range]::-moz-range-track{height:6px;background:#e6e6e6;border:0;border-radius:3px}.player-volume[type=range]::-moz-range-thumb{height:12px;width:12px;background:#6b7d86;border:0;border-radius:6px;transition:background .3s ease;cursor:ew-resize}.player-volume[type=range]::-ms-track{height:6px;background:0 0;border-color:transparent;border-width:3px 0;color:transparent}.player-volume[type=range]::-ms-fill-lower,.player-volume[type=range]::-ms-fill-upper{height:6px;background:#e6e6e6;border:0;border-radius:3px}.player-volume[type=range]::-ms-thumb{height:12px;width:12px;background:#6b7d86;border:0;border-radius:6px;transition:background .3s ease;cursor:ew-resize}.player-volume[type=range]:focus{outline:0}.player-volume[type=range]:focus::-webkit-slider-thumb{background:#3498db}.player-volume[type=range]:focus::-moz-range-thumb{background:#3498db}.player-volume[type=range]:focus::-ms-thumb{background:#3498db}.player-audio.ios .player-controls-right,.player.ios .player-volume,.player.ios [data-player=mute],.player.ios [data-player=mute]+label{display:none}.player-audio.ios .player-controls-left{float:none}.player-audio .player-controls{padding-top:20px}.player-audio .player-progress{bottom:auto;top:0;background:#d6dadd}.player-fullscreen,.player.fullscreen-active{position:fixed;top:0;left:0;right:0;bottom:0;height:100%;width:100%;z-index:10000000;background:#000}.player-fullscreen video,.player.fullscreen-active video{height:100%}.player-fullscreen .player-video-wrapper,.player.fullscreen-active .player-video-wrapper{height:100%;width:100%}.player-fullscreen .player-video-wrapper .player-captions,.player.fullscreen-active .player-video-wrapper .player-captions{top:auto;bottom:90px}@media (min-width:560px){.player-fullscreen .player-video-wrapper .player-captions,.player.fullscreen-active .player-video-wrapper .player-captions{bottom:60px}}.player-fullscreen .player-controls,.player.fullscreen-active .player-controls{position:absolute;bottom:0;left:0;right:0}.player-fullscreen.fullscreen-hide-controls.playing .player-controls,.player.fullscreen-active.fullscreen-hide-controls.playing .player-controls{-webkit-transform:translateY(100%) translateY(5px);transform:translateY(100%) translateY(5px);transition:-webkit-transform .3s .2s ease;transition:transform .3s .2s ease}.player-fullscreen.fullscreen-hide-controls.playing .player-controls.hover,.player.fullscreen-active.fullscreen-hide-controls.playing .player-controls.hover{-webkit-transform:translateY(0);transform:translateY(0)}.player.captions-active .player-controls .icon-captions-on,.player.fullscreen-active .icon-exit-fullscreen,.player.muted .player-controls .icon-muted{display:block}.player [data-player=captions],.player [data-player=captions]+label,.player [data-player=fullscreen],.player [data-player=fullscreen]+label,.player.captions-active .player-controls .icon-captions-on+svg,.player.fullscreen-active .icon-exit-fullscreen+svg,.player.muted .player-controls .icon-muted+svg{display:none}.player.captions-enabled [data-player=captions],.player.captions-enabled [data-player=captions]+label,.player.fullscreen-enabled [data-player=fullscreen],.player.fullscreen-enabled [data-player=fullscreen]+label{display:inline-block} \ No newline at end of file +@-webkit-keyframes progress{to{background-position:40px 0}}@keyframes progress{to{background-position:40px 0}}.sr-only{position:absolute!important;clip:rect(1px,1px,1px,1px);padding:0!important;border:0!important;height:1px!important;width:1px!important;overflow:hidden}.player{position:relative;max-width:100%;min-width:290px}.player,.player *,.player ::after,.player ::before{box-sizing:border-box}.player-video-wrapper{position:relative}.player audio,.player video{width:100%;height:auto;vertical-align:middle}.player-video-embed{padding-bottom:56.25%;height:0;overflow:hidden}.player-video-embed iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.player-video-embed>div{position:relative;padding-bottom:200%;-webkit-transform:translateY(-35.95%);transform:translateY(-35.95%)}.player-captions{display:none;position:absolute;bottom:0;left:0;width:100%;padding:20px 20px 30px;color:#fff;font-size:20px;text-align:center;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.player-captions span{border-radius:2px;padding:3px 10px;background:rgba(0,0,0,.9)}.player-captions span:empty{display:none}@media (min-width:768px){.player-captions{font-size:24px}}.player.captions-active .player-captions{display:block}.player.fullscreen-active .player-captions{font-size:32px}.player-controls{zoom:1;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;position:relative;padding:10px;background:#fff;line-height:1;text-align:center;box-shadow:0 1px 1px rgba(52,63,74,.2)}.player-controls:after,.player-controls:before{content:"";display:table}.player-controls:after{clear:both}.player-controls-right{display:block;margin:10px auto 0}@media (min-width:560px){.player-controls-left{float:left}.player-controls-right{float:right;margin-top:0}}.player-controls button{display:inline-block;vertical-align:middle;margin:0 2px;padding:5px 10px;overflow:hidden;border:0;background:0 0;border-radius:3px;cursor:pointer;color:#6b7d86;transition:background .3s ease,color .3s ease,opacity .3s ease}.player-controls button svg{width:18px;height:18px;display:block;fill:currentColor;transition:fill .3s ease}.player-controls button.tab-focus,.player-controls button:hover{background:#3498db;color:#fff}.player-controls button:focus{outline:0}.player-controls .icon-captions-on,.player-controls .icon-exit-fullscreen,.player-controls .icon-muted{display:none}.player-controls .player-time{display:inline-block;vertical-align:middle;margin-left:10px;color:#6b7d86;font-weight:600;font-size:14px;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.player-controls .player-time+.player-time{display:none}@media (min-width:560px){.player-controls .player-time+.player-time{display:inline-block}}.player-controls .player-time+.player-time::before{content:'\2044';margin-right:10px}.player-tooltip{position:absolute;z-index:2;bottom:100%;margin-bottom:10px;padding:10px 15px;opacity:0;background:#fff;border:1px solid #d6dadd;border-radius:3px;color:#6b7d86;font-size:14px;line-height:1.5;font-weight:600;-webkit-transform:translate(-50%,30px) scale(0);transform:translate(-50%,30px) scale(0);-webkit-transform-origin:50% 100%;transform-origin:50% 100%;transition:-webkit-transform .2s .1s ease,opacity .2s .1s ease;transition:transform .2s .1s ease,opacity .2s .1s ease}.player-tooltip::after{content:'';position:absolute;z-index:1;top:100%;left:50%;display:block;width:10px;height:10px;background:#fff;-webkit-transform:translate(-50%,-50%) rotate(45deg) translateY(1px);transform:translate(-50%,-50%) rotate(45deg) translateY(1px);border:1px solid #d6dadd;border-width:0 1px 1px 0}.player button.tab-focus:focus .player-tooltip,.player button:hover .player-tooltip{opacity:1;-webkit-transform:translate(-50%,0) scale(1);transform:translate(-50%,0) scale(1)}.player button:hover .player-tooltip{z-index:3}.player-progress{position:absolute;bottom:100%;left:0;right:0;width:100%;height:10px;background:rgba(86,93,100,.2)}.player-progress-buffer[value],.player-progress-played[value],.player-progress-seek[type=range]{position:absolute;left:0;top:0;width:100%;height:10px;margin:0;padding:0;vertical-align:top;-webkit-appearance:none;-moz-appearance:none;border:none;background:0 0}.player-progress-buffer[value]::-webkit-progress-bar,.player-progress-played[value]::-webkit-progress-bar{background:0 0}.player-progress-buffer[value]::-webkit-progress-value,.player-progress-played[value]::-webkit-progress-value{background:currentColor}.player-progress-buffer[value]::-moz-progress-bar,.player-progress-played[value]::-moz-progress-bar{background:currentColor}.player-progress-played[value]{z-index:2;color:#3498db}.player-progress-buffer[value]{color:rgba(86,93,100,.25)}.player-progress-seek[type=range]{z-index:4;cursor:pointer;outline:0}.player-progress-seek[type=range]::-webkit-slider-runnable-track{background:0 0;border:0}.player-progress-seek[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:0 0;border:0;width:20px;height:10px}.player-progress-seek[type=range]::-moz-range-track{background:0 0;border:0}.player-progress-seek[type=range]::-moz-range-thumb{-moz-appearance:none;background:0 0;border:0;width:20px;height:10px}.player-progress-seek[type=range]::-ms-track{color:transparent;background:0 0;border:0}.player-progress-seek[type=range]::-ms-fill-lower,.player-progress-seek[type=range]::-ms-fill-upper{background:0 0;border:0}.player-progress-seek[type=range]::-ms-thumb{background:0 0;border:0;width:20px;height:10px}.player-progress-seek[type=range]:focus{outline:0}.player-progress-seek[type=range]::-moz-focus-outer{border:0}.player.loading .player-progress-buffer{-webkit-animation:progress 1s linear infinite;animation:progress 1s linear infinite;background-size:40px 40px;background-repeat:repeat-x;background-color:rgba(86,93,100,.25);background-image:linear-gradient(-45deg,rgba(0,0,0,.15) 25%,transparent 25%,transparent 50%,rgba(0,0,0,.15) 50%,rgba(0,0,0,.15) 75%,transparent 75%,transparent);color:transparent}.player-controls [data-player=pause],.player.playing .player-controls [data-player=play]{display:none}.player.playing .player-controls [data-player=pause]{display:inline-block}.player-volume[type=range]{display:inline-block;vertical-align:middle;-webkit-appearance:none;-moz-appearance:none;width:100px;margin:0 10px 0 0;padding:0;cursor:pointer;background:0 0;border:none}.player-volume[type=range]::-webkit-slider-runnable-track{height:6px;background:#e6e6e6;border:0;border-radius:3px}.player-volume[type=range]::-webkit-slider-thumb{-webkit-appearance:none;margin-top:-3px;height:12px;width:12px;background:#6b7d86;border:0;border-radius:6px;transition:background .3s ease;cursor:ew-resize}.player-volume[type=range]::-moz-range-track{height:6px;background:#e6e6e6;border:0;border-radius:3px}.player-volume[type=range]::-moz-range-thumb{height:12px;width:12px;background:#6b7d86;border:0;border-radius:6px;transition:background .3s ease;cursor:ew-resize}.player-volume[type=range]::-ms-track{height:6px;background:0 0;border-color:transparent;border-width:3px 0;color:transparent}.player-volume[type=range]::-ms-fill-lower,.player-volume[type=range]::-ms-fill-upper{height:6px;background:#e6e6e6;border:0;border-radius:3px}.player-volume[type=range]::-ms-thumb{height:12px;width:12px;background:#6b7d86;border:0;border-radius:6px;transition:background .3s ease;cursor:ew-resize}.player-volume[type=range]:focus{outline:0}.player-volume[type=range]:focus::-webkit-slider-thumb{background:#3498db}.player-volume[type=range]:focus::-moz-range-thumb{background:#3498db}.player-volume[type=range]:focus::-ms-thumb{background:#3498db}.player-audio.ios .player-controls-right,.player.ios .player-volume,.player.ios [data-player=mute]{display:none}.player-audio.ios .player-controls-left{float:none}.player-audio .player-controls{padding-top:20px}.player-audio .player-progress{bottom:auto;top:0;background:#d6dadd}.player-fullscreen,.player.fullscreen-active{position:fixed;top:0;left:0;right:0;bottom:0;height:100%;width:100%;z-index:10000000;background:#000}.player-fullscreen video,.player.fullscreen-active video{height:100%}.player-fullscreen .player-video-wrapper,.player.fullscreen-active .player-video-wrapper{height:100%;width:100%}.player-fullscreen .player-controls,.player.fullscreen-active .player-controls{position:absolute;bottom:0;left:0;right:0}.player-fullscreen.fullscreen-hide-controls.playing .player-controls,.player.fullscreen-active.fullscreen-hide-controls.playing .player-controls{-webkit-transform:translateY(100%) translateY(5px);transform:translateY(100%) translateY(5px);transition:-webkit-transform .3s .2s ease;transition:transform .3s .2s ease}.player-fullscreen.fullscreen-hide-controls.playing.player-hover .player-controls,.player.fullscreen-active.fullscreen-hide-controls.playing.player-hover .player-controls{-webkit-transform:translateY(0);transform:translateY(0)}.player-fullscreen.fullscreen-hide-controls.playing .player-captions,.player.fullscreen-active.fullscreen-hide-controls.playing .player-captions{bottom:5px;transition:bottom .3s .2s ease}.player-fullscreen .player-captions,.player-fullscreen.fullscreen-hide-controls.playing.player-hover .player-captions,.player.fullscreen-active .player-captions,.player.fullscreen-active.fullscreen-hide-controls.playing.player-hover .player-captions{top:auto;bottom:90px}@media (min-width:560px){.player-fullscreen .player-captions,.player-fullscreen.fullscreen-hide-controls.playing.player-hover .player-captions,.player.fullscreen-active .player-captions,.player.fullscreen-active.fullscreen-hide-controls.playing.player-hover .player-captions{bottom:60px}}.player.captions-active .player-controls .icon-captions-on,.player.fullscreen-active .icon-exit-fullscreen,.player.muted .player-controls .icon-muted{display:block}.player [data-player=captions],.player [data-player=fullscreen],.player.captions-active .player-controls .icon-captions-on+svg,.player.fullscreen-active .icon-exit-fullscreen+svg,.player.muted .player-controls .icon-muted+svg{display:none}.player.captions-enabled [data-player=captions],.player.fullscreen-enabled [data-player=fullscreen]{display:inline-block} \ No newline at end of file diff --git a/dist/plyr.js b/dist/plyr.js index bcac24ae..a05b655c 100644 --- a/dist/plyr.js +++ b/dist/plyr.js @@ -1 +1 @@ -!function(e){"use strict";function t(){var e=["
","
","","","","0% played","","","0% buffered","","
",""];return o(S.controls,"restart")&&e.push(""),o(S.controls,"rewind")&&e.push(""),o(S.controls,"play")&&e.push("",""),o(S.controls,"fast-forward")&&e.push(""),o(S.controls,"current-time")&&e.push("","Current time","00:00",""),o(S.controls,"duration")&&e.push("","Duration","00:00",""),e.push("",""),o(S.controls,"mute")&&e.push("",""),o(S.controls,"volume")&&e.push("",""),o(S.controls,"captions")&&e.push("",""),o(S.controls,"fullscreen")&&e.push(""),e.push("","
"),e.join("")}function n(e,t){S.debug&&window.console&&console[t?"error":"log"](e)}function r(){var e,t,n,r=navigator.userAgent,a=navigator.appName,s=""+parseFloat(navigator.appVersion),o=parseInt(navigator.appVersion,10);return-1!==navigator.appVersion.indexOf("Windows NT")&&-1!==navigator.appVersion.indexOf("rv:11")?(a="IE",s="11;"):-1!==(t=r.indexOf("MSIE"))?(a="IE",s=r.substring(t+5)):-1!==(t=r.indexOf("Chrome"))?(a="Chrome",s=r.substring(t+7)):-1!==(t=r.indexOf("Safari"))?(a="Safari",s=r.substring(t+7),-1!==(t=r.indexOf("Version"))&&(s=r.substring(t+8))):-1!==(t=r.indexOf("Firefox"))?(a="Firefox",s=r.substring(t+8)):(e=r.lastIndexOf(" ")+1)<(t=r.lastIndexOf("/"))&&(a=r.substring(e,t),s=r.substring(t+1),a.toLowerCase()==a.toUpperCase()&&(a=navigator.appName)),-1!==(n=s.indexOf(";"))&&(s=s.substring(0,n)),-1!==(n=s.indexOf(" "))&&(s=s.substring(0,n)),o=parseInt(""+s,10),isNaN(o)&&(s=""+parseFloat(navigator.appVersion),o=parseInt(navigator.appVersion,10)),{name:a,version:o,ios:/(iPad|iPhone|iPod)/g.test(navigator.platform)}}function a(e,t){var n=e.media;if("video"==e.type)switch(t){case"video/webm":return!(!n.canPlayType||!n.canPlayType('video/webm; codecs="vp8, vorbis"').replace(/no/,""));case"video/mp4":return!(!n.canPlayType||!n.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"').replace(/no/,""));case"video/ogg":return!(!n.canPlayType||!n.canPlayType('video/ogg; codecs="theora"').replace(/no/,""))}else if("audio"==e.type)switch(t){case"audio/mpeg":return!(!n.canPlayType||!n.canPlayType("audio/mpeg;").replace(/no/,""));case"audio/ogg":return!(!n.canPlayType||!n.canPlayType('audio/ogg; codecs="vorbis"').replace(/no/,""));case"audio/wav":return!(!n.canPlayType||!n.canPlayType('audio/wav; codecs="1"').replace(/no/,""))}return!1}function s(e){if(!document.querySelectorAll("script[src='"+e+"']").length){var t=document.createElement("script");t.src=e;var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(t,n)}}function o(e,t){return Array.prototype.indexOf&&-1!=e.indexOf(t)}function i(e,t,n){return e.replace(new RegExp(t.replace(/([.*+?^=!:${}()|\[\]\/\\])/g,"\\$1"),"g"),n)}function l(e,t){e.length||(e=[e]);for(var n=e.length-1;n>=0;n--){var r=n>0?t.cloneNode(!0):t,a=e[n],s=a.parentNode,o=a.nextSibling;r.appendChild(a),o?s.insertBefore(r,o):s.appendChild(r)}}function u(e){for(var t=e.parentNode;e.firstChild;)t.insertBefore(e.firstChild,e);t.removeChild(e)}function c(e){e.parentNode.removeChild(e)}function p(e,t){e.insertBefore(t,e.firstChild)}function d(e,t){for(var n in t)e.setAttribute(n,t[n])}function f(e,t,n){if(e)if(e.classList)e.classList[n?"add":"remove"](t);else{var r=(" "+e.className+" ").replace(/\s+/g," ").replace(" "+t+" ","");e.className=r+(n?" "+t:"")}}function m(e,t,n,r){var a=t.split(" ");if(e instanceof NodeList)for(var s=0;sn;n++){if(e.prefix=t[n],"undefined"!=typeof document[e.prefix+"CancelFullScreen"]){e.supportsFullScreen=!0;break}if("undefined"!=typeof document.msExitFullscreen&&document.msFullscreenEnabled){e.prefix="ms",e.supportsFullScreen=!0;break}}return"webkit"===e.prefix&&navigator.userAgent.match(/Version\/[\d\.]+.*Safari/)&&(e.supportsFullScreen=!1),e.supportsFullScreen&&(e.fullScreenEventName="ms"==e.prefix?"MSFullscreenChange":e.prefix+"fullscreenchange",e.isFullScreen=function(e){switch("undefined"==typeof e&&(e=document),this.prefix){case"":return document.fullscreenElement==e;case"moz":return document.mozFullScreenElement==e;default:return document[this.prefix+"FullscreenElement"]==e}},e.requestFullScreen=function(e){return""===this.prefix?e.requestFullScreen():e[this.prefix+("ms"==this.prefix?"RequestFullscreen":"RequestFullScreen")]("webkit"===this.prefix?e.ALLOW_KEYBOARD_INPUT:null)},e.cancelFullScreen=function(){return""===this.prefix?document.cancelFullScreen():document[this.prefix+("ms"==this.prefix?"ExitFullscreen":"CancelFullScreen")]()},e.element=function(){return""===this.prefix?document.fullscreenElement:document[this.prefix+"FullscreenElement"]}),e}function x(){var e={supported:function(){try{return"localStorage"in window&&null!==window.localStorage}catch(e){return!1}}()};return e}function T(o){function k(e){if(!dt.usingTextTracks&&"video"===dt.type&&dt.supported.full){for(dt.subcount=0,e="number"==typeof e?e:dt.media.currentTime;A(dt.captions[dt.subcount][0])dt.captions.length-1){dt.subcount=dt.captions.length-1;break}dt.media.currentTime.toFixed(1)>=C(dt.captions[dt.subcount][0])&&dt.media.currentTime.toFixed(1)<=A(dt.captions[dt.subcount][0])?(dt.currentCaption=dt.captions[dt.subcount][1],dt.captionsContainer.innerHTML=dt.currentCaption):dt.captionsContainer.innerHTML=""}}function T(){dt.buttons.captions&&(f(dt.container,S.classes.captions.enabled,!0),S.captions.defaultActive&&(f(dt.container,S.classes.captions.active,!0),dt.buttons.captions.checked=!0))}function C(e){var t=[];return t=e.split(" --> "),E(t[0])}function A(e){var t=[];return t=e.split(" --> "),E(t[1])}function E(e){if(null===e||void 0===e)return 0;var t,n=[],r=[];return n=e.split(","),r=n[0].split(":"),t=Math.floor(60*r[0]*60)+Math.floor(60*r[1])+Math.floor(r[2])}function P(e){return dt.container.querySelectorAll(e)}function N(e){return P(e)[0]}function I(){try{return window.self!==window.top}catch(e){return!0}}function M(){var e=S.html;if(n("Injecting custom controls."),e||(e=t()),e=i(e,"{seektime}",S.seekTime),e=i(e,"{id}",Math.floor(1e4*Math.random())),dt.container.insertAdjacentHTML("beforeend",e),S.tooltips)for(var r=P(S.selectors.labels),a=r.length-1;a>=0;a--){var s=r[a];f(s,S.classes.hidden,!1),f(s,S.classes.tooltip,!0)}}function L(){try{return dt.controls=N(S.selectors.controls),dt.buttons={},dt.buttons.seek=N(S.selectors.buttons.seek),dt.buttons.play=N(S.selectors.buttons.play),dt.buttons.pause=N(S.selectors.buttons.pause),dt.buttons.restart=N(S.selectors.buttons.restart),dt.buttons.rewind=N(S.selectors.buttons.rewind),dt.buttons.forward=N(S.selectors.buttons.forward),dt.buttons.fullscreen=N(S.selectors.buttons.fullscreen),dt.buttons.mute=N(S.selectors.buttons.mute),dt.buttons.captions=N(S.selectors.buttons.captions),dt.checkboxes=P("[type='checkbox']"),dt.progress={},dt.progress.container=N(S.selectors.progress.container),dt.progress.buffer={},dt.progress.buffer.bar=N(S.selectors.progress.buffer),dt.progress.buffer.text=dt.progress.buffer.bar&&dt.progress.buffer.bar.getElementsByTagName("span")[0],dt.progress.played={},dt.progress.played.bar=N(S.selectors.progress.played),dt.progress.played.text=dt.progress.played.bar&&dt.progress.played.bar.getElementsByTagName("span")[0],dt.volume=N(S.selectors.buttons.volume),dt.duration=N(S.selectors.duration),dt.currentTime=N(S.selectors.currentTime),dt.seekTime=P(S.selectors.seekTime),!0}catch(e){return n("It looks like there's a problem with your controls html. Bailing.",!0),dt.media.setAttribute("controls",""),!1}}function O(){if(dt.buttons.play){var e=dt.buttons.play.innerText||"Play";"undefined"!=typeof S.title&&S.title.length&&(e+=", "+S.title),dt.buttons.play.setAttribute("aria-label",e)}}function V(){if(!dt.media)return n("No audio or video element found!",!0),!1;if(dt.supported.full){if(dt.media.removeAttribute("controls"),f(dt.container,S.classes.type.replace("{0}",dt.type),!0),f(dt.container,S.classes.stopped,null===dt.media.getAttribute("autoplay")),dt.browser.ios&&f(dt.container,"ios",!0),"video"===dt.type){var e=document.createElement("div");e.setAttribute("class",S.classes.videoWrapper),l(dt.media,e),dt.videoContainer=e}"youtube"==dt.type&&q(dt.media.getAttribute("data-video-id"))}null!==dt.media.getAttribute("autoplay")&&D()}function q(e){for(var t=P("[id^='youtube']"),n=t.length-1;n>=0;n--)c(t[n]);var r=document.createElement("div");r.setAttribute("id","youtube-"+Math.floor(1e4*Math.random())),dt.media.appendChild(r),f(dt.media,S.classes.videoWrapper,!0),f(dt.media,S.classes.embedWrapper,!0),"object"==typeof YT?H(e,r):(s("https://www.youtube.com/iframe_api"),window.onYouTubeIframeAPIReady=function(){H(e,r)})}function H(e,t){n("YouTube API Ready"),"timer"in dt||(dt.timer={}),dt.embed=new YT.Player(t.id,{videoId:e,playerVars:{autoplay:0,controls:0,vq:"hd720",rel:0,showinfo:0,iv_load_policy:3,cc_lang_pref:"en",wmode:"transparent",modestbranding:1},events:{onReady:function(e){var t=e.target;dt.media.play=function(){t.playVideo()},dt.media.pause=function(){t.pauseVideo()},dt.media.stop=function(){t.stopVideo()},dt.media.duration=t.getDuration(),dt.media.paused=2==t.getPlayerState(),dt.media.currentTime=t.getCurrentTime(),dt.media.muted=t.isMuted(),v(dt.media,"timeupdate"),window.clearInterval(dt.timer.buffering),dt.timer.buffering=window.setInterval(function(){dt.media.buffered=t.getVideoLoadedFraction(),v(dt.media,"progress"),1===dt.media.buffered&&window.clearInterval(dt.timer.buffering)},200),dt.container.querySelectorAll(S.selectors.controls).length||pt(),S.displayDuration&&nt()},onStateChange:function(e){var t=e.target;switch(window.clearInterval(dt.timer.playing),e.data){case 0:dt.media.paused=!0,v(dt.media,"ended");break;case 1:dt.media.paused=!1,v(dt.media,"play"),dt.timer.playing=window.setInterval(function(){dt.media.currentTime=t.getCurrentTime(),v(dt.media,"timeupdate")},200);break;case 2:dt.media.paused=!0,v(dt.media,"pause")}}}})}function R(){if("video"===dt.type){dt.videoContainer.insertAdjacentHTML("afterbegin","
"),dt.captionsContainer=N(S.selectors.captions),dt.usingTextTracks=!1,dt.media.textTracks&&(dt.usingTextTracks=!0);for(var e,t="",r=dt.media.childNodes,a=0;a=10||"Firefox"===dt.browser.name&&dt.browser.version>=31||"Chrome"===dt.browser.name&&dt.browser.version>=43||"Safari"===dt.browser.name&&dt.browser.version>=7)&&(n("Detected unsupported browser for HTML5 captions. Using fallback."),dt.usingTextTracks=!1),dt.usingTextTracks){n("TextTracks supported.");for(var i=0;i=7){n("Safari 7+ detected; removing track from DOM."),s=dt.media.getElementsByTagName("track");for(var c=0;ct?t=0:t>dt.media.duration&&(t=dt.media.duration);try{dt.media.currentTime=t.toFixed(1)}catch(r){}"youtube"==dt.type&&(dt.embed.seekTo(dt.media.currentTime),v(dt.media,"timeupdate")),n("Seeking to "+dt.media.currentTime+" seconds"),k(t)}function z(){f(dt.container,S.classes.playing,!dt.media.paused),f(dt.container,S.classes.stopped,dt.media.paused)}function X(e){function t(){f(dt.controls,S.classes.hover,!0),window.clearTimeout(a),s||(a=window.setTimeout(function(){f(dt.controls,S.classes.hover,!1)},2e3))}function n(e){s="mouseenter"===e.type}var r=F.supportsFullScreen;e&&e.type===F.fullScreenEventName?dt.isFullscreen=F.isFullScreen(dt.container):r?(F.isFullScreen(dt.container)?F.cancelFullScreen():F.requestFullScreen(dt.container),dt.isFullscreen=F.isFullScreen(dt.container)):(dt.isFullscreen=!dt.isFullscreen,dt.isFullscreen?(y(document,"keyup",J),document.body.style.overflow="hidden"):(b(document,"keyup",J),document.body.style.overflow="")),f(dt.container,S.classes.fullscreen.active,dt.isFullscreen);var a,s=!1;S.fullscreen.hideControls&&(f(dt.controls,S.classes.hover,!1),m(dt.controls,"mouseenter mouseleave",n,dt.isFullscreen),m(dt.container,"mousemove",t,dt.isFullscreen))}function J(e){27===(e.which||e.charCode||e.keyCode)&&dt.isFullscreen&&X()}function $(e){"undefined"==typeof e&&(e=S.storage.enabled&&x().supported?window.localStorage[S.storage.key]||S.volume:S.volume),e>10&&(e=10),0>e&&(e=0),dt.media.volume=parseFloat(e/10),"youtube"==dt.type&&(dt.embed.setVolume(100*dt.media.volume),v(dt.media,"volumechange")),dt.media.muted&&e>0&&K()}function K(e){"undefined"==typeof e&&(e=!dt.media.muted),dt.media.muted=e,"youtube"===dt.type&&(dt.embed[dt.media.muted?"mute":"unMute"](),v(dt.media,"volumechange"))}function G(){var e=dt.media.muted?0:10*dt.media.volume;dt.supported.full&&dt.volume&&(dt.volume.value=e),S.storage.enabled&&x().supported&&window.localStorage.setItem(S.storage.key,e),f(dt.container,S.classes.muted,0===e),dt.supported.full&&dt.buttons.mute&&(dt.buttons.mute.checked=0===e)}function Q(e){dt.supported.full&&dt.buttons.captions&&("undefined"==typeof e&&(e=-1===dt.container.className.indexOf(S.classes.captions.active),dt.buttons.captions.checked=e),f(dt.container,S.classes.captions.active,e))}function Z(e){var t="waiting"===e.type;clearTimeout(dt.loadingTimer),dt.loadingTimer=setTimeout(function(){f(dt.container,S.classes.loading,t)},t?250:0)}function et(e){var t=dt.progress.played.bar,n=dt.progress.played.text,r=0;if(e)switch(e.type){case"timeupdate":case"seeking":r=h(dt.media.currentTime,dt.media.duration),"timeupdate"==e.type&&dt.buttons.seek&&(dt.buttons.seek.value=r);break;case"change":case"input":r=e.target.value;break;case"playing":case"progress":t=dt.progress.buffer.bar,n=dt.progress.buffer.text,r=function(){var e=dt.media.buffered;return e&&e.length?h(e.end(0),dt.media.duration):"number"==typeof e?100*e:0}()}t&&(t.value=r),n&&(n.innerHTML=r)}function tt(e,t){if(t){dt.secs=parseInt(e%60),dt.mins=parseInt(e/60%60),dt.hours=parseInt(e/60/60%60);var n=parseInt(dt.media.duration/60/60%60)>0;dt.secs=("0"+dt.secs).slice(-2),dt.mins=("0"+dt.mins).slice(-2),t.innerHTML=(n?dt.hours+":":"")+dt.mins+":"+dt.secs}}function nt(){var e=dt.media.duration||0;!dt.duration&&S.displayDuration&&dt.media.paused&&tt(e,dt.currentTime),dt.duration&&tt(e,dt.duration)}function rt(e){tt(dt.media.currentTime,dt.currentTime),et(e)}function at(){for(var e=dt.media.querySelectorAll("source"),t=e.length-1;t>=0;t--)c(e[t]);dt.media.removeAttribute("src")}function st(e){if(e.src){var t=document.createElement("source");d(t,e),p(dt.media,t)}}function ot(e){if("youtube"===dt.type&&"string"==typeof e)return dt.embed.destroy(),q(e),rt(),void 0;if(j(),U(),at(),"string"==typeof e)dt.media.setAttribute("src",e);else if(e.constructor===Array)for(var t in e)st(e[t]);dt.supported.full&&(rt(),z()),dt.media.load(),null!==dt.media.getAttribute("autoplay")&&D()}function it(e){"video"===dt.type&&dt.media.setAttribute("poster",e)}function lt(){var e="IE"==dt.browser.name?"change":"input";y(dt.buttons.play,"click",function(){D(),setTimeout(function(){dt.buttons.pause.focus()},100)}),y(dt.buttons.pause,"click",function(){j(),setTimeout(function(){dt.buttons.play.focus()},100)}),y(dt.buttons.restart,"click",U),y(dt.buttons.rewind,"click",W),y(dt.buttons.forward,"click",Y),y(dt.buttons.seek,e,U),y(dt.volume,e,function(){$(this.value)}),y(dt.buttons.mute,"change",function(){K(this.checked)}),y(dt.buttons.fullscreen,"click",X),F.supportsFullScreen&&y(document,F.fullScreenEventName,X),y(dt.media,"timeupdate seeking",rt),y(dt.media,"timeupdate",k),y(dt.media,"loadedmetadata",nt),y(dt.buttons.captions,"change",function(){Q(this.checked)}),y(dt.media,"ended",function(){"video"===dt.type&&(dt.captionsContainer.innerHTML=""),z()}),y(dt.media,"progress playing",et),y(dt.media,"volumechange",G),y(dt.media,"play pause",z),y(dt.media,"waiting canplay seeked",Z),y(dt.checkboxes,"keyup",g),"video"===dt.type&&S.click&&y(dt.videoContainer,"click",function(){dt.media.paused?v(dt.buttons.play,"click"):dt.media.ended?(U(),v(dt.buttons.play,"click")):v(dt.buttons.pause,"click")})}function ut(){if(!dt.init)return null;if(dt.container.setAttribute("class",S.selectors.container.replace(".","")),dt.init=!1,c(N(S.selectors.controls)),"youtube"===dt.type)return dt.embed.destroy(),void 0;"video"===dt.type&&(c(N(S.selectors.captions)),u(dt.videoContainer)),dt.media.setAttribute("controls","");var e=dt.media.cloneNode(!0);dt.media.parentNode.replaceChild(e,dt.media)}function ct(){if(dt.init)return null;F=w(),dt.browser=r(),dt.media=dt.container.querySelectorAll("audio, video, div")[0];var t=dt.media.tagName.toLowerCase();switch(t){case"div":dt.type=dt.media.getAttribute("data-type");break;default:dt.type=t}if(dt.supported=e.supported(dt.type),!dt.supported.basic)return!1;if(n(dt.browser.name+" "+dt.browser.version),V(),"video"==dt.type||"audio"==dt.type){if(!dt.supported.full)return;pt(),S.displayDuration&&nt(),O()}dt.init=!0}function pt(){return M(),L()?(R(),$(),G(),B(),lt(),void 0):!1}var dt=this;return dt.container=o,ct(),dt.init?{media:dt.media,play:D,pause:j,restart:U,rewind:W,forward:Y,seek:U,source:ot,poster:it,setVolume:$,togglePlay:_,toggleMute:K,toggleCaptions:Q,toggleFullscreen:X,isFullscreen:function(){return dt.isFullscreen||!1},support:function(e){return a(dt,e)},destroy:ut,restore:ct}:{}}var F,S,C={enabled:!0,debug:!1,seekTime:10,volume:5,click:!0,tooltips:!1,displayDuration:!0,iconPrefix:"icon",selectors:{container:".player",controls:".player-controls",labels:"[data-player] .sr-only, label .sr-only",buttons:{seek:"[data-player='seek']",play:"[data-player='play']",pause:"[data-player='pause']",restart:"[data-player='restart']",rewind:"[data-player='rewind']",forward:"[data-player='fast-forward']",mute:"[data-player='mute']",volume:"[data-player='volume']",captions:"[data-player='captions']",fullscreen:"[data-player='fullscreen']"},progress:{container:".player-progress",buffer:".player-progress-buffer",played:".player-progress-played"},captions:".player-captions",currentTime:".player-current-time",duration:".player-duration"},classes:{videoWrapper:"player-video-wrapper",embedWrapper:"player-video-embed",type:"player-{0}",stopped:"stopped",playing:"playing",muted:"muted",loading:"loading",tooltip:"player-tooltip",hidden:"sr-only",hover:"hover",captions:{enabled:"captions-enabled",active:"captions-active"},fullscreen:{enabled:"fullscreen-enabled",active:"fullscreen-active",hideControls:"fullscreen-hide-controls"}},captions:{defaultActive:!1},fullscreen:{enabled:!0,fallback:!0,hideControls:!0},storage:{enabled:!0,key:"plyr_volume"},controls:["restart","rewind","play","fast-forward","current-time","duration","mute","volume","captions","fullscreen"],onSetup:function(){}};e.supported=function(e){var t,n,a=r(),s="IE"===a.name&&a.version<=9,o=/iPhone|iPod/i.test(navigator.userAgent),i=!!document.createElement("audio").canPlayType,l=!!document.createElement("video").canPlayType;switch(e){case"video":t=l,n=t&&!s&&!o;break;case"audio":t=i,n=t&&!s;break;case"youtube":t=!0,n=!s;break;default:t=i&&l,n=t&&!s}return{basic:t,full:n}},e.setup=function(t){if(S=k(C,t),!S.enabled||!e.supported().basic)return!1;for(var n=document.querySelectorAll(S.selectors.container),r=[],a=n.length-1;a>=0;a--){var s=n[a];if("undefined"==typeof s.plyr){var o=new T(s);s.plyr=Object.keys(o).length?o:!1,S.onSetup.apply(s.plyr)}r.push(s.plyr)}return r}}(this.plyr=this.plyr||{}); \ No newline at end of file +!function(e){"use strict";function t(){var e=['
','
','','','',"0% "+C.i18n.played,"",'',"0% "+C.i18n.buffered,"","
",''];return s(C.controls,"restart")&&e.push('"),s(C.controls,"rewind")&&e.push('"),s(C.controls,"play")&&e.push('",'"),s(C.controls,"fast-forward")&&e.push('"),s(C.controls,"current-time")&&e.push('',''+C.i18n.currentTime+"",'00:00',""),s(C.controls,"duration")&&e.push('',''+C.i18n.duration+"",'00:00',""),e.push("",''),s(C.controls,"mute")&&e.push('"),s(C.controls,"volume")&&e.push('",''),s(C.controls,"captions")&&e.push('"),s(C.controls,"fullscreen")&&e.push('"),e.push("","
"),e.join("")}function n(e,t){C.debug&&window.console&&console[t?"error":"log"](e)}function r(){var e,t,n,r=navigator.userAgent,a=navigator.appName,o=""+parseFloat(navigator.appVersion),s=parseInt(navigator.appVersion,10);return-1!==navigator.appVersion.indexOf("Windows NT")&&-1!==navigator.appVersion.indexOf("rv:11")?(a="IE",o="11;"):-1!==(t=r.indexOf("MSIE"))?(a="IE",o=r.substring(t+5)):-1!==(t=r.indexOf("Chrome"))?(a="Chrome",o=r.substring(t+7)):-1!==(t=r.indexOf("Safari"))?(a="Safari",o=r.substring(t+7),-1!==(t=r.indexOf("Version"))&&(o=r.substring(t+8))):-1!==(t=r.indexOf("Firefox"))?(a="Firefox",o=r.substring(t+8)):(e=r.lastIndexOf(" ")+1)<(t=r.lastIndexOf("/"))&&(a=r.substring(e,t),o=r.substring(t+1),a.toLowerCase()==a.toUpperCase()&&(a=navigator.appName)),-1!==(n=o.indexOf(";"))&&(o=o.substring(0,n)),-1!==(n=o.indexOf(" "))&&(o=o.substring(0,n)),s=parseInt(""+o,10),isNaN(s)&&(o=""+parseFloat(navigator.appVersion),s=parseInt(navigator.appVersion,10)),{name:a,version:s,ios:/(iPad|iPhone|iPod)/g.test(navigator.platform)}}function a(e,t){var n=e.media;if("video"==e.type)switch(t){case"video/webm":return!(!n.canPlayType||!n.canPlayType('video/webm; codecs="vp8, vorbis"').replace(/no/,""));case"video/mp4":return!(!n.canPlayType||!n.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"').replace(/no/,""));case"video/ogg":return!(!n.canPlayType||!n.canPlayType('video/ogg; codecs="theora"').replace(/no/,""))}else if("audio"==e.type)switch(t){case"audio/mpeg":return!(!n.canPlayType||!n.canPlayType("audio/mpeg;").replace(/no/,""));case"audio/ogg":return!(!n.canPlayType||!n.canPlayType('audio/ogg; codecs="vorbis"').replace(/no/,""));case"audio/wav":return!(!n.canPlayType||!n.canPlayType('audio/wav; codecs="1"').replace(/no/,""))}return!1}function o(e){if(!document.querySelectorAll('script[src="'+e+'"]').length){var t=document.createElement("script");t.src=e;var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(t,n)}}function s(e,t){return Array.prototype.indexOf&&-1!=e.indexOf(t)}function i(e,t,n){return e.replace(new RegExp(t.replace(/([.*+?\^=!:${}()|\[\]\/\\])/g,"\\$1"),"g"),n)}function l(e,t){e.length||(e=[e]);for(var n=e.length-1;n>=0;n--){var r=n>0?t.cloneNode(!0):t,a=e[n],o=a.parentNode,s=a.nextSibling;r.appendChild(a),s?o.insertBefore(r,s):o.appendChild(r)}}function u(e){for(var t=e.parentNode;e.firstChild;)t.insertBefore(e.firstChild,e);t.removeChild(e)}function c(e){e.parentNode.removeChild(e)}function d(e,t){e.insertBefore(t,e.firstChild)}function p(e,t){for(var n in t)e.setAttribute(n,t[n])}function f(e,t,n){if(e)if(e.classList)e.classList[n?"add":"remove"](t);else{var r=(" "+e.className+" ").replace(/\s+/g," ").replace(" "+t+" ","");e.className=r+(n?" "+t:"")}}function m(e,t,n,r){var a=t.split(" ");if(e instanceof NodeList)for(var o=0;on;n++){if(e.prefix=t[n],"undefined"!=typeof document[e.prefix+"CancelFullScreen"]){e.supportsFullScreen=!0;break}if("undefined"!=typeof document.msExitFullscreen&&document.msFullscreenEnabled){e.prefix="ms",e.supportsFullScreen=!0;break}}return e.supportsFullScreen&&(e.fullScreenEventName="ms"==e.prefix?"MSFullscreenChange":e.prefix+"fullscreenchange",e.isFullScreen=function(e){switch("undefined"==typeof e&&(e=document.body),this.prefix){case"":return document.fullscreenElement==e;case"moz":return document.mozFullScreenElement==e;default:return document[this.prefix+"FullscreenElement"]==e}},e.requestFullScreen=function(e){return"undefined"==typeof e&&(e=document.body),""===this.prefix?e.requestFullScreen():e[this.prefix+("ms"==this.prefix?"RequestFullscreen":"RequestFullScreen")]()},e.cancelFullScreen=function(){return""===this.prefix?document.cancelFullScreen():document[this.prefix+("ms"==this.prefix?"ExitFullscreen":"CancelFullScreen")]()},e.element=function(){return""===this.prefix?document.fullscreenElement:document[this.prefix+"FullscreenElement"]}),e}function T(){var e={supported:function(){try{return"localStorage"in window&&null!==window.localStorage}catch(e){return!1}}()};return e}function x(s){function w(e){if(!ft.usingTextTracks&&"video"===ft.type&&ft.supported.full){for(ft.subcount=0,e="number"==typeof e?e:ft.media.currentTime;E(ft.captions[ft.subcount][0])ft.captions.length-1){ft.subcount=ft.captions.length-1;break}if(ft.media.currentTime.toFixed(1)>=S(ft.captions[ft.subcount][0])&&ft.media.currentTime.toFixed(1)<=E(ft.captions[ft.subcount][0])){ft.currentCaption=ft.captions[ft.subcount][1];var t=ft.currentCaption.trim();ft.captionsContainer.innerHTML!=t&&(ft.captionsContainer.innerHTML="",ft.captionsContainer.innerHTML=t)}else ft.captionsContainer.innerHTML=""}}function x(){ft.buttons.captions&&(f(ft.container,C.classes.captions.enabled,!0),C.captions.defaultActive&&(f(ft.container,C.classes.captions.active,!0),g(ft.buttons.captions,!0)))}function S(e){var t=[];return t=e.split(" --> "),A(t[0])}function E(e){var t=[];return t=e.split(" --> "),A(t[1])}function A(e){if(null===e||void 0===e)return 0;var t,n=[],r=[];return n=e.split(","),r=n[0].split(":"),t=Math.floor(60*r[0]*60)+Math.floor(60*r[1])+Math.floor(r[2])}function P(e){return ft.container.querySelectorAll(e)}function N(e){return P(e)[0]}function I(){try{return window.self!==window.top}catch(e){return!0}}function M(){var e=C.html;if(n("Injecting custom controls."),e||(e=t()),e=i(e,"{seektime}",C.seekTime),e=i(e,"{id}",Math.floor(1e4*Math.random())),ft.container.insertAdjacentHTML("beforeend",e),C.tooltips)for(var r=P(C.selectors.labels),a=r.length-1;a>=0;a--){var o=r[a];f(o,C.classes.hidden,!1),f(o,C.classes.tooltip,!0)}}function L(){try{return ft.controls=N(C.selectors.controls),ft.buttons={},ft.buttons.seek=N(C.selectors.buttons.seek),ft.buttons.play=N(C.selectors.buttons.play),ft.buttons.pause=N(C.selectors.buttons.pause),ft.buttons.restart=N(C.selectors.buttons.restart),ft.buttons.rewind=N(C.selectors.buttons.rewind),ft.buttons.forward=N(C.selectors.buttons.forward),ft.buttons.fullscreen=N(C.selectors.buttons.fullscreen),ft.buttons.mute=N(C.selectors.buttons.mute),ft.buttons.captions=N(C.selectors.buttons.captions),ft.checkboxes=P('[type="checkbox"]'),ft.progress={},ft.progress.container=N(C.selectors.progress.container),ft.progress.buffer={},ft.progress.buffer.bar=N(C.selectors.progress.buffer),ft.progress.buffer.text=ft.progress.buffer.bar&&ft.progress.buffer.bar.getElementsByTagName("span")[0],ft.progress.played={},ft.progress.played.bar=N(C.selectors.progress.played),ft.progress.played.text=ft.progress.played.bar&&ft.progress.played.bar.getElementsByTagName("span")[0],ft.volume=N(C.selectors.buttons.volume),ft.duration=N(C.selectors.duration),ft.currentTime=N(C.selectors.currentTime),ft.seekTime=P(C.selectors.seekTime),!0}catch(e){return n("It looks like there's a problem with your controls html. Bailing.",!0),ft.media.setAttribute("controls",""),!1}}function O(){if(ft.buttons.play){var e=ft.buttons.play.innerText||C.i18n.play;"undefined"!=typeof C.title&&C.title.length&&(e+=", "+C.title),ft.buttons.play.setAttribute("aria-label",e)}}function q(){if(!ft.media)return n("No audio or video element found!",!0),!1;if(ft.supported.full&&(ft.media.removeAttribute("controls"),f(ft.container,C.classes.type.replace("{0}",ft.type),!0),f(ft.container,C.classes.stopped,null===ft.media.getAttribute("autoplay")),ft.browser.ios&&f(ft.container,"ios",!0),"video"===ft.type)){var e=document.createElement("div");e.setAttribute("class",C.classes.videoWrapper),l(ft.media,e),ft.videoContainer=e}"youtube"==ft.type&&V(ft.media.getAttribute("data-video-id"),0),"vimeo"==ft.type&&V(ft.media.getAttribute("data-video-id"),1),null!==ft.media.getAttribute("autoplay")&&B()}function V(e,t){for(var n=document.createElement("div"),r=["youtube","vimeo"],a=r[t]+"-"+Math.floor(1e4*Math.random()),s=P('[id^="'+r[t]+'-"]'),i=s.length-1;i>=0;i--)c(s[i]);if(f(ft.media,C.classes.videoWrapper,!0),f(ft.media,C.classes.embedWrapper,!0),0===t)n.setAttribute("id",a),ft.media.appendChild(n),"object"==typeof YT?H(e,n):(o("https://www.youtube.com/iframe_api"),window.onYouTubeIframeAPIReady=function(){H(e,n)});else if(1===t){var l=document.createElement("iframe");if(l.src="https://player.vimeo.com/video/"+e+"?player_id="+a+"&api=1&badge=0&byline=0&portrait=0&title=0",p(l,{id:a,webkitallowfullscreen:"",mozallowfullscreen:"",allowfullscreen:"",frameborder:0}),n.appendChild(l),ft.media.appendChild(n),"function"==typeof Froogaloop)j(a,l);else{o("https://f.vimeocdn.com/js/froogaloop2.min.js");var u=window.setInterval(function(){"$f"in window&&(window.clearInterval(u),j(a,l))},50)}}}function H(e,t){n("YouTube API Ready"),"timer"in ft||(ft.timer={}),ft.embed=new YT.Player(t.id,{videoId:e,playerVars:{autoplay:0,controls:ft.supported.full?0:1,rel:0,showinfo:0,iv_load_policy:3,cc_load_policy:C.captions.defaultActive?1:0,cc_lang_pref:"en",wmode:"transparent",modestbranding:1,disablekb:1},events:{onReady:function(e){var t=e.target;ft.media.play=function(){t.playVideo()},ft.media.pause=function(){t.pauseVideo()},ft.media.stop=function(){t.stopVideo()},ft.media.duration=t.getDuration(),ft.media.paused=!0,ft.media.currentTime=t.getCurrentTime(),ft.media.muted=t.isMuted(),v(ft.media,"timeupdate"),window.clearInterval(ft.timer.buffering),ft.timer.buffering=window.setInterval(function(){ft.media.buffered=t.getVideoLoadedFraction(),v(ft.media,"progress"),1===ft.media.buffered&&window.clearInterval(ft.timer.buffering)},200),ft.supported.full&&(ft.container.querySelectorAll(C.selectors.controls).length||pt(),C.displayDuration&&rt())},onStateChange:function(e){var t=e.target;switch(window.clearInterval(ft.timer.playing),e.data){case 0:ft.media.paused=!0,v(ft.media,"ended");break;case 1:ft.media.paused=!1,v(ft.media,"play"),ft.timer.playing=window.setInterval(function(){ft.media.currentTime=t.getCurrentTime(),v(ft.media,"timeupdate")},200);break;case 2:ft.media.paused=!0,v(ft.media,"pause")}}}})}function j(e,t){ft.embed=$f(t),ft.embed.addEvent("ready",function(){ft.media.play=function(){ft.embed.api("play")},ft.media.pause=function(){ft.embed.api("pause")},ft.media.stop=function(){ft.embed.api("stop")},ft.media.paused=!0,ft.media.currentTime=0,ft.media.muted=!1,ft.supported.full&&(ft.container.querySelectorAll(C.selectors.controls).length||pt()),ft.embed.api("getCurrentTime",function(e){ft.media.currentTime=e,v(ft.media,"timeupdate")}),ft.embed.api("getDuration",function(e){ft.media.duration=e,ft.supported.full&&C.displayDuration&&rt()}),ft.embed.addEvent("play",function(){ft.media.paused=!1,v(ft.media,"play")}),ft.embed.addEvent("pause",function(){ft.media.paused=!0,v(ft.media,"pause")}),ft.embed.addEvent("playProgress",function(e){ft.media.currentTime=e.seconds,v(ft.media,"timeupdate")}),ft.embed.addEvent("loadProgress",function(e){ft.media.buffered=e.percent,v(ft.media,"progress")}),ft.embed.addEvent("finish",function(){ft.media.paused=!0,v(ft.media,"ended")})})}function D(){if("video"===ft.type){ft.videoContainer.insertAdjacentHTML("afterbegin",'
'),ft.captionsContainer=N(C.selectors.captions).querySelector("span"),ft.usingTextTracks=!1,ft.media.textTracks&&(ft.usingTextTracks=!0);for(var e,t="",r=ft.media.childNodes,a=0;a=10||"Firefox"===ft.browser.name&&ft.browser.version>=31||"Chrome"===ft.browser.name&&ft.browser.version>=43||"Safari"===ft.browser.name&&ft.browser.version>=7)&&(n("Detected unsupported browser for HTML5 captions. Using fallback."),ft.usingTextTracks=!1),ft.usingTextTracks){n("TextTracks supported.");for(var i=0;i=7){n("Safari 7+ detected; removing track from DOM."),o=ft.media.getElementsByTagName("track");for(var c=0;ct?t=0:t>ft.media.duration&&(t=ft.media.duration);try{ft.media.currentTime=t.toFixed(1)}catch(a){}"embed"in ft&&("youtube"===ft.type&&ft.embed.seekTo(t),"vimeo"===ft.type&&ft.embed.api("seekTo",t),v(ft.media,"timeupdate"),r&&_()),n("Seeking to "+ft.media.currentTime+" seconds"),w(t)}function U(){f(ft.container,C.classes.playing,!ft.media.paused),f(ft.container,C.classes.stopped,ft.media.paused)}function X(e){function t(){f(ft.container,C.classes.hover,!0),window.clearTimeout(a),o||(a=window.setTimeout(function(){f(ft.container,C.classes.hover,!1)},2e3))}function n(e){o="mouseenter"===e.type}var r=F.supportsFullScreen;e&&e.type===F.fullScreenEventName?ft.isFullscreen=F.isFullScreen(ft.container):r?(F.isFullScreen(ft.container)?F.cancelFullScreen():F.requestFullScreen(ft.container),ft.isFullscreen=F.isFullScreen(ft.container)):(ft.isFullscreen=!ft.isFullscreen,ft.isFullscreen?(y(document,"keyup",J),document.body.style.overflow="hidden"):(b(document,"keyup",J),document.body.style.overflow="")),f(ft.container,C.classes.fullscreen.active,ft.isFullscreen),g(ft.buttons.fullscreen,ft.isFullscreen);var a,o=!1;C.fullscreen.hideControls&&(f(ft.controls,C.classes.hover,!1),m(ft.controls,"mouseenter mouseleave",n,ft.isFullscreen),m(ft.container,"mousemove",t,ft.isFullscreen))}function J(e){27===(e.which||e.charCode||e.keyCode)&&ft.isFullscreen&&X()}function G(e){"undefined"==typeof e&&(e=C.storage.enabled&&T().supported?window.localStorage[C.storage.key]||C.volume:C.volume),e>10&&(e=10),0>e&&(e=0),ft.media.volume=parseFloat(e/10),"youtube"===ft.type&&ft.embed.setVolume(100*ft.media.volume),"vimeo"===ft.type&&ft.embed.api("setVolume",ft.media.volume),"embed"in ft&&v(ft.media,"volumechange"),ft.media.muted&&e>0&&K()}function K(e){"boolean"!=typeof e&&(e=!ft.media.muted),g(ft.buttons.mute,e),ft.media.muted=e,"youtube"===ft.type&&(ft.embed[ft.media.muted?"mute":"unMute"](),v(ft.media,"volumechange"))}function Q(){var e=ft.media.muted?0:10*ft.media.volume;ft.supported.full&&ft.volume&&(ft.volume.value=e),C.storage.enabled&&T().supported&&window.localStorage.setItem(C.storage.key,e),f(ft.container,C.classes.muted,0===e),ft.supported.full&&ft.buttons.mute&&g(ft.buttons.mute,0===e)}function Z(e){ft.supported.full&&ft.buttons.captions&&("boolean"!=typeof e&&(e=-1===ft.container.className.indexOf(C.classes.captions.active)),g(ft.buttons.captions,e),f(ft.container,C.classes.captions.active,e))}function et(e){var t="waiting"===e.type;clearTimeout(ft.loadingTimer),ft.loadingTimer=setTimeout(function(){f(ft.container,C.classes.loading,t)},t?250:0)}function tt(e){var t=ft.progress.played.bar,n=ft.progress.played.text,r=0;if(e)switch(e.type){case"timeupdate":case"seeking":r=h(ft.media.currentTime,ft.media.duration),"timeupdate"==e.type&&ft.buttons.seek&&(ft.buttons.seek.value=r);break;case"change":case"input":r=e.target.value;break;case"playing":case"progress":t=ft.progress.buffer.bar,n=ft.progress.buffer.text,r=function(){var e=ft.media.buffered;return e&&e.length?h(e.end(0),ft.media.duration):"number"==typeof e?100*e:0}()}t&&(t.value=r),n&&(n.innerHTML=r)}function nt(e,t){if(t){ft.secs=parseInt(e%60),ft.mins=parseInt(e/60%60),ft.hours=parseInt(e/60/60%60);var n=parseInt(ft.media.duration/60/60%60)>0;ft.secs=("0"+ft.secs).slice(-2),ft.mins=("0"+ft.mins).slice(-2),t.innerHTML=(n?ft.hours+":":"")+ft.mins+":"+ft.secs}}function rt(){var e=ft.media.duration||0;!ft.duration&&C.displayDuration&&ft.media.paused&&nt(e,ft.currentTime),ft.duration&&nt(e,ft.duration)}function at(e){nt(ft.media.currentTime,ft.currentTime),tt(e)}function ot(){for(var e=ft.media.querySelectorAll("source"),t=e.length-1;t>=0;t--)c(e[t]);ft.media.removeAttribute("src")}function st(e){if(e.src){var t=document.createElement("source");p(t,e),d(ft.media,t)}}function it(e){if("embed"in ft&&"string"==typeof e)return"youtube"===ft.type&&(ft.embed.destroy(),V(e,0)),"vimeo"===ft.type&&V(e,1),at(),void 0;if(_(),$(),ot(),"string"==typeof e)st({src:e});else if(e.constructor===Array)for(var t in e)st(e[t]);ft.supported.full&&(at(),U()),ft.media.load(),null!==ft.media.getAttribute("autoplay")&&B()}function lt(e){"video"===ft.type&&ft.media.setAttribute("poster",e)}function ut(){function e(){var e=document.activeElement;e&&e!=document.body?document.querySelector&&(e=document.querySelector(":focus")):e=null;for(var t in ft.buttons){var n=ft.buttons[t];f(n,"tab-focus",n===e)}}var t="IE"==ft.browser.name?"change":"input";y(window,"keyup",function(t){var n=t.keyCode?t.keyCode:t.which;9==n&&e()});for(var n in ft.buttons){var r=ft.buttons[n];y(r,"blur",function(){f(r,"tab-focus",!1)})}y(ft.buttons.play,"click",function(){B(),setTimeout(function(){ft.buttons.pause.focus()},100)}),y(ft.buttons.pause,"click",function(){_(),setTimeout(function(){ft.buttons.play.focus()},100)}),y(ft.buttons.restart,"click",$),y(ft.buttons.rewind,"click",z),y(ft.buttons.forward,"click",Y),y(ft.buttons.seek,t,$),y(ft.volume,t,function(){G(this.value)}),y(ft.buttons.mute,"click",K),y(ft.buttons.fullscreen,"click",X),F.supportsFullScreen&&y(document,F.fullScreenEventName,X),y(ft.media,"timeupdate seeking",at),y(ft.media,"timeupdate",w),y(ft.media,"loadedmetadata",rt),y(ft.buttons.captions,"click",Z),y(ft.media,"ended",function(){"video"===ft.type&&(ft.captionsContainer.innerHTML=""),U()}),y(ft.media,"progress playing",tt),y(ft.media,"volumechange",Q),y(ft.media,"play pause",U),y(ft.media,"waiting canplay seeked",et),"video"===ft.type&&C.click&&y(ft.videoContainer,"click",function(){ft.media.paused?v(ft.buttons.play,"click"):ft.media.ended?($(),v(ft.buttons.play,"click")):v(ft.buttons.pause,"click")})}function ct(){if(!ft.init)return null;if(ft.container.setAttribute("class",C.selectors.container.replace(".","")),ft.init=!1,c(N(C.selectors.controls)),"youtube"===ft.type)return ft.embed.destroy(),void 0;"video"===ft.type&&(c(N(C.selectors.captions)),u(ft.videoContainer)),ft.media.setAttribute("controls","");var e=ft.media.cloneNode(!0);ft.media.parentNode.replaceChild(e,ft.media)}function dt(){if(ft.init)return null;F=k(),ft.browser=r(),ft.media=ft.container.querySelectorAll("audio, video, div")[0];var t=ft.media.tagName.toLowerCase();if(ft.type="div"===t?ft.media.getAttribute("data-type"):t,ft.supported=e.supported(ft.type),!ft.supported.basic)return!1;if(n(ft.browser.name+" "+ft.browser.version),q(),"video"==ft.type||"audio"==ft.type){if(!ft.supported.full)return;pt(),C.displayDuration&&rt(),O()}ft.init=!0}function pt(){return M(),L()?(D(),G(),Q(),R(),ut(),void 0):!1}var ft=this;return ft.container=s,dt(),ft.init?{media:ft.media,play:B,pause:_,restart:$,rewind:z,forward:Y,seek:$,source:it,poster:lt,setVolume:G,togglePlay:W,toggleMute:K,toggleCaptions:Z,toggleFullscreen:X,isFullscreen:function(){return ft.isFullscreen||!1},support:function(e){return a(ft,e)},destroy:ct,restore:dt}:{}}var F,C,S={enabled:!0,debug:!1,seekTime:10,volume:5,click:!0,tooltips:!1,displayDuration:!0,iconPrefix:"icon",selectors:{container:".player",controls:".player-controls",labels:"[data-player] .sr-only, label .sr-only",buttons:{seek:'[data-player="seek"]',play:'[data-player="play"]',pause:'[data-player="pause"]',restart:'[data-player="restart"]',rewind:'[data-player="rewind"]',forward:'[data-player="fast-forward"]',mute:'[data-player="mute"]',volume:'[data-player="volume"]',captions:'[data-player="captions"]',fullscreen:'[data-player="fullscreen"]'},progress:{container:".player-progress",buffer:".player-progress-buffer",played:".player-progress-played"},captions:".player-captions",currentTime:".player-current-time",duration:".player-duration"},classes:{videoWrapper:"player-video-wrapper",embedWrapper:"player-video-embed",type:"player-{0}",stopped:"stopped",playing:"playing",muted:"muted",loading:"loading",tooltip:"player-tooltip",hidden:"sr-only",hover:"player-hover",captions:{enabled:"captions-enabled",active:"captions-active"},fullscreen:{enabled:"fullscreen-enabled",active:"fullscreen-active",hideControls:"fullscreen-hide-controls"}},captions:{defaultActive:!1},fullscreen:{enabled:!0,fallback:!0,hideControls:!0},storage:{enabled:!0,key:"plyr_volume"},controls:["restart","rewind","play","fast-forward","current-time","duration","mute","volume","captions","fullscreen"],i18n:{restart:"Restart",rewind:"Rewind {seektime} secs",play:"Play",pause:"Pause",forward:"Forward {seektime} secs",played:"played",buffered:"buffered",currentTime:"Current time",duration:"Duration",volume:"Volume",toggleMute:"Toggle Mute",toggleCaptions:"Toggle Captions",toggleFullscreen:"Toggle Fullscreen"}};e.supported=function(e){var t,n,a=r(),o="IE"===a.name&&a.version<=9,s=/iPhone|iPod/i.test(navigator.userAgent),i=!!document.createElement("audio").canPlayType,l=!!document.createElement("video").canPlayType;switch(e){case"video":t=l,n=t&&!o&&!s;break;case"audio":t=i,n=t&&!o;break;case"vimeo":case"youtube":t=!0,n=!o&&!s;break;default:t=i&&l,n=t&&!o}return{basic:t,full:n}},e.setup=function(t){if(C=w(S,t),!C.enabled||!e.supported().basic)return!1;for(var n=document.querySelectorAll(C.selectors.container),r=[],a=n.length-1;a>=0;a--){var o=n[a];if("undefined"==typeof o.plyr){var s=new x(o);o.plyr=Object.keys(s).length?s:!1,"function"==typeof C.onSetup&&C.onSetup.apply(o.plyr)}r.push(o.plyr)}return r}}(this.plyr=this.plyr||{}); \ No newline at end of file diff --git a/docs/dist/docs.css b/docs/dist/docs.css index dcc49989..be03cf4f 100644 --- a/docs/dist/docs.css +++ b/docs/dist/docs.css @@ -1 +1 @@ -/*! normalize.css v2.1.3 | MIT License | git.io/normalize */article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden],template{display:none}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}a{background:0 0}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}hr{box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre-wrap}q{quotes:"\201C" "\201D" "\2018" "\2019"}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}@-webkit-keyframes fade-in{0%{opacity:0}100%{opacity:1}}@keyframes fade-in{0%{opacity:0}100%{opacity:1}}*,::after,::before{box-sizing:border-box}html{font-size:100%}body{font-family:Avenir,"Helvetica Neue",Helvetica,Arial,sans-serif;background:#f2f5f7;line-height:1.5;text-align:center;color:#55646b;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}header{padding:20px;margin-bottom:20px}header p{font-size:18px;font-size:1.125rem}@media (min-width:480px){header{padding-top:60px;padding-bottom:60px}}section{padding-bottom:20px}@media (min-width:480px){section{padding-bottom:40px}}@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-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}h1,h2{letter-spacing:-.025em;color:#2E3C44;margin:0 0 10px;line-height:1.2;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}h1{font-size:64px;font-size:4rem;color:#3498DB}p,small{margin:0 0 20px}small{display:block;padding:0 10px;font-size:14px;font-size:.875rem}a{text-decoration:none;color:#3498db;border-bottom:1px solid currentColor;transition:background .3s ease,color .3s ease}a:focus,a:hover{color:#343f4a}a:focus{outline:#343f4a dotted thin;outline-offset:1px}a.logo{border:0}nav ul{list-style:none;margin:0;padding:0;font-size:0}nav li{display:inline-block;margin-top:10px;font-size:16px;font-size:1rem;white-space:nowrap}nav li+li{margin-left:20px}.btn-bar{position:relative;margin:0 auto 20px;max-width:1200px}.btn-bar::before{content:"";position:absolute;top:50%;left:0;right:0;height:1px;background:#dbe3e8}.btn-bar ul{position:relative;z-index:1;display:inline-block;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.btn-bar li{margin:0}.btn-bar li:first-child .btn{border-radius:4px 0 0 4px}.btn-bar li:last-child .btn{border-radius:0 4px 4px 0}.btn-bar li+li .btn{margin-left:-1px}.btn-bar .btn{display:block;border-radius:0}.btn-bar .btn.active{box-shadow:inset 0 1px 1px rgba(0,0,0,.2);position:relative;z-index:1}@media (min-width:560px){.btn-bar{margin-bottom:40px}}.btn,.btn-count{display:inline-block;vertical-align:middle;border-radius:4px;font-weight:600;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.btn{padding:10px 20px;background:#f2f5f7;border:1px solid #cbd0d3;box-shadow:inset 0 1px 0 #fff,0 1px 1px rgba(0,0,0,.05);text-shadow:0 1px 1px #fff;color:#55646b}.btn:focus,.btn:hover{background-color:#fff;border-color:#bdc4c7;color:#3498db;outline:0}.btn-bar .active,.btn-primary{background:linear-gradient(#3498db,#2791d9);border-color:#217dbb;box-shadow:0 1px 1px rgba(0,0,0,.15);text-shadow:0 1px 1px rgba(0,0,0,.1);color:#fff}.btn-primary:focus,.btn-primary:hover{color:#fff;border-color:#196090}.btn-small{padding-top:7px;padding-bottom:7px}.btn-count{position:relative;margin-left:6px;padding:9px;background:#f2f5f7;border:1px solid #cbd0d3}.btn-count::before{content:"";position:absolute;display:block;width:8px;height:8px;left:1px;top:50%;margin-top:-4px;background:inherit;border:inherit;border-width:1px 0 0 1px;-webkit-transform:rotate(-45deg) translate(-50%,-50%);transform:rotate(-45deg) translate(-50%,-50%)}.panel{display:none}.panel.active{display:block;-webkit-animation:fade-in .3s ease;animation:fade-in .3s ease}.error body,html.error{height:100%}.error body{width:100%;display:table;table-layout:fixed}.error main{display:table-cell;width:100%;vertical-align:middle}.example-audio .player,.example-video .player{margin:0 auto 20px}.example-audio .player-controls,.example-video .player-controls{border-radius:0 0 4px 4px}.example-audio .player{max-width:520px}.example-audio .player-controls{border-radius:4px}.example-audio .player-progress{border-radius:4px 4px 0 0;overflow:hidden}.example-video .player{max-width:1200px}.example-video .player iframe,.example-video .player video{border-radius:4px 4px 0 0}.example-video .player iframe{-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC)}.example-video .player-fullscreen,.example-video .player.fullscreen-active{max-width:none} \ No newline at end of file +/*! normalize.css v2.1.3 | MIT License | git.io/normalize */article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden],template{display:none}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}a{background:0 0}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}hr{box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre-wrap}q{quotes:"\201C" "\201D" "\2018" "\2019"}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}@-webkit-keyframes fade-in{0%{opacity:0}100%{opacity:1}}@keyframes fade-in{0%{opacity:0}100%{opacity:1}}*,::after,::before{box-sizing:border-box}[hidden]{display:none}html{height:100%;font-size:100%;background:linear-gradient(#fff,#f2f5f7) fixed}body{font-family:Avenir,"Helvetica Neue",Helvetica,Arial,sans-serif;line-height:1.5;text-align:center;color:#55646b;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;padding:0 10px}header{padding:20px;margin-bottom:20px}header p{font-size:18px;font-size:1.125rem}@media (min-width:480px){header{padding-top:60px;padding-bottom:60px}}section{padding-bottom:20px}@media (min-width:480px){section{padding-bottom:40px}}@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-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}h1,h2{letter-spacing:-.025em;color:#2E3C44;margin:0 0 10px;line-height:1.2;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}h1{font-size:64px;font-size:4rem;color:#3498DB}p,small{margin:0 0 20px}small{display:block;padding:0 10px;font-size:14px;font-size:.875rem}a{text-decoration:none;color:#3498db;border-bottom:1px solid currentColor;transition:background .3s ease,color .3s ease}a:focus,a:hover{color:#343f4a}a:focus{outline:#343f4a dotted thin;outline-offset:1px}a.logo{border:0}nav ul{list-style:none;margin:0;padding:0;font-size:0}nav li{display:inline-block;margin-top:10px;font-size:16px;font-size:1rem;white-space:nowrap}nav li+li{margin-left:20px}.btn-bar{position:relative;margin:0 auto 20px;max-width:1200px;white-space:nowrap}.btn-bar::before{content:"";position:absolute;top:50%;left:0;right:0;height:1px;background:#dbe3e8}.btn-bar ul{position:relative;z-index:1;display:inline-block;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.btn-bar li{margin:0}.btn-bar li:first-child .btn{border-radius:4px 0 0 4px}.btn-bar li:last-child .btn{border-radius:0 4px 4px 0}.btn-bar li+li .btn{margin-left:-1px}.btn-bar .btn{display:block;border-radius:0}.btn-bar .btn.active{box-shadow:inset 0 1px 1px rgba(0,0,0,.2);position:relative;z-index:1}@media (min-width:560px){.btn-bar{margin-bottom:40px}}.btn,.btn-count{display:inline-block;vertical-align:middle;border-radius:4px;font-weight:600;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.btn{padding:10px 20px;background:#f2f5f7;border:1px solid #cbd0d3;box-shadow:inset 0 1px 0 #fff,0 1px 1px rgba(0,0,0,.05);text-shadow:0 1px 1px #fff;color:#55646b}.btn:focus,.btn:hover{background-color:#fff;border-color:#bdc4c7;color:#3498db;outline:0}.btn-bar .active,.btn-primary{background-image:linear-gradient(#3498db,#2791d9);background-color:#3498db;border-color:#217dbb;box-shadow:0 1px 1px rgba(0,0,0,.15);text-shadow:0 1px 1px rgba(0,0,0,.1);color:#fff}.btn-primary:focus,.btn-primary:hover{color:#fff;border-color:#196090}.btn-small{padding-top:7px;padding-bottom:7px}.btn-count{position:relative;margin-left:6px;padding:9px;background:#fff;border:1px solid #cbd0d3}.btn-count::before{content:"";position:absolute;display:block;width:8px;height:8px;left:1px;top:50%;margin-top:-4px;background:inherit;border:inherit;border-width:1px 0 0 1px;-webkit-transform:rotate(-45deg) translate(-50%,-50%);transform:rotate(-45deg) translate(-50%,-50%)}.panel{display:none}.panel.active{display:block;-webkit-animation:fade-in .3s ease;animation:fade-in .3s ease}.error body,html.error{height:100%}.error body{width:100%;display:table;table-layout:fixed}.error main{display:table-cell;width:100%;vertical-align:middle}.example-audio .player,.example-video .player{margin:0 auto 20px;box-shadow:0 1px 1px rgba(0,0,0,.1)}.example-audio .player-controls,.example-video .player-controls{border-radius:0 0 4px 4px}.example-audio .player{max-width:520px}.example-audio .player-controls{border-radius:4px}.example-audio .player-progress{border-radius:4px 4px 0 0;overflow:hidden}.example-video .player{max-width:1200px}.example-video .player iframe,.example-video .player video{border-radius:4px}.example-video .player-video .player-video-wrapper,.example-video .player-video video,.example-video .player-vimeo .player-video-wrapper,.example-video .player-vimeo video,.example-video .player-youtube .player-video-wrapper,.example-video .player-youtube video{border-radius:4px 4px 0 0}.example-video .player-video .player-video-wrapper,.example-video .player-vimeo .player-video-wrapper,.example-video .player-youtube .player-video-wrapper{-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC)}.example-video .player-video-fullscreen,.example-video .player-video.fullscreen-active,.example-video .player-vimeo-fullscreen,.example-video .player-vimeo.fullscreen-active,.example-video .player-youtube-fullscreen,.example-video .player-youtube.fullscreen-active{max-width:none}.example-video .player-video-fullscreen .player-controls,.example-video .player-video-fullscreen .player-video-wrapper,.example-video .player-video-fullscreen video,.example-video .player-video.fullscreen-active .player-controls,.example-video .player-video.fullscreen-active .player-video-wrapper,.example-video .player-video.fullscreen-active video,.example-video .player-vimeo-fullscreen .player-controls,.example-video .player-vimeo-fullscreen .player-video-wrapper,.example-video .player-vimeo-fullscreen video,.example-video .player-vimeo.fullscreen-active .player-controls,.example-video .player-vimeo.fullscreen-active .player-video-wrapper,.example-video .player-vimeo.fullscreen-active video,.example-video .player-youtube-fullscreen .player-controls,.example-video .player-youtube-fullscreen .player-video-wrapper,.example-video .player-youtube-fullscreen video,.example-video .player-youtube.fullscreen-active .player-controls,.example-video .player-youtube.fullscreen-active .player-video-wrapper,.example-video .player-youtube.fullscreen-active video{border-radius:0}.example-video .player-video-fullscreen .player-video-wrapper,.example-video .player-video.fullscreen-active .player-video-wrapper,.example-video .player-vimeo-fullscreen .player-video-wrapper,.example-video .player-vimeo.fullscreen-active .player-video-wrapper,.example-video .player-youtube-fullscreen .player-video-wrapper,.example-video .player-youtube.fullscreen-active .player-video-wrapper{-webkit-mask-image:none} \ No newline at end of file diff --git a/docs/src/less/components/examples.less b/docs/src/less/components/examples.less index 9c145847..d91bf727 100644 --- a/docs/src/less/components/examples.less +++ b/docs/src/less/components/examples.less @@ -6,6 +6,7 @@ .example-audio .player, .example-video .player { margin: 0 auto @padding-base; + box-shadow: 0 1px 1px rgba(0,0,0, .1); &-controls { border-radius: 0 0 @border-radius-base @border-radius-base; @@ -22,18 +23,38 @@ overflow: hidden; } } +// Base styles .example-video .player { max-width: @example-width-video; video, iframe { + border-radius: @border-radius-base; + } +} + +// Style full supported player +.example-video .player-video, +.example-video .player-youtube, +.example-video .player-vimeo { + video, + .player-video-wrapper { border-radius: @border-radius-base @border-radius-base 0 0; } - iframe { + .player-video-wrapper { -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); } &-fullscreen, &.fullscreen-active { max-width: none; + + video, + .player-controls, + .player-video-wrapper { + border-radius: 0; + } + .player-video-wrapper { + -webkit-mask-image: none; + } } } \ No newline at end of file diff --git a/src/js/plyr.js b/src/js/plyr.js index 8f3f7573..b14f6964 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -1,6 +1,6 @@ // ========================================================================== // Plyr -// plyr.js v1.2.0 +// plyr.js v1.3.4 // https://github.com/selz/plyr // License: The MIT License (MIT) // ========================================================================== @@ -8,66 +8,66 @@ // ========================================================================== (function (api) { - "use strict"; - /*global YT*/ + 'use strict'; + /*global YT,$f*/ // Globals var fullscreen, config; // Default config var defaults = { - enabled: true, + enabled: true, debug: false, seekTime: 10, volume: 5, click: true, tooltips: false, displayDuration: true, - iconPrefix: "icon", + iconPrefix: 'icon', selectors: { - container: ".player", - controls: ".player-controls", - labels: "[data-player] .sr-only, label .sr-only", + container: '.player', + controls: '.player-controls', + labels: '[data-player] .sr-only, label .sr-only', buttons: { - seek: "[data-player='seek']", - play: "[data-player='play']", - pause: "[data-player='pause']", - restart: "[data-player='restart']", - rewind: "[data-player='rewind']", - forward: "[data-player='fast-forward']", - mute: "[data-player='mute']", - volume: "[data-player='volume']", - captions: "[data-player='captions']", - fullscreen: "[data-player='fullscreen']" + seek: '[data-player="seek"]', + play: '[data-player="play"]', + pause: '[data-player="pause"]', + restart: '[data-player="restart"]', + rewind: '[data-player="rewind"]', + forward: '[data-player="fast-forward"]', + mute: '[data-player="mute"]', + volume: '[data-player="volume"]', + captions: '[data-player="captions"]', + fullscreen: '[data-player="fullscreen"]' }, progress: { - container: ".player-progress", - buffer: ".player-progress-buffer", - played: ".player-progress-played" + container: '.player-progress', + buffer: '.player-progress-buffer', + played: '.player-progress-played' }, - captions: ".player-captions", - currentTime: ".player-current-time", - duration: ".player-duration" + captions: '.player-captions', + currentTime: '.player-current-time', + duration: '.player-duration' }, classes: { - videoWrapper: "player-video-wrapper", - embedWrapper: "player-video-embed", - type: "player-{0}", - stopped: "stopped", - playing: "playing", - muted: "muted", - loading: "loading", - tooltip: "player-tooltip", - hidden: "sr-only", - hover: "hover", + videoWrapper: 'player-video-wrapper', + embedWrapper: 'player-video-embed', + type: 'player-{0}', + stopped: 'stopped', + playing: 'playing', + muted: 'muted', + loading: 'loading', + tooltip: 'player-tooltip', + hidden: 'sr-only', + hover: 'player-hover', captions: { - enabled: "captions-enabled", - active: "captions-active" + enabled: 'captions-enabled', + active: 'captions-active' }, fullscreen: { - enabled: "fullscreen-enabled", - active: "fullscreen-active", - hideControls: "fullscreen-hide-controls" + enabled: 'fullscreen-enabled', + active: 'fullscreen-active', + hideControls: 'fullscreen-hide-controls' } }, captions: { @@ -80,155 +80,167 @@ }, storage: { enabled: true, - key: "plyr_volume" + key: 'plyr_volume' }, - controls: ["restart", "rewind", "play", "fast-forward", "current-time", "duration", "mute", "volume", "captions", "fullscreen"], - onSetup: function() {} + controls: ['restart', 'rewind', 'play', 'fast-forward', 'current-time', 'duration', 'mute', 'volume', 'captions', 'fullscreen'], + i18n: { + restart: 'Restart', + rewind: 'Rewind {seektime} secs', + play: 'Play', + pause: 'Pause', + forward: 'Forward {seektime} secs', + played: 'played', + buffered: 'buffered', + currentTime: 'Current time', + duration: 'Duration', + volume: 'Volume', + toggleMute: 'Toggle Mute', + toggleCaptions: 'Toggle Captions', + toggleFullscreen: 'Toggle Fullscreen' + } }; // Build the default HTML function _buildControls() { // Open and add the progress and seek elements var html = [ - "
", - "
", - "", - "", - "", - "0% played", - "", - "", - "0% buffered", - "", - "
", - ""]; + '
', + '
', + '', + '', + '', + '0% ' + config.i18n.played, + '', + '', + '0% ' + config.i18n.buffered, + '', + '
', + '']; // Restart button - if(_inArray(config.controls, "restart")) { + if (_inArray(config.controls, 'restart')) { html.push( - "" + '' ); } // Rewind button - if(_inArray(config.controls, "rewind")) { + if (_inArray(config.controls, 'rewind')) { html.push( - "" + '' ); } // Play/pause button - if(_inArray(config.controls, "play")) { + if (_inArray(config.controls, 'play')) { html.push( - "", - "" + '', + '' ); } // Fast forward button - if(_inArray(config.controls, "fast-forward")) { + if (_inArray(config.controls, 'fast-forward')) { html.push( - "" + '' ); } // Media current time display - if(_inArray(config.controls, "current-time")) { + if (_inArray(config.controls, 'current-time')) { html.push( - "", - "Current time", - "00:00", - "" + '', + '' + config.i18n.currentTime + '', + '00:00', + '' ); } // Media duration display - if(_inArray(config.controls, "duration")) { + if (_inArray(config.controls, 'duration')) { html.push( - "", - "Duration", - "00:00", - "" + '', + '' + config.i18n.duration + '', + '00:00', + '' ); } // Close left controls html.push( - "", - "" + '', + '' ); // Toggle mute button - if(_inArray(config.controls, "mute")) { + if (_inArray(config.controls, 'mute')) { html.push( - "", - "" + '' ); } // Volume range control - if(_inArray(config.controls, "volume")) { + if (_inArray(config.controls, 'volume')) { html.push( - "", - "" + '', + '' ); } // Toggle captions button - if(_inArray(config.controls, "captions")) { + if (_inArray(config.controls, 'captions')) { html.push( - "", - "" + '' ); } // Toggle fullscreen button - if(_inArray(config.controls, "fullscreen")) { + if (_inArray(config.controls, 'fullscreen')) { html.push( - "" + '' ); } // Close everything html.push( - "", - "
" + '', + '
' ); - return html.join(""); + return html.join(''); } // Debugging function _log(text, error) { - if(config.debug && window.console) { - console[(error ? "error" : "log")](text); + if (config.debug && window.console) { + console[(error ? 'error' : 'log')](text); } } @@ -237,42 +249,42 @@ function _browserSniff() { var nAgt = navigator.userAgent, name = navigator.appName, - fullVersion = "" + parseFloat(navigator.appVersion), + fullVersion = '' + parseFloat(navigator.appVersion), majorVersion = parseInt(navigator.appVersion, 10), nameOffset, verOffset, ix; // MSIE 11 - if ((navigator.appVersion.indexOf("Windows NT") !== -1) && (navigator.appVersion.indexOf("rv:11") !== -1)) { - name = "IE"; - fullVersion = "11;"; + if ((navigator.appVersion.indexOf('Windows NT') !== -1) && (navigator.appVersion.indexOf('rv:11') !== -1)) { + name = 'IE'; + fullVersion = '11;'; } // MSIE - else if ((verOffset=nAgt.indexOf("MSIE")) !== -1) { - name = "IE"; + else if ((verOffset=nAgt.indexOf('MSIE')) !== -1) { + name = 'IE'; fullVersion = nAgt.substring(verOffset + 5); } // Chrome - else if ((verOffset=nAgt.indexOf("Chrome")) !== -1) { - name = "Chrome"; + else if ((verOffset=nAgt.indexOf('Chrome')) !== -1) { + name = 'Chrome'; fullVersion = nAgt.substring(verOffset + 7); } // Safari - else if ((verOffset=nAgt.indexOf("Safari")) !== -1) { - name = "Safari"; + else if ((verOffset=nAgt.indexOf('Safari')) !== -1) { + name = 'Safari'; fullVersion = nAgt.substring(verOffset + 7); - if ((verOffset=nAgt.indexOf("Version")) !== -1) { + if ((verOffset=nAgt.indexOf('Version')) !== -1) { fullVersion = nAgt.substring(verOffset + 8); } } // Firefox - else if ((verOffset=nAgt.indexOf("Firefox")) !== -1) { - name = "Firefox"; + else if ((verOffset=nAgt.indexOf('Firefox')) !== -1) { + name = 'Firefox'; fullVersion = nAgt.substring(verOffset + 8); } - // In most other browsers, "name/version" is at the end of userAgent - else if ((nameOffset=nAgt.lastIndexOf(" ") + 1) < (verOffset=nAgt.lastIndexOf("/"))) { + // In most other browsers, 'name/version' is at the end of userAgent + else if ((nameOffset=nAgt.lastIndexOf(' ') + 1) < (verOffset=nAgt.lastIndexOf('/'))) { name = nAgt.substring(nameOffset,verOffset); fullVersion = nAgt.substring(verOffset + 1); @@ -281,23 +293,23 @@ } } // Trim the fullVersion string at semicolon/space if present - if ((ix = fullVersion.indexOf(";")) !== -1) { + if ((ix = fullVersion.indexOf(';')) !== -1) { fullVersion = fullVersion.substring(0, ix); } - if ((ix = fullVersion.indexOf(" ")) !== -1) { + if ((ix = fullVersion.indexOf(' ')) !== -1) { fullVersion = fullVersion.substring(0, ix); } // Get major version - majorVersion = parseInt("" + fullVersion, 10); + majorVersion = parseInt('' + fullVersion, 10); if (isNaN(majorVersion)) { - fullVersion = "" + parseFloat(navigator.appVersion); + fullVersion = '' + parseFloat(navigator.appVersion); majorVersion = parseInt(navigator.appVersion, 10); } // Return data return { - name: name, - version: majorVersion, + name: name, + version: majorVersion, ios: /(iPad|iPhone|iPod)/g.test(navigator.platform) }; } @@ -305,26 +317,26 @@ // Check for mime type support against a player instance // Credits: http://diveintohtml5.info/everything.html // Related: http://www.leanbackplayer.com/test/h5mt.html - function _supportMime(player, mimeType) { + function _supportMime(player, mimeType) { var media = player.media; // Only check video types for video players - if(player.type == "video") { + if (player.type == 'video') { // Check type - switch(mimeType) { - case "video/webm": return !!(media.canPlayType && media.canPlayType("video/webm; codecs=\"vp8, vorbis\"").replace(/no/, "")); - case "video/mp4": return !!(media.canPlayType && media.canPlayType("video/mp4; codecs=\"avc1.42E01E, mp4a.40.2\"").replace(/no/, "")); - case "video/ogg": return !!(media.canPlayType && media.canPlayType("video/ogg; codecs=\"theora\"").replace(/no/, "")); + switch (mimeType) { + case 'video/webm': return !!(media.canPlayType && media.canPlayType('video/webm; codecs="vp8, vorbis"').replace(/no/, '')); + case 'video/mp4': return !!(media.canPlayType && media.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"').replace(/no/, '')); + case 'video/ogg': return !!(media.canPlayType && media.canPlayType('video/ogg; codecs="theora"').replace(/no/, '')); } } // Only check audio types for audio players - else if(player.type == "audio") { + else if (player.type == 'audio') { // Check type - switch(mimeType) { - case "audio/mpeg": return !!(media.canPlayType && media.canPlayType("audio/mpeg;").replace(/no/, "")); - case "audio/ogg": return !!(media.canPlayType && media.canPlayType("audio/ogg; codecs=\"vorbis\"").replace(/no/, "")); - case "audio/wav": return !!(media.canPlayType && media.canPlayType("audio/wav; codecs=\"1\"").replace(/no/, "")); + switch (mimeType) { + case 'audio/mpeg': return !!(media.canPlayType && media.canPlayType('audio/mpeg;').replace(/no/, '')); + case 'audio/ogg': return !!(media.canPlayType && media.canPlayType('audio/ogg; codecs="vorbis"').replace(/no/, '')); + case 'audio/wav': return !!(media.canPlayType && media.canPlayType('audio/wav; codecs="1"').replace(/no/, '')); } } @@ -334,13 +346,13 @@ // Inject a script function _injectScript(source) { - if(document.querySelectorAll("script[src='" + source + "']").length) { + if (document.querySelectorAll('script[src="' + source + '"]').length) { return; } - var tag = document.createElement("script"); + var tag = document.createElement('script'); tag.src = source; - var firstScriptTag = document.getElementsByTagName("script")[0]; + var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); } @@ -351,7 +363,7 @@ // Replace all function _replaceAll(string, find, replace) { - return string.replace(new RegExp(find.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, "\\$1"), "g"), replace); + return string.replace(new RegExp(find.replace(/([.*+?\^=!:${}()|\[\]\/\\])/g, '\\$1'), 'g'), replace); } // Wrap an element @@ -414,30 +426,30 @@ // Set attributes function _setAttributes(element, attributes) { - for(var key in attributes) { + for (var key in attributes) { element.setAttribute(key, attributes[key]); } } // Toggle class on an element function _toggleClass(element, name, state) { - if(element){ - if(element.classList) { - element.classList[state ? "add" : "remove"](name); + if (element) { + if (element.classList) { + element.classList[state ? 'add' : 'remove'](name); } else { - var className = (" " + element.className + " ").replace(/\s+/g, " ").replace(" " + name + " ", ""); - element.className = className + (state ? " " + name : ""); + var className = (' ' + element.className + ' ').replace(/\s+/g, ' ').replace(' ' + name + ' ', ''); + element.className = className + (state ? ' ' + name : ''); } } } // Toggle event function _toggleHandler(element, events, callback, toggle) { - var eventList = events.split(" "); + var eventList = events.split(' '); // If a nodelist is passed, call itself on each node - if(element instanceof NodeList) { + if (element instanceof NodeList) { for (var x = 0; x < element.length; x++) { if (element[x] instanceof Node) { _toggleHandler(element[x], arguments[1], arguments[2], arguments[3]); @@ -448,20 +460,20 @@ // If a single node is passed, bind the event listener for (var i = 0; i < eventList.length; i++) { - element[toggle ? "addEventListener" : "removeEventListener"](eventList[i], callback, false); + element[toggle ? 'addEventListener' : 'removeEventListener'](eventList[i], callback, false); } } // Bind event function _on(element, events, callback) { - if(element) { + if (element) { _toggleHandler(element, events, callback, true); } } // Unbind event function _off(element, events, callback) { - if(element) { + if (element) { _toggleHandler(element, events, callback, false); } } @@ -469,7 +481,7 @@ // Trigger event function _triggerEvent(element, event) { // Create faux event - var fauxEvent = document.createEvent("MouseEvents"); + var fauxEvent = document.createEvent('MouseEvents'); // Set the event type fauxEvent.initEvent(event, true, true); @@ -478,23 +490,20 @@ element.dispatchEvent(fauxEvent); } - // Toggle checkbox - function _toggleCheckbox(event) { - // Only listen for return key - if(event.keyCode && event.keyCode != 13) { - return true; - } - - // Toggle the checkbox - event.target.checked = !event.target.checked; - - // Trigger change event - _triggerEvent(event.target, "change"); + // Toggle aria-pressed state on a toggle button + function _toggleState(target, state) { + // Get state + state = (typeof state === 'boolean' ? state : !target.getAttribute('aria-pressed')); + + // Set the attribute on target + target.setAttribute('aria-pressed', state); + + return state; } // Get percentage function _getPercentage(current, max) { - if(current === 0 || max === 0 || isNaN(current) || isNaN(max)) { + if (current === 0 || max === 0 || isNaN(current) || isNaN(max)) { return 0; } return ((current / max) * 100).toFixed(2); @@ -523,68 +532,64 @@ isFullScreen: function() { return false; }, requestFullScreen: function() {}, cancelFullScreen: function() {}, - fullScreenEventName: "", + fullScreenEventName: '', element: null, - prefix: "" + prefix: '' }, - browserPrefixes = "webkit moz o ms khtml".split(" "); + browserPrefixes = 'webkit moz o ms khtml'.split(' '); - // check for native support - if (typeof document.cancelFullScreen != "undefined") { + // Check for native support + if (typeof document.cancelFullScreen !== 'undefined') { fullscreen.supportsFullScreen = true; } else { - // check for fullscreen support by vendor prefix + // Check for fullscreen support by vendor prefix for (var i = 0, il = browserPrefixes.length; i < il; i++ ) { fullscreen.prefix = browserPrefixes[i]; - if (typeof document[fullscreen.prefix + "CancelFullScreen"] != "undefined") { + if (typeof document[fullscreen.prefix + 'CancelFullScreen'] !== 'undefined') { fullscreen.supportsFullScreen = true; break; } // Special case for MS (when isn't it?) - else if (typeof document.msExitFullscreen != "undefined" && document.msFullscreenEnabled) { - fullscreen.prefix = "ms"; + else if (typeof document.msExitFullscreen !== 'undefined' && document.msFullscreenEnabled) { + fullscreen.prefix = 'ms'; fullscreen.supportsFullScreen = true; break; } } } - // Safari doesn't support the ALLOW_KEYBOARD_INPUT flag (for security) so set it to not supported - // https://bugs.webkit.org/show_bug.cgi?id=121496 - if(fullscreen.prefix === "webkit" && !!navigator.userAgent.match(/Version\/[\d\.]+.*Safari/)) { - fullscreen.supportsFullScreen = false; - } - // Update methods to do something useful if (fullscreen.supportsFullScreen) { - // Yet again Microsoft awesomeness, - // Sometimes the prefix is "ms", sometimes "MS" to keep you on your toes - fullscreen.fullScreenEventName = (fullscreen.prefix == "ms" ? "MSFullscreenChange" : fullscreen.prefix + "fullscreenchange"); + // Yet again Microsoft awesomeness, + // Sometimes the prefix is 'ms', sometimes 'MS' to keep you on your toes + fullscreen.fullScreenEventName = (fullscreen.prefix == 'ms' ? 'MSFullscreenChange' : fullscreen.prefix + 'fullscreenchange'); fullscreen.isFullScreen = function(element) { - if(typeof element == "undefined") { - element = document; + if (typeof element === 'undefined') { + element = document.body; } - switch (this.prefix) { - case "": + case '': return document.fullscreenElement == element; - case "moz": + case 'moz': return document.mozFullScreenElement == element; default: - return document[this.prefix + "FullscreenElement"] == element; + return document[this.prefix + 'FullscreenElement'] == element; } }; fullscreen.requestFullScreen = function(element) { - return (this.prefix === "") ? element.requestFullScreen() : element[this.prefix + (this.prefix == "ms" ? "RequestFullscreen" : "RequestFullScreen")](this.prefix === "webkit" ? element.ALLOW_KEYBOARD_INPUT : null); + if (typeof element === 'undefined') { + element = document.body; + } + return (this.prefix === '') ? element.requestFullScreen() : element[this.prefix + (this.prefix == 'ms' ? 'RequestFullscreen' : 'RequestFullScreen')](); }; fullscreen.cancelFullScreen = function() { - return (this.prefix === "") ? document.cancelFullScreen() : document[this.prefix + (this.prefix == "ms" ? "ExitFullscreen" : "CancelFullScreen")](); + return (this.prefix === '') ? document.cancelFullScreen() : document[this.prefix + (this.prefix == 'ms' ? 'ExitFullscreen' : 'CancelFullScreen')](); }; - fullscreen.element = function() { - return (this.prefix === "") ? document.fullscreenElement : document[this.prefix + "FullscreenElement"]; + fullscreen.element = function() { + return (this.prefix === '') ? document.fullscreenElement : document[this.prefix + 'FullscreenElement']; }; } @@ -596,13 +601,13 @@ var storage = { supported: (function() { try { - return "localStorage" in window && window.localStorage !== null; + return 'localStorage' in window && window.localStorage !== null; } catch(e) { return false; } })() - } + }; return storage; } @@ -615,7 +620,7 @@ // Seek the manual caption time and update UI function _seekManualCaptions(time) { // If it's not video, or we're using textTracks, bail. - if (player.usingTextTracks || player.type !== "video" || !player.supported.full) { + if (player.usingTextTracks || player.type !== 'video' || !player.supported.full) { return; } @@ -625,7 +630,7 @@ // Check time is a number, if not use currentTime // IE has a bug where currentTime doesn't go to 0 // https://twitter.com/Sam_Potts/status/573715746506731521 - time = typeof time === "number" ? time : player.media.currentTime; + time = typeof time === 'number' ? time : player.media.currentTime; while (_timecodeMax(player.captions[player.subcount][0]) < time.toFixed(1)) { player.subcount++; @@ -640,19 +645,28 @@ player.media.currentTime.toFixed(1) <= _timecodeMax(player.captions[player.subcount][0])) { player.currentCaption = player.captions[player.subcount][1]; - // Render the caption - player.captionsContainer.innerHTML = player.currentCaption; + // Trim caption text + var content = player.currentCaption.trim(); + + // Render the caption (only if changed) + if (player.captionsContainer.innerHTML != content) { + // Empty caption + // Otherwise NVDA reads it twice + player.captionsContainer.innerHTML = ''; + + // Set new caption text + player.captionsContainer.innerHTML = content; + } } else { - // Clear the caption - player.captionsContainer.innerHTML = ""; + player.captionsContainer.innerHTML = ''; } } // Display captions container and button (for initialization) function _showCaptions() { // If there's no caption toggle, bail - if(!player.buttons.captions) { + if (!player.buttons.captions) { return; } @@ -660,19 +674,19 @@ if (config.captions.defaultActive) { _toggleClass(player.container, config.classes.captions.active, true); - player.buttons.captions.checked = true; + _toggleState(player.buttons.captions, true); } } // Utilities for caption time codes function _timecodeMin(tc) { var tcpair = []; - tcpair = tc.split(" --> "); + tcpair = tc.split(' --> '); return _subTcSecs(tcpair[0]); } function _timecodeMax(tc) { var tcpair = []; - tcpair = tc.split(" --> "); + tcpair = tc.split(' --> '); return _subTcSecs(tcpair[1]); } function _subTcSecs(tc) { @@ -683,8 +697,8 @@ var tc1 = [], tc2 = [], seconds; - tc1 = tc.split(","); - tc2 = tc1[0].split(":"); + tc1 = tc.split(','); + tc2 = tc1[0].split(':'); seconds = Math.floor(tc2[0]*60*60) + Math.floor(tc2[1]*60) + Math.floor(tc2[2]); return seconds; } @@ -716,24 +730,24 @@ var html = config.html; // Insert custom video controls - _log("Injecting custom controls."); + _log('Injecting custom controls.'); // If no controls are specified, create default - if(!html) { + if (!html) { html = _buildControls(); } // Replace seek time instances - html = _replaceAll(html, "{seektime}", config.seekTime); + html = _replaceAll(html, '{seektime}', config.seekTime); // Replace all id references with random numbers - html = _replaceAll(html, "{id}", Math.floor(Math.random() * (10000))); + html = _replaceAll(html, '{id}', Math.floor(Math.random() * (10000))); // Inject into the container - player.container.insertAdjacentHTML("beforeend", html); + player.container.insertAdjacentHTML('beforeend', html); // Setup tooltips - if(config.tooltips) { + if (config.tooltips) { var labels = _getElements(config.selectors.labels); for (var i = labels.length - 1; i >= 0; i--) { @@ -763,7 +777,7 @@ // Inputs player.buttons.mute = _getElement(config.selectors.buttons.mute); player.buttons.captions = _getElement(config.selectors.buttons.captions); - player.checkboxes = _getElements("[type='checkbox']"); + player.checkboxes = _getElements('[type="checkbox"]'); // Progress player.progress = {}; @@ -772,12 +786,12 @@ // Progress - Buffering player.progress.buffer = {}; player.progress.buffer.bar = _getElement(config.selectors.progress.buffer); - player.progress.buffer.text = player.progress.buffer.bar && player.progress.buffer.bar.getElementsByTagName("span")[0]; + player.progress.buffer.text = player.progress.buffer.bar && player.progress.buffer.bar.getElementsByTagName('span')[0]; // Progress - Played player.progress.played = {}; player.progress.played.bar = _getElement(config.selectors.progress.played); - player.progress.played.text = player.progress.played.bar && player.progress.played.bar.getElementsByTagName("span")[0]; + player.progress.played.text = player.progress.played.bar && player.progress.played.bar.getElementsByTagName('span')[0]; // Volume player.volume = _getElement(config.selectors.buttons.volume); @@ -790,61 +804,61 @@ return true; } catch(e) { - _log("It looks like there's a problem with your controls html. Bailing.", true); + _log('It looks like there\'s a problem with your controls html. Bailing.', true); // Restore native video controls - player.media.setAttribute("controls", ""); + player.media.setAttribute('controls', ''); return false; } } - // Setup aria attributes - function _setupAria() { + // Setup aria attribute for play + function _setupPlayAria() { // If there's no play button, bail - if(!player.buttons.play) { + if (!player.buttons.play) { return; } // Find the current text - var label = player.buttons.play.innerText || "Play"; + var label = player.buttons.play.innerText || config.i18n.play; // If there's a media title set, use that for the label - if (typeof(config.title) !== "undefined" && config.title.length) { - label += ", " + config.title; + if (typeof(config.title) !== 'undefined' && config.title.length) { + label += ', ' + config.title; } - player.buttons.play.setAttribute("aria-label", label); + player.buttons.play.setAttribute('aria-label', label); } // Setup media function _setupMedia() { // If there's no media, bail - if(!player.media) { - _log("No audio or video element found!", true); + if (!player.media) { + _log('No audio or video element found!', true); return false; } - if(player.supported.full) { + if (player.supported.full) { // Remove native video controls - player.media.removeAttribute("controls"); + player.media.removeAttribute('controls'); // Add type class - _toggleClass(player.container, config.classes.type.replace("{0}", player.type), true); + _toggleClass(player.container, config.classes.type.replace('{0}', player.type), true); // If there's no autoplay attribute, assume the video is stopped and add state class - _toggleClass(player.container, config.classes.stopped, (player.media.getAttribute("autoplay") === null)); + _toggleClass(player.container, config.classes.stopped, (player.media.getAttribute('autoplay') === null)); // Add iOS class - if(player.browser.ios) { - _toggleClass(player.container, "ios", true); + if (player.browser.ios) { + _toggleClass(player.container, 'ios', true); } // Inject the player wrapper - if(player.type === "video") { + if (player.type === 'video') { // Create the wrapper div - var wrapper = document.createElement("div"); - wrapper.setAttribute("class", config.classes.videoWrapper); + var wrapper = document.createElement('div'); + wrapper.setAttribute('class', config.classes.videoWrapper); // Wrap the video in a container _wrap(player.media, wrapper); @@ -852,75 +866,119 @@ // Cache the container player.videoContainer = wrapper; } + } - // YouTube - if(player.type == "youtube") { - _setupYouTube(player.media.getAttribute("data-video-id")); - } + // YouTube + if (player.type == 'youtube') { + _setupEmbed(player.media.getAttribute('data-video-id'), 0); + } + + // Vimeo + if (player.type == 'vimeo') { + _setupEmbed(player.media.getAttribute('data-video-id'), 1); } // Autoplay - if(player.media.getAttribute("autoplay") !== null) { + if (player.media.getAttribute('autoplay') !== null) { _play(); } } - // Setup YouTube - function _setupYouTube(id) { + // Setup YouTube/Vimeo + function _setupEmbed(videoId, type) { + var container = document.createElement('div'), + providers = ['youtube', 'vimeo'], + id = providers[type] + '-' + Math.floor(Math.random() * (10000)); + // Remove old containers - var containers = _getElements("[id^='youtube']"); + var containers = _getElements('[id^="' + providers[type] + '-"]'); for (var i = containers.length - 1; i >= 0; i--) { _remove(containers[i]); } - // Create the YouTube container - var container = document.createElement("div"); - container.setAttribute("id", "youtube-" + Math.floor(Math.random() * (10000))); - player.media.appendChild(container); - // Add embed class for responsive _toggleClass(player.media, config.classes.videoWrapper, true); _toggleClass(player.media, config.classes.embedWrapper, true); - if(typeof YT === "object") { - _YTReady(id, container); - } - else { - // Load the API - _injectScript("https://www.youtube.com/iframe_api"); + // YouTube + if (type === 0) { + // Create the YouTube container + container.setAttribute('id', id); + player.media.appendChild(container); - // Setup callback for the API - window.onYouTubeIframeAPIReady = function () { _YTReady(id, container); } + // Setup API + if (typeof YT === 'object') { + _YouTubeReady(videoId, container); + } + else { + // Load the API + _injectScript('https://www.youtube.com/iframe_api'); + + // Setup callback for the API + window.onYouTubeIframeAPIReady = function () { _YouTubeReady(videoId, container); }; + } + } + else if (type === 1) { + // Inject the iframe + var iframe = document.createElement('iframe'); + iframe.src = 'https://player.vimeo.com/video/' + videoId + '?player_id=' + id + '&api=1&badge=0&byline=0&portrait=0&title=0'; + _setAttributes(iframe, { + 'id': id, + 'webkitallowfullscreen': '', + 'mozallowfullscreen': '', + 'allowfullscreen': '', + 'frameborder': 0 + }); + container.appendChild(iframe); + player.media.appendChild(container); + + // Setup API + if (typeof Froogaloop === 'function') { + _VimeoReady(id, iframe); + } + else { + // Load the API + _injectScript('https://f.vimeocdn.com/js/froogaloop2.min.js'); + + // Wait for fragaloop load + var timer = window.setInterval(function() { + if('$f' in window) { + window.clearInterval(timer); + _VimeoReady(id, iframe); + } + }, 50); + } } } - // Handle API ready - function _YTReady(id, container) { - _log("YouTube API Ready"); + // Handle YouTube API ready + function _YouTubeReady(videoId, container) { + _log('YouTube API Ready'); // Setup timers object // We have to poll YouTube for updates - if(!("timer" in player)) { + if (!('timer' in player)) { player.timer = {}; } // Setup instance // https://developers.google.com/youtube/iframe_api_reference player.embed = new YT.Player(container.id, { - videoId: id, + videoId: videoId, playerVars: { autoplay: 0, - controls: 0, - vq: "hd720", + controls: (player.supported.full ? 0 : 1), rel: 0, showinfo: 0, iv_load_policy: 3, - cc_lang_pref: "en", - wmode: "transparent", - modestbranding: 1 + cc_load_policy: (config.captions.defaultActive ? 1 : 0), + cc_lang_pref: 'en', + wmode: 'transparent', + modestbranding: 1, + disablekb: 1 }, events: { - onReady: function(event) { + 'onReady': function(event) { // Get the instance var instance = event.target; @@ -929,41 +987,43 @@ player.media.pause = function() { instance.pauseVideo(); }; player.media.stop = function() { instance.stopVideo(); }; player.media.duration = instance.getDuration(); - player.media.paused = (instance.getPlayerState() == 2); + player.media.paused = true; player.media.currentTime = instance.getCurrentTime(); player.media.muted = instance.isMuted(); // Trigger timeupdate - _triggerEvent(player.media, "timeupdate"); + _triggerEvent(player.media, 'timeupdate'); // Reset timer window.clearInterval(player.timer.buffering); // Setup buffering - player.timer.buffering = window.setInterval(function() { + player.timer.buffering = window.setInterval(function() { // Get loaded % from YouTube player.media.buffered = instance.getVideoLoadedFraction(); // Trigger progress - _triggerEvent(player.media, "progress"); + _triggerEvent(player.media, 'progress'); // Bail if we're at 100% - if(player.media.buffered === 1) { + if (player.media.buffered === 1) { window.clearInterval(player.timer.buffering); } }, 200); - // Only setup controls once - if(!player.container.querySelectorAll(config.selectors.controls).length) { - _setupInterface(); - } + if (player.supported.full) { + // Only setup controls once + if (!player.container.querySelectorAll(config.selectors.controls).length) { + _setupInterface(); + } - // Display duration if available - if(config.displayDuration) { - _displayDuration(); + // Display duration if available + if (config.displayDuration) { + _displayDuration(); + } } }, - onStateChange: function(event) { + 'onStateChange': function(event) { // Get the instance var instance = event.target; @@ -977,15 +1037,15 @@ // 2 Paused // 3 Buffering // 5 Video cued - switch(event.data) { + switch (event.data) { case 0: player.media.paused = true; - _triggerEvent(player.media, "ended"); + _triggerEvent(player.media, 'ended'); break; case 1: player.media.paused = false; - _triggerEvent(player.media, "play"); + _triggerEvent(player.media, 'play'); // Poll to get playback progress player.timer.playing = window.setInterval(function() { @@ -993,29 +1053,97 @@ player.media.currentTime = instance.getCurrentTime(); // Trigger timeupdate - _triggerEvent(player.media, "timeupdate"); + _triggerEvent(player.media, 'timeupdate'); }, 200); break; case 2: player.media.paused = true; - _triggerEvent(player.media, "pause"); - break; + _triggerEvent(player.media, 'pause'); } } } }); } + // Vimeo ready + function _VimeoReady(id, iframe) { + player.embed = $f(iframe); + + player.embed.addEvent('ready', function() { + // Create a faux HTML5 API using the Vimeo API + player.media.play = function() { player.embed.api('play'); }; + player.media.pause = function() { player.embed.api('pause'); }; + player.media.stop = function() { player.embed.api('stop') }; + player.media.paused = true; + player.media.currentTime = 0; + player.media.muted = false; + + if (player.supported.full) { + // Only setup controls once + if (!player.container.querySelectorAll(config.selectors.controls).length) { + _setupInterface(); + } + } + + player.embed.api('getCurrentTime', function (value) { + player.media.currentTime = value; + + // Trigger timeupdate + _triggerEvent(player.media, 'timeupdate'); + }); + + player.embed.api('getDuration', function(value) { + player.media.duration = value; + + // Display duration if available + if (player.supported.full && config.displayDuration) { + _displayDuration(); + } + }); + + player.embed.addEvent('play', function() { + player.media.paused = false; + _triggerEvent(player.media, 'play'); + }); + + player.embed.addEvent('pause', function() { + player.media.paused = true; + _triggerEvent(player.media, 'pause'); + }); + + player.embed.addEvent('playProgress', function(data) { + // Set the current time + player.media.currentTime = data.seconds; + + // Trigger timeupdate + _triggerEvent(player.media, 'timeupdate'); + }); + + player.embed.addEvent('loadProgress', function(data) { + // Get loaded % + player.media.buffered = data.percent; + + // Trigger progress + _triggerEvent(player.media, 'progress'); + }); + + player.embed.addEvent('finish', function() { + player.media.paused = true; + _triggerEvent(player.media, 'ended'); + }); + }); + } + // Setup captions function _setupCaptions() { - if(player.type === "video") { + if (player.type === 'video') { // Inject the container - player.videoContainer.insertAdjacentHTML("afterbegin", "
"); + player.videoContainer.insertAdjacentHTML('afterbegin', '
'); // Cache selector - player.captionsContainer = _getElement(config.selectors.captions); + player.captionsContainer = _getElement(config.selectors.captions).querySelector('span'); // Determine if HTML5 textTracks is supported player.usingTextTracks = false; @@ -1024,27 +1152,27 @@ } // Get URL of caption file if exists - var captionSrc = "", + var captionSrc = '', kind, children = player.media.childNodes; for (var i = 0; i < children.length; i++) { - if (children[i].nodeName.toLowerCase() === "track") { - kind = children[i].getAttribute("kind"); - if (kind === "captions") { - captionSrc = children[i].getAttribute("src"); + if (children[i].nodeName.toLowerCase() === 'track') { + kind = children[i].kind; + if (kind === 'captions' || kind === 'subtitles') { + captionSrc = children[i].getAttribute('src'); } } } // Record if caption file exists or not player.captionExists = true; - if (captionSrc === "") { + if (captionSrc === '') { player.captionExists = false; - _log("No caption track found."); + _log('No caption track found.'); } else { - _log("Caption track found; URI: " + captionSrc); + _log('Caption track found; URI: ' + captionSrc); } // If no caption file exists, hide container for caption text @@ -1056,41 +1184,41 @@ // Turn off native caption rendering to avoid double captions // This doesn't seem to work in Safari 7+, so the elements are removed from the dom below var tracks = player.media.textTracks; - for (var x=0; x < tracks.length; x++) { - tracks[x].mode = "hidden"; + for (var x = 0; x < tracks.length; x++) { + tracks[x].mode = 'hidden'; } // Enable UI _showCaptions(player); // Disable unsupported browsers than report false positive - if ((player.browser.name === "IE" && player.browser.version >= 10) || - (player.browser.name === "Firefox" && player.browser.version >= 31) || - (player.browser.name === "Chrome" && player.browser.version >= 43) || - (player.browser.name === "Safari" && player.browser.version >= 7)) { + if ((player.browser.name === 'IE' && player.browser.version >= 10) || + (player.browser.name === 'Firefox' && player.browser.version >= 31) || + (player.browser.name === 'Chrome' && player.browser.version >= 43) || + (player.browser.name === 'Safari' && player.browser.version >= 7)) { // Debugging - _log("Detected unsupported browser for HTML5 captions. Using fallback."); + _log('Detected unsupported browser for HTML5 captions. Using fallback.'); - // Set to false so skips to "manual" captioning + // Set to false so skips to 'manual' captioning player.usingTextTracks = false; } // Rendering caption tracks // Native support required - http://caniuse.com/webvtt if (player.usingTextTracks) { - _log("TextTracks supported."); + _log('TextTracks supported.'); - for (var y=0; y < tracks.length; y++) { + for (var y = 0; y < tracks.length; y++) { var track = tracks[y]; - if (track.kind === "captions") { - _on(track, "cuechange", function() { + if (track.kind === 'captions' || track.kind === 'subtitles') { + _on(track, 'cuechange', function() { // Clear container - player.captionsContainer.innerHTML = ""; + player.captionsContainer.innerHTML = ''; // Display a cue, if there is one - if (this.activeCues[0] && this.activeCues[0].hasOwnProperty("text")) { - player.captionsContainer.appendChild(this.activeCues[0].getCueAsHTML()); + if (this.activeCues[0] && this.activeCues[0].hasOwnProperty('text')) { + player.captionsContainer.appendChild(this.activeCues[0].getCueAsHTML().trim()); } }); } @@ -1098,57 +1226,57 @@ } // Caption tracks not natively supported else { - _log("TextTracks not supported so rendering captions manually."); + _log('TextTracks not supported so rendering captions manually.'); // Render captions from array at appropriate time - player.currentCaption = ""; + player.currentCaption = ''; player.captions = []; - if (captionSrc !== "") { + if (captionSrc !== '') { // Create XMLHttpRequest Object var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState === 4) { if (xhr.status === 200) { - var records = [], + var records = [], record, req = xhr.responseText; - records = req.split("\n\n"); + records = req.split('\n\n'); - for (var r=0; r < records.length; r++) { + for (var r = 0; r < records.length; r++) { record = records[r]; player.captions[r] = []; - player.captions[r] = record.split("\n"); + player.captions[r] = record.split('\n'); } - // Remove first element ("VTT") + // Remove first element ('VTT') player.captions.shift(); - _log("Successfully loaded the caption file via AJAX."); + _log('Successfully loaded the caption file via AJAX.'); } else { - _log("There was a problem loading the caption file via AJAX.", true); + _log('There was a problem loading the caption file via AJAX.', true); } } - } + }; - xhr.open("get", captionSrc, true); + xhr.open('get', captionSrc, true); xhr.send(); } } - // If Safari 7+, removing track from DOM [see "turn off native caption rendering" above] - if (player.browser.name === "Safari" && player.browser.version >= 7) { - _log("Safari 7+ detected; removing track from DOM."); + // If Safari 7+, removing track from DOM [see 'turn off native caption rendering' above] + if (player.browser.name === 'Safari' && player.browser.version >= 7) { + _log('Safari 7+ detected; removing track from DOM.'); // Find all elements - tracks = player.media.getElementsByTagName("track"); + tracks = player.media.getElementsByTagName('track'); // Loop through and remove one by one - for (var t=0; t < tracks.length; t++) { + for (var t = 0; t < tracks.length; t++) { player.media.removeChild(tracks[t]); } } @@ -1158,22 +1286,25 @@ // Setup fullscreen function _setupFullscreen() { - if(player.type != "audio" && config.fullscreen.enabled) { + if (player.type != 'audio' && config.fullscreen.enabled) { // Check for native support var nativeSupport = fullscreen.supportsFullScreen; - if(nativeSupport || (config.fullscreen.fallback && !_inFrame())) { - _log((nativeSupport ? "Native" : "Fallback") + " fullscreen enabled."); + if (nativeSupport || (config.fullscreen.fallback && !_inFrame())) { + _log((nativeSupport ? 'Native' : 'Fallback') + ' fullscreen enabled.'); // Add styling hook _toggleClass(player.container, config.classes.fullscreen.enabled, true); } else { - _log("Fullscreen not supported and fallback disabled."); + _log('Fullscreen not supported and fallback disabled.'); } + // Toggle state + _toggleState(player.buttons.fullscreen, false); + // Set control hide class hook - if(config.fullscreen.hideControls) { + if (config.fullscreen.hideControls) { _toggleClass(player.container, config.classes.fullscreen.hideControls, true); } } @@ -1192,23 +1323,23 @@ // Toggle playback function _togglePlay(toggle) { // Play - if(toggle === true) { + if (toggle === true) { _play(); } // Pause - else if(toggle === false) { + else if (toggle === false) { _pause(); } // True toggle else { - player.media[player.media.paused ? "play" : "pause"](); + player.media[player.media.paused ? 'play' : 'pause'](); } } // Rewind function _rewind(seekTime) { // Use default if needed - if(typeof seekTime !== "number") { + if (typeof seekTime !== 'number') { seekTime = config.seekTime; } _seek(player.media.currentTime - seekTime); @@ -1217,7 +1348,7 @@ // Fast forward function _forward(seekTime) { // Use default if needed - if(typeof seekTime !== "number") { + if (typeof seekTime !== 'number') { seekTime = config.seekTime; } _seek(player.media.currentTime + seekTime); @@ -1226,14 +1357,15 @@ // Seek to time // The input parameter can be an event or a number function _seek(input) { - var targetTime = 0; + var targetTime = 0, + paused = player.media.paused; // Explicit position - if (typeof input === "number") { + if (typeof input === 'number') { targetTime = input; } // Event - else if (typeof input === "object" && (input.type === "input" || input.type === "change")) { + else if (typeof input === 'object' && (input.type === 'input' || input.type === 'change')) { // It's the seek slider // Seek to the selected time targetTime = ((input.target.value / input.target.max) * player.media.duration); @@ -1254,18 +1386,29 @@ } catch(e) {} - // YouTube - if(player.type == "youtube") { - player.embed.seekTo(player.media.currentTime); + // Trigger timeupdate for embed and restore pause state + if ('embed' in player) { + // YouTube + if (player.type === 'youtube') { + player.embed.seekTo(targetTime); + } - // Trigger timeupdate - _triggerEvent(player.media, "timeupdate"); + // Vimeo + if (player.type === 'vimeo') { + player.embed.api('seekTo', targetTime); + } + + _triggerEvent(player.media, 'timeupdate'); + + if (paused) { + _pause(); + } } // Logging - _log("Seeking to " + player.media.currentTime + " seconds"); + _log('Seeking to ' + player.media.currentTime + ' seconds'); - // Special handling for "manual" captions + // Special handling for 'manual' captions _seekManualCaptions(targetTime); } @@ -1281,13 +1424,13 @@ var nativeSupport = fullscreen.supportsFullScreen; // If it's a fullscreen change event, it's probably a native close - if(event && event.type === fullscreen.fullScreenEventName) { + if (event && event.type === fullscreen.fullScreenEventName) { player.isFullscreen = fullscreen.isFullScreen(player.container); } // If there's native support, use it - else if(nativeSupport) { + else if (nativeSupport) { // Request fullscreen - if(!fullscreen.isFullScreen(player.container)) { + if (!fullscreen.isFullScreen(player.container)) { fullscreen.requestFullScreen(player.container); } // Bail from fullscreen @@ -1303,18 +1446,21 @@ player.isFullscreen = !player.isFullscreen; // Bind/unbind escape key - if(player.isFullscreen) { - _on(document, "keyup", _handleEscapeFullscreen); - document.body.style.overflow = "hidden"; + if (player.isFullscreen) { + _on(document, 'keyup', _handleEscapeFullscreen); + document.body.style.overflow = 'hidden'; } else { - _off(document, "keyup", _handleEscapeFullscreen); - document.body.style.overflow = ""; + _off(document, 'keyup', _handleEscapeFullscreen); + document.body.style.overflow = ''; } } // Set class hook _toggleClass(player.container, config.classes.fullscreen.active, player.isFullscreen); + + // Set button state + _toggleState(player.buttons.fullscreen, player.isFullscreen); // Toggle controls visibility based on mouse movement and location var hoverTimer, isMouseOver = false; @@ -1322,49 +1468,49 @@ // Show the player controls function _showControls() { // Set shown class - _toggleClass(player.controls, config.classes.hover, true); + _toggleClass(player.container, config.classes.hover, true); // Clear timer every movement window.clearTimeout(hoverTimer); // If the mouse is not over the controls, set a timeout to hide them - if(!isMouseOver) { + if (!isMouseOver) { hoverTimer = window.setTimeout(function() { - _toggleClass(player.controls, config.classes.hover, false); + _toggleClass(player.container, config.classes.hover, false); }, 2000); } } // Check mouse is over the controls function _setMouseOver (event) { - isMouseOver = (event.type === "mouseenter"); + isMouseOver = (event.type === 'mouseenter'); } - if(config.fullscreen.hideControls) { + if (config.fullscreen.hideControls) { // Hide on entering full screen _toggleClass(player.controls, config.classes.hover, false); // Keep an eye on the mouse location in relation to controls - _toggleHandler(player.controls, "mouseenter mouseleave", _setMouseOver, player.isFullscreen); + _toggleHandler(player.controls, 'mouseenter mouseleave', _setMouseOver, player.isFullscreen); // Show the controls on mouse move - _toggleHandler(player.container, "mousemove", _showControls, player.isFullscreen); + _toggleHandler(player.container, 'mousemove', _showControls, player.isFullscreen); } } // Bail from faux-fullscreen function _handleEscapeFullscreen(event) { // If it's a keypress and not escape, bail - if((event.which || event.charCode || event.keyCode) === 27 && player.isFullscreen) { - _toggleFullscreen(); + if ((event.which || event.charCode || event.keyCode) === 27 && player.isFullscreen) { + _toggleFullscreen(); } } // Set volume function _setVolume(volume) { // Use default if no value specified - if(typeof volume === "undefined") { - if(config.storage.enabled && _storage().supported) { + if (typeof volume === 'undefined') { + if (config.storage.enabled && _storage().supported) { volume = window.localStorage[config.storage.key] || config.volume; } else { @@ -1373,11 +1519,11 @@ } // Maximum is 10 - if(volume > 10) { + if (volume > 10) { volume = 10; } // Minimum is 0 - if(volume < 0) { + if (volume < 0) { volume = 0; } @@ -1385,15 +1531,22 @@ player.media.volume = parseFloat(volume / 10); // YouTube - if(player.type == "youtube") { + if (player.type === 'youtube') { player.embed.setVolume(player.media.volume * 100); + } - // Trigger timeupdate - _triggerEvent(player.media, "volumechange"); + // Vimeo + if (player.type === 'vimeo') { + player.embed.api('setVolume', player.media.volume); + } + + // Trigger volumechange for embeds + if ('embed' in player) { + _triggerEvent(player.media, 'volumechange'); } // Toggle muted state - if(player.media.muted && volume > 0) { + if (player.media.muted && volume > 0) { _toggleMute(); } } @@ -1401,19 +1554,22 @@ // Mute function _toggleMute(muted) { // If the method is called without parameter, toggle based on current value - if(typeof muted === "undefined") { + if (typeof muted !== 'boolean') { muted = !player.media.muted; } + // Set button state + _toggleState(player.buttons.mute, muted); + // Set mute on the player player.media.muted = muted; // YouTube - if(player.type === "youtube") { - player.embed[player.media.muted ? "mute" : "unMute"](); + if (player.type === 'youtube') { + player.embed[player.media.muted ? 'mute' : 'unMute'](); // Trigger timeupdate - _triggerEvent(player.media, "volumechange"); + _triggerEvent(player.media, 'volumechange'); } } @@ -1423,12 +1579,12 @@ var volume = player.media.muted ? 0 : (player.media.volume * 10); // Update the if present - if(player.supported.full && player.volume) { + if (player.supported.full && player.volume) { player.volume.value = volume; } // Store the volume in storage - if(config.storage.enabled && _storage().supported) { + if (config.storage.enabled && _storage().supported) { window.localStorage.setItem(config.storage.key, volume); } @@ -1436,30 +1592,33 @@ _toggleClass(player.container, config.classes.muted, (volume === 0)); // Update checkbox for mute state - if(player.supported.full && player.buttons.mute) { - player.buttons.mute.checked = (volume === 0); + if (player.supported.full && player.buttons.mute) { + _toggleState(player.buttons.mute, (volume === 0)); } } // Toggle captions - function _toggleCaptions(show) { + function _toggleCaptions(show) { // If there's no full support, or there's no caption toggle - if(!player.supported.full || !player.buttons.captions) { + if (!player.supported.full || !player.buttons.captions) { return; } // If the method is called without parameter, toggle based on current value - if(typeof show === "undefined") { + if (typeof show !== 'boolean') { show = (player.container.className.indexOf(config.classes.captions.active) === -1); - player.buttons.captions.checked = show; } + // Toggle state + _toggleState(player.buttons.captions, show); + + // Add class hook _toggleClass(player.container, config.classes.captions.active, show); } // Check if media is loading function _checkLoading(event) { - var loading = (event.type === "waiting"); + var loading = (event.type === 'waiting'); // Clear timer clearTimeout(player.loadingTimer); @@ -1472,59 +1631,58 @@ // Update elements function _updateProgress(event) { - var progress = player.progress.played.bar, - text = player.progress.played.text, + var progress = player.progress.played.bar, + text = player.progress.played.text, value = 0; - if(event) { - switch(event.type) { + if (event) { + switch (event.type) { // Video playing - case "timeupdate": - case "seeking": + case 'timeupdate': + case 'seeking': value = _getPercentage(player.media.currentTime, player.media.duration); - // Set seek range value only if it's a "natural" time event - if(event.type == "timeupdate" && player.buttons.seek) { + // Set seek range value only if it's a 'natural' time event + if (event.type == 'timeupdate' && player.buttons.seek) { player.buttons.seek.value = value; } break; // Events from seek range - case "change": - case "input": + case 'change': + case 'input': value = event.target.value; break; // Check buffer status - case "playing": - case "progress": + case 'playing': + case 'progress': progress = player.progress.buffer.bar; text = player.progress.buffer.text; - value = (function() { + value = (function() { var buffered = player.media.buffered; // HTML5 - if(buffered && buffered.length) { + if (buffered && buffered.length) { return _getPercentage(buffered.end(0), player.media.duration); } // YouTube returns between 0 and 1 - else if(typeof buffered == "number") { + else if (typeof buffered === 'number') { return (buffered * 100); } - return 0; + return 0; })(); - break; } } // Set values - if(progress) { + if (progress) { progress.value = value; } - if(text) { + if (text) { text.innerHTML = value; } } @@ -1532,7 +1690,7 @@ // Update the displayed time function _updateTimeDisplay(time, element) { // Bail if there's no duration display - if(!element) { + if (!element) { return; } @@ -1541,14 +1699,14 @@ player.hours = parseInt(((time / 60) / 60) % 60); // Do we need to display hours? - var displayHours = (parseInt(((player.media.duration / 60) / 60) % 60) > 0) + var displayHours = (parseInt(((player.media.duration / 60) / 60) % 60) > 0); - // Ensure it"s two digits. For example, 03 rather than 3. - player.secs = ("0" + player.secs).slice(-2); - player.mins = ("0" + player.mins).slice(-2); + // Ensure it's two digits. For example, 03 rather than 3. + player.secs = ('0' + player.secs).slice(-2); + player.mins = ('0' + player.mins).slice(-2); // Render - element.innerHTML = (displayHours ? player.hours + ":" : "") + player.mins + ":" + player.secs; + element.innerHTML = (displayHours ? player.hours + ':' : '') + player.mins + ':' + player.secs; } // Show the duration on metadataloaded @@ -1556,12 +1714,12 @@ var duration = player.media.duration || 0; // If there's only one time display, display duration there - if(!player.duration && config.displayDuration && player.media.paused) { + if (!player.duration && config.displayDuration && player.media.paused) { _updateTimeDisplay(duration, player.currentTime); } // If there's a duration element, update content - if(player.duration) { + if (player.duration) { _updateTimeDisplay(duration, player.duration); } } @@ -1578,7 +1736,7 @@ // Remove children and src attribute function _removeSources() { // Find child elements - var sources = player.media.querySelectorAll("source"); + var sources = player.media.querySelectorAll('source'); // Remove each for (var i = sources.length - 1; i >= 0; i--) { @@ -1586,14 +1744,14 @@ } // Remove src attribute - player.media.removeAttribute("src"); + player.media.removeAttribute('src'); } // Inject a source function _addSource(attributes) { - if(attributes.src) { + if (attributes.src) { // Create a new - var element = document.createElement("source"); + var element = document.createElement('source'); // Set all passed attributes _setAttributes(element, attributes); @@ -1606,16 +1764,23 @@ // Update source // Sources are not checked for support so be careful function _parseSource(sources) { - // YouTube - if(player.type === "youtube" && typeof sources === "string") { - // Destroy YouTube instance - player.embed.destroy(); + // Embed + if('embed' in player && typeof sources === 'string') { + // YouTube + if (player.type === 'youtube') { + // Destroy YouTube instance + player.embed.destroy(); - // Re-setup YouTube - // We don't use loadVideoBy[x] here since it has issues - _setupYouTube(sources); + // Re-setup YouTube + _setupEmbed(sources, 0); + } - // Update times + // Vimeo + if(player.type === 'vimeo') { + _setupEmbed(sources, 1); + } + + // Reset time display _timeUpdate(); // Bail @@ -1632,21 +1797,21 @@ _removeSources(); // If a single source is passed - // .source("path/to/video.mp4") - if(typeof sources === "string") { - player.media.setAttribute("src", sources); + // .source('path/to/video.mp4') + if (typeof sources === 'string') { + _addSource({ src: sources }); } // An array of source objects - // Check if a source exists, use that or set the "src" attribute? - // .source([{ src: "path/to/video.mp4", type: "video/mp4" },{ src: "path/to/video.webm", type: "video/webm" }]) + // Check if a source exists, use that or set the 'src' attribute? + // .source([{ src: 'path/to/video.mp4', type: 'video/mp4' },{ src: 'path/to/video.webm', type: 'video/webm' }]) else if (sources.constructor === Array) { - for (var index in sources) { + for (var index in sources) { _addSource(sources[index]); } } - if(player.supported.full) { + if (player.supported.full) { // Reset time display _timeUpdate(); @@ -1658,43 +1823,73 @@ player.media.load(); // Play if autoplay attribute is present - if(player.media.getAttribute("autoplay") !== null) { + if (player.media.getAttribute('autoplay') !== null) { _play(); } } // Update poster function _updatePoster(source) { - if(player.type === "video") { - player.media.setAttribute("poster", source); + if (player.type === 'video') { + player.media.setAttribute('poster', source); } } // Listen for events function _listeners() { // IE doesn't support input event, so we fallback to change - var inputEvent = (player.browser.name == "IE" ? "change" : "input"); + var inputEvent = (player.browser.name == 'IE' ? 'change' : 'input'); + + // Detect tab focus + function checkFocus() { + var focused = document.activeElement; + if (!focused || focused == document.body) { + focused = null; + } + else if (document.querySelector) { + focused = document.querySelector(':focus'); + } + for (var button in player.buttons) { + var element = player.buttons[button]; + + _toggleClass(element, 'tab-focus', (element === focused)); + } + } + _on(window, 'keyup', function(event) { + var code = (event.keyCode ? event.keyCode : event.which); + + if (code == 9) { + checkFocus(); + } + }); + for (var button in player.buttons) { + var element = player.buttons[button]; + + _on(element, 'blur', function() { + _toggleClass(element, 'tab-focus', false); + }); + } // Play - _on(player.buttons.play, "click", function() { - _play(); + _on(player.buttons.play, 'click', function() { + _play(); setTimeout(function() { player.buttons.pause.focus(); }, 100); }); // Pause - _on(player.buttons.pause, "click", function() { - _pause(); + _on(player.buttons.pause, 'click', function() { + _pause(); setTimeout(function() { player.buttons.play.focus(); }, 100); }); // Restart - _on(player.buttons.restart, "click", _seek); + _on(player.buttons.restart, 'click', _seek); // Rewind - _on(player.buttons.rewind, "click", _rewind); + _on(player.buttons.rewind, 'click', _rewind); // Fast forward - _on(player.buttons.forward, "click", _forward); + _on(player.buttons.forward, 'click', _forward); // Seek _on(player.buttons.seek, inputEvent, _seek); @@ -1705,37 +1900,33 @@ }); // Mute - _on(player.buttons.mute, "change", function() { - _toggleMute(this.checked); - }); + _on(player.buttons.mute, 'click', _toggleMute); // Fullscreen - _on(player.buttons.fullscreen, "click", _toggleFullscreen); + _on(player.buttons.fullscreen, 'click', _toggleFullscreen); // Handle user exiting fullscreen by escaping etc - if(fullscreen.supportsFullScreen) { + if (fullscreen.supportsFullScreen) { _on(document, fullscreen.fullScreenEventName, _toggleFullscreen); } // Time change on media - _on(player.media, "timeupdate seeking", _timeUpdate); + _on(player.media, 'timeupdate seeking', _timeUpdate); // Update manual captions - _on(player.media, "timeupdate", _seekManualCaptions); + _on(player.media, 'timeupdate', _seekManualCaptions); // Display duration - _on(player.media, "loadedmetadata", _displayDuration); + _on(player.media, 'loadedmetadata', _displayDuration); // Captions - _on(player.buttons.captions, "change", function() { - _toggleCaptions(this.checked); - }); + _on(player.buttons.captions, 'click', _toggleCaptions); // Handle the media finishing - _on(player.media, "ended", function() { + _on(player.media, 'ended', function() { // Clear - if(player.type === "video") { - player.captionsContainer.innerHTML = ""; + if (player.type === 'video') { + player.captionsContainer.innerHTML = ''; } // Reset UI @@ -1743,32 +1934,29 @@ }); // Check for buffer progress - _on(player.media, "progress playing", _updateProgress); + _on(player.media, 'progress playing', _updateProgress); // Handle native mute - _on(player.media, "volumechange", _updateVolume); + _on(player.media, 'volumechange', _updateVolume); // Handle native play/pause - _on(player.media, "play pause", _checkPlaying); + _on(player.media, 'play pause', _checkPlaying); // Loading - _on(player.media, "waiting canplay seeked", _checkLoading); - - // Toggle checkboxes on return key (as they look like buttons) - _on(player.checkboxes, "keyup", _toggleCheckbox); + _on(player.media, 'waiting canplay seeked', _checkLoading); // Click video - if(player.type === "video" && config.click) { - _on(player.videoContainer, "click", function() { - if(player.media.paused) { - _triggerEvent(player.buttons.play, "click"); + if (player.type === 'video' && config.click) { + _on(player.videoContainer, 'click', function() { + if (player.media.paused) { + _triggerEvent(player.buttons.play, 'click'); } - else if(player.media.ended) { + else if (player.media.ended) { _seek(); - _triggerEvent(player.buttons.play, "click"); + _triggerEvent(player.buttons.play, 'click'); } else { - _triggerEvent(player.buttons.pause, "click"); + _triggerEvent(player.buttons.pause, 'click'); } }); } @@ -1779,12 +1967,12 @@ // http://stackoverflow.com/questions/12528049/if-a-dom-element-is-removed-are-its-listeners-also-removed-from-memory function _destroy() { // Bail if the element is not initialized - if(!player.init) { + if (!player.init) { return null; } // Reset container classname - player.container.setAttribute("class", config.selectors.container.replace(".", "")); + player.container.setAttribute('class', config.selectors.container.replace('.', '')); // Remove init flag player.init = false; @@ -1793,13 +1981,13 @@ _remove(_getElement(config.selectors.controls)); // YouTube - if(player.type === "youtube") { + if (player.type === 'youtube') { player.embed.destroy(); return; } // If video, we need to remove some more - if(player.type === "video") { + if (player.type === 'video') { // Remove captions _remove(_getElement(config.selectors.captions)); @@ -1808,7 +1996,7 @@ } // Restore native video controls - player.media.setAttribute("controls", ""); + player.media.setAttribute('controls', ''); // Clone the media element to remove listeners // http://stackoverflow.com/questions/19469881/javascript-remove-all-event-listeners-of-specific-type @@ -1819,7 +2007,7 @@ // Setup a player function _init() { // Bail if the element is initialized - if(player.init) { + if (player.init) { return null; } @@ -1830,38 +2018,35 @@ player.browser = _browserSniff(); // Get the media element - player.media = player.container.querySelectorAll("audio, video, div")[0]; + player.media = player.container.querySelectorAll('audio, video, div')[0]; // Set media type var tagName = player.media.tagName.toLowerCase(); - switch(tagName) { - case "div": - player.type = player.media.getAttribute("data-type"); - break; - - default: - player.type = tagName; - break; + if (tagName === 'div') { + player.type = player.media.getAttribute('data-type'); + } + else { + player.type = tagName; } // Check for full support player.supported = api.supported(player.type); // If no native support, bail - if(!player.supported.basic) { + if (!player.supported.basic) { return false; } // Debug info - _log(player.browser.name + " " + player.browser.version); + _log(player.browser.name + ' ' + player.browser.version); // Setup media _setupMedia(); // Setup interface - if(player.type == "video" || player.type == "audio") { + if (player.type == 'video' || player.type == 'audio') { // Bail if no support - if(!player.supported.full) { + if (!player.supported.full) { return; } @@ -1869,12 +2054,12 @@ _setupInterface(); // Display duration if available - if(config.displayDuration) { + if (config.displayDuration) { _displayDuration(); } // Set up aria-label for Play button with the title option - _setupAria(); + _setupPlayAria(); } // Successful setup @@ -1886,7 +2071,7 @@ _injectControls(); // Find the elements - if(!_findElements()) { + if (!_findElements()) { return false; } @@ -1908,7 +2093,7 @@ _init(); // If init failed, return an empty object - if(!player.init) { + if (!player.init) { return {}; } @@ -1931,59 +2116,59 @@ support: function(mimeType) { return _supportMime(player, mimeType); }, destroy: _destroy, restore: _init - } + }; } // Check for support api.supported = function(type) { var browser = _browserSniff(), - oldIE = (browser.name === "IE" && browser.version <= 9), + oldIE = (browser.name === 'IE' && browser.version <= 9), iPhone = /iPhone|iPod/i.test(navigator.userAgent), - audio = !!document.createElement("audio").canPlayType, - video = !!document.createElement("video").canPlayType, + audio = !!document.createElement('audio').canPlayType, + video = !!document.createElement('video').canPlayType, basic, full; switch (type) { - case "video": + case 'video': basic = video; full = (basic && (!oldIE && !iPhone)); break; - case "audio": + case 'audio': basic = audio; full = (basic && !oldIE); - break; + break; - case "youtube": + case 'vimeo': + case 'youtube': basic = true; - full = !oldIE; - break; + full = (!oldIE && !iPhone); + break; default: basic = (audio && video); full = (basic && !oldIE); - break; } return { basic: basic, full: full }; - } + }; // Expose setup function - api.setup = function(options){ + api.setup = function(options) { // Extend the default options with user specified config = _extend(defaults, options); // Bail if disabled or no basic support // You may want to disable certain UAs etc - if(!config.enabled || !api.supported().basic) { + if (!config.enabled || !api.supported().basic) { return false; } // Get the players - var elements = document.querySelectorAll(config.selectors.container), + var elements = document.querySelectorAll(config.selectors.container), players = []; // Create a player instance for each element @@ -1992,7 +2177,7 @@ var element = elements[i]; // Setup a player instance and add to the element - if(typeof element.plyr === "undefined") { + if (typeof element.plyr === 'undefined') { // Create new instance var instance = new Plyr(element); @@ -2000,7 +2185,9 @@ element.plyr = (Object.keys(instance).length ? instance : false); // Callback - config.onSetup.apply(element.plyr); + if (typeof config.onSetup === 'function') { + config.onSetup.apply(element.plyr); + } } // Add to return array even if it's already setup @@ -2008,6 +2195,6 @@ } return players; - } + }; -}(this.plyr = this.plyr || {})); +}(this.plyr = this.plyr || {})); \ No newline at end of file diff --git a/src/less/plyr.less b/src/less/plyr.less index ecc37e37..d6f5f800 100644 --- a/src/less/plyr.less +++ b/src/less/plyr.less @@ -170,6 +170,7 @@ &-video-embed { padding-bottom: 56.25%; /* 16:9 */ height: 0; + overflow: hidden; iframe { position: absolute; @@ -178,6 +179,14 @@ width: 100%; height: 100%; border: 0; + user-select: none; + } + + // Vimeo hack + > div { + position: relative; + padding-bottom: 200%; + transform: translateY(-35.95%); } }