diff --git a/assets/js/plyr.js b/assets/js/plyr.js index 8c08de3c..73ff71ba 100644 --- a/assets/js/plyr.js +++ b/assets/js/plyr.js @@ -1,6 +1,6 @@ // ========================================================================== // Plyr -// plyr.js v1.0.8 +// plyr.js v1.0.9 // https://github.com/sampotts/plyr // ========================================================================== // Credits: http://paypal.github.io/accessible-html5-video-player/ @@ -33,7 +33,11 @@ captions: "[data-player='captions']", fullscreen: "[data-player='fullscreen']" }, - progress: ".player-progress", + progress: { + container: ".player-progress", + buffer: ".player-progress-buffer", + played: ".player-progress-played" + }, captions: ".player-captions", duration: ".player-duration", seekTime: ".player-seek-time" @@ -205,6 +209,11 @@ element.removeEventListener(event, callback, false); } + // Get percentage + function _getPercentage(current, max) { + return Math.floor((current / max) * 100); + } + // Get click position relative to parent // http://www.kirupa.com/html5/getting_mouse_click_position.htm function _getClickPosition(event) { @@ -419,30 +428,47 @@ // Find the UI controls and store references function _findElements() { - player.controls = _getElement(config.selectors.controls); + try { + player.controls = _getElement(config.selectors.controls); - // Buttons - player.buttons = {}; - player.buttons.play = _getElement(config.selectors.buttons.play); - player.buttons.pause = _getElement(config.selectors.buttons.pause); - player.buttons.restart = _getElement(config.selectors.buttons.restart); - player.buttons.rewind = _getElement(config.selectors.buttons.rewind); - player.buttons.forward = _getElement(config.selectors.buttons.forward); - player.buttons.mute = _getElement(config.selectors.buttons.mute); - player.buttons.captions = _getElement(config.selectors.buttons.captions); - player.buttons.fullscreen = _getElement(config.selectors.buttons.fullscreen); + // Buttons + player.buttons = {}; + player.buttons.play = _getElement(config.selectors.buttons.play); + player.buttons.pause = _getElement(config.selectors.buttons.pause); + player.buttons.restart = _getElement(config.selectors.buttons.restart); + player.buttons.rewind = _getElement(config.selectors.buttons.rewind); + player.buttons.forward = _getElement(config.selectors.buttons.forward); + player.buttons.mute = _getElement(config.selectors.buttons.mute); + player.buttons.captions = _getElement(config.selectors.buttons.captions); + player.buttons.fullscreen = _getElement(config.selectors.buttons.fullscreen); - // Progress - player.progress = {}; - player.progress.bar = _getElement(config.selectors.progress); - player.progress.text = player.progress.bar.getElementsByTagName("span")[0]; + // Progress + player.progress = {}; + player.progress.container = _getElement(config.selectors.progress.container); - // Volume - player.volume = _getElement(config.selectors.buttons.volume); + // Progress - Buffering + player.progress.buffer = {}; + player.progress.buffer.bar = _getElement(config.selectors.progress.buffer); + player.progress.buffer.text = player.progress.buffer.bar.getElementsByTagName("span")[0]; - // Timing - player.duration = _getElement(config.selectors.duration); - player.seekTime = _getElements(config.selectors.seekTime); + // Progress - Played + player.progress.played = {}; + player.progress.played.bar = _getElement(config.selectors.progress.played); + player.progress.played.text = player.progress.played.bar.getElementsByTagName("span")[0]; + + // Volume + player.volume = _getElement(config.selectors.buttons.volume); + + // Timing + player.duration = _getElement(config.selectors.duration); + player.seekTime = _getElements(config.selectors.seekTime); + + return true; + } + catch(e) { + _log("It looks like there's a problem with your controls html. Bailing.", true); + return false; + } } // Setup media @@ -526,7 +552,15 @@ } // If caption file exists, process captions else { - var track = {}, tracks, j; + // 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"; + } + + // Enable UI + _showCaptions(player); // If IE 10/11 or Firefox 31+ or Safari 7+, don"t use native captioning (still doesn"t work although they claim it"s now supported) if ((player.browserName === "IE" && player.browserMajorVersion === 10) || @@ -538,28 +572,18 @@ // Set to false so skips to "manual" captioning player.isTextTracks = false; - - // Turn off native caption rendering to avoid double captions [doesn"t work in Safari 7; see patch below] - track = {}; - tracks = player.media.textTracks; - for (j=0; j < tracks.length; j++) { - track = player.media.textTracks[j]; - track.mode = "hidden"; - } } - // Rendering caption tracks - native support required - http://caniuse.com/webvtt + // Rendering caption tracks + // Native support required - http://caniuse.com/webvtt if (player.isTextTracks) { _log("textTracks supported"); - _showCaptions(player); + + for (var y=0; y < tracks.length; y++) { + var track = tracks[y]; - track = {}; - tracks = player.media.textTracks; - for (j=0; j < tracks.length; j++) { - track = player.media.textTracks[j]; - track.mode = "hidden"; if (track.kind === "captions") { - _on(track, "cuechange",function() { + _on(track, "cuechange", function() { if (this.activeCues[0]) { if (this.activeCues[0].hasOwnProperty("text")) { player.captionsContainer.innerHTML = this.activeCues[0].text; @@ -572,7 +596,6 @@ // Caption tracks not natively supported else { _log("textTracks not supported so rendering captions manually"); - _showCaptions(player); // Render captions from array at appropriate time player.currentCaption = ""; @@ -601,12 +624,12 @@ xhr.onreadystatechange = function() { if (xhr.readyState === 4) { if (xhr.status === 200) { - player.captions = []; var records = [], record, req = xhr.responseText; records = req.split("\n\n"); + for (var r=0; r < records.length; r++) { record = records[r]; player.captions[r] = []; @@ -630,13 +653,17 @@ } } - // If Safari 7, removing track from DOM [see "turn off native caption rendering" above] - if (player.browserName === "Safari" && player.browserMajorVersion === 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.browserName === "Safari" && player.browserMajorVersion >= 7) { + _log("Safari 7+ detected; removing track from DOM"); + // Find all elements tracks = player.media.getElementsByTagName("track"); - player.media.removeChild(tracks[0]); + // Loop through and remove one by one + for (var t=0; t < tracks.length; t++) { + player.media.removeChild(tracks[t]); + } } } } @@ -848,6 +875,54 @@ _toggleClass(player.container, config.classes.muted, (player.media.volume === 0 || player.media.muted)); } + // Update elements + function _updateProgress(event) { + var progress, text, value = 0; + + switch(event.type) { + // Video playing + case "timeupdate": + progress = player.progress.played.bar; + text = player.progress.played.text; + value = _getPercentage(player.media.currentTime, player.media.duration); + break; + + // Check buffer status + case "playing": + case "progress": + progress = player.progress.buffer.bar; + text = player.progress.buffer.text; + value = (function() { + var buffered = player.media.buffered; + + if(buffered.length) { + return _getPercentage(buffered.end(0), player.media.duration); + } + + return 0; + })(); + break; + } + + if (progress && value > 0) { + progress.value = value; + text.innerHTML = value; + } + } + + // Update the displayed play time + function _updateTimeDisplay() { + player.secs = parseInt(player.media.currentTime % 60); + player.mins = parseInt((player.media.currentTime / 60) % 60); + + // 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 + player.duration.innerHTML = player.mins + ":" + player.secs; + } + // Listen for events function _listeners() { // Play @@ -907,30 +982,13 @@ } // Duration - _on(player.media, "timeupdate", function() { - player.secs = parseInt(player.media.currentTime % 60); - player.mins = parseInt((player.media.currentTime / 60) % 60); - - // 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); + _on(player.media, "timeupdate", _updateTimeDisplay); - // Render - player.duration.innerHTML = player.mins + ":" + player.secs; - }); - - // Progress bar - _on(player.media, "timeupdate", function() { - player.percent = (100 / player.media.duration) * player.media.currentTime; - - if (player.percent > 0) { - player.progress.bar.value = player.percent; - player.progress.text.innerHTML = player.percent; - } - }); + // Playing progress + _on(player.media, "timeupdate", _updateProgress); // Skip when clicking progress bar - _on(player.progress.bar, "click", function(event) { + _on(player.progress.played.bar, "click", function(event) { player.pos = _getClickPosition(event).x / this.offsetWidth; player.media.currentTime = player.pos * player.media.duration; @@ -953,6 +1011,15 @@ _toggleClass(player.container, config.classes.stopped, true); _toggleClass(player.container, config.classes.playing); }); + + _on(player.media, "loadstart", function() { + _log("loadstart"); + }); + + // Check for buffer progress + _on(player.media, "progress", _updateProgress); + // Also check on start of playing + _on(player.media, "playing", _updateProgress); } function _init() { @@ -992,7 +1059,12 @@ _injectControls(); // Find the elements - _findElements(); + if(!_findElements()) { + return false; + } + + // Captions + _setupCaptions(); // Set volume _setVolume(); @@ -1000,9 +1072,6 @@ // Setup fullscreen _setupFullscreen(); - // Captions - _setupCaptions(); - // Seeking _setupSeeking(); diff --git a/assets/less/plyr.less b/assets/less/plyr.less index 1c8a32d4..c1facb67 100644 --- a/assets/less/plyr.less +++ b/assets/less/plyr.less @@ -18,8 +18,9 @@ @control-spacing: 10px; // Progress -@progress-bg: @gray; -@progress-value-bg: @blue; +@progress-bg: lighten(@gray, 10%); +@progress-playing-bg: @blue; +@progress-buffered-bg: @gray; // Range @range-track-height: 6px; @@ -96,9 +97,8 @@ max-width: 100%; min-width: 290px; overflow: hidden; // For the controls - background: #000; - // BORDER-BOX ALL THE THINGS! + // border-box everything // http://paulirish.com/2012/box-sizing-border-box-ftw/ &, *, @@ -130,10 +130,10 @@ font-size: 16px; font-weight: 600; text-shadow: - -1px -1px 0 rgba(red(@gray-dark), green(@gray-dark), blue(@gray-dark), .5), - 1px -1px 0 rgba(red(@gray-dark), green(@gray-dark), blue(@gray-dark), .5), - -1px 1px 0 rgba(red(@gray-dark), green(@gray-dark), blue(@gray-dark), .5), - 1px 1px 0 rgba(red(@gray-dark), green(@gray-dark), blue(@gray-dark), .5); + -1px -1px 0 @gray, + 1px -1px 0 @gray, + -1px 1px 0 @gray, + 1px 1px 0 @gray; text-align: center; .font-smoothing(); @@ -206,18 +206,12 @@ input:focus + label, button:focus { .tab-focus(); - - svg { - fill: #fff; - } + color: #fff; } button:hover, input + label:hover { background: @control-color-active; - - svg { - fill: #fff; - } + color: #fff; } .icon-exit-fullscreen, .icon-muted { @@ -243,27 +237,48 @@ right: 0; width: 100%; height: @control-spacing; - margin: 0; - vertical-align: top; - - &[value] { - -webkit-appearance: none; - border: none; - background: @progress-bg; + background: @progress-bg; + + &-buffer, + &-played { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + margin: 0; + vertical-align: top; + + &[value] { + -webkit-appearance: none; + border: none; + background: transparent; + + + &::-webkit-progress-bar { + background: transparent; + } + + // Inherit from currentColor; + &::-webkit-progress-value { + background: currentColor; + transition: width .1s ease; + } + &::-moz-progress-bar { + background: currentColor; + transition: width .1s ease; + } + } + } + &-played { + z-index: 2; + } + &-played[value] { cursor: pointer; - color: @progress-value-bg; - - &::-webkit-progress-bar { - background: @progress-bg; - } - - // Inherit from currentColor; - &::-webkit-progress-value { - background: currentColor; - } - &::-moz-progress-bar { - background: currentColor; - } + color: @progress-playing-bg; + } + &-buffer[value] { + color: @progress-buffered-bg; } } diff --git a/assets/templates/controls.html b/assets/templates/controls.html index de36ed61..3ae8d8c4 100644 --- a/assets/templates/controls.html +++ b/assets/templates/controls.html @@ -1,7 +1,12 @@
- - 0% played - +
+ + 0% played + + + 0% buffered + +
"),s.b("\n"+e),s.b(' "),s.b("\n"+e),s.b(' "),s.b("\n"+e),s.b(' "),s.b("\n"+e),s.b(' "),s.b("\n"+e),s.b(' '),s.b("\n"+e),s.b(' Time'),s.b("\n"+e),s.b(' 00:00'),s.b("\n"+e),s.b(" "),s.b("\n"+e),s.b(" "),s.b("\n"+e),s.b(' '),s.b("\n"+e),s.b(' '),s.b("\n"+e),s.b(' "),s.b("\n"),s.b("\n"+e),s.b(' '),s.b("\n"+e),s.b(' '),s.b("\n"),s.b("\n"+e),s.b(' '),s.b("\n"+e),s.b(' "),s.b("\n"),s.b("\n"+e),s.b(' "),s.b("\n"+e),s.b(" "),s.b("\n"+e),s.b("
"),s.fl()},partials:{},subs:{}}),plyr.setup({debug:!0,title:"Video demo",html:templates.controls.render({}),captions:{defaultActive:!0}}); \ No newline at end of file +var Hogan={};!function(t){function n(t,n,e){var s;return n&&"object"==typeof n&&(void 0!==n[t]?s=n[t]:e&&n.get&&"function"==typeof n.get&&(s=n.get(t))),s}function e(t,n,e,s,r,a){function i(){}function o(){}i.prototype=t,o.prototype=t.subs;var l,u=new i;u.subs=new o,u.subsText={},u.buf="",s=s||{},u.stackSubs=s,u.subsText=a;for(l in n)s[l]||(s[l]=n[l]);for(l in s)u.subs[l]=s[l];r=r||{},u.stackPartials=r;for(l in e)r[l]||(r[l]=e[l]);for(l in r)u.partials[l]=r[l];return u}function s(t){return String(null===t||void 0===t?"":t)}function r(t){return t=s(t),c.test(t)?t.replace(a,"&").replace(i,"<").replace(o,">").replace(l,"'").replace(u,"""):t}t.Template=function(t,n,e,s){t=t||{},this.r=t.code||this.r,this.c=e,this.options=s||{},this.text=n||"",this.partials=t.partials||{},this.subs=t.subs||{},this.buf=""},t.Template.prototype={r:function(){return""},v:r,t:s,render:function(t,n,e){return this.ri([t],n||{},e)},ri:function(t,n,e){return this.r(t,n,e)},ep:function(t,n){var s=this.partials[t],r=n[s.name];if(s.instance&&s.base==r)return s.instance;if("string"==typeof r){if(!this.c)throw new Error("No compiler available.");r=this.c.compile(r,this.options)}if(!r)return null;if(this.partials[t].base=r,s.subs){n.stackText||(n.stackText={});for(key in s.subs)n.stackText[key]||(n.stackText[key]=void 0!==this.activeSub&&n.stackText[this.activeSub]?n.stackText[this.activeSub]:this.text);r=e(r,s.subs,s.partials,this.stackSubs,this.stackPartials,n.stackText)}return this.partials[t].instance=r,r},rp:function(t,n,e,s){var r=this.ep(t,e);return r?r.ri(n,e,s):""},rs:function(t,n,e){var s=t[t.length-1];if(!p(s))return e(t,n,this),void 0;for(var r=0;r=0;u--)if(i=e[u],a=n(t,i,l),void 0!==a){o=!0;break}return o?(r||"function"!=typeof a||(a=this.mv(a,e,s)),a):r?!1:""},ls:function(t,n,e,r,a){var i=this.options.delimiters;return this.options.delimiters=a,this.b(this.ct(s(t.call(n,r)),n,e)),this.options.delimiters=i,!1},ct:function(t,n,e){if(this.options.disableLambda)throw new Error("Lambda features disabled.");return this.c.compile(t,this.options).render(n,e)},b:function(t){this.buf+=t},fl:function(){var t=this.buf;return this.buf="",t},ms:function(t,n,e,s,r,a,i){var o,l=n[n.length-1],u=t.call(l);return"function"==typeof u?s?!0:(o=this.activeSub&&this.subsText&&this.subsText[this.activeSub]?this.subsText[this.activeSub]:this.text,this.ls(u,l,e,o.substring(r,a),i)):u},mv:function(t,n,e){var r=n[n.length-1],a=t.call(r);return"function"==typeof a?this.ct(s(a.call(r)),r,e):a},sub:function(t,n,e,s){var r=this.subs[t];r&&(this.activeSub=t,r(n,e,this,s),this.activeSub=!1)}};var a=/&/g,i=//g,l=/\'/g,u=/\"/g,c=/[&<>\"\']/,p=Array.isArray||function(t){return"[object Array]"===Object.prototype.toString.call(t)}}("undefined"!=typeof exports?exports:Hogan),function(t){function n(t){"}"===t.n.substr(t.n.length-1)&&(t.n=t.n.substring(0,t.n.length-1))}function e(t){return t.trim?t.trim():t.replace(/^\s*|\s*$/g,"")}function s(t,n,e){if(n.charAt(e)!=t.charAt(0))return!1;for(var s=1,r=t.length;r>s;s++)if(n.charAt(e+s)!=t.charAt(s))return!1;return!0}function r(n,e,s,o){var l=[],u=null,c=null,p=null;for(c=s[s.length-1];n.length>0;){if(p=n.shift(),c&&"<"==c.tag&&!(p.tag in k))throw new Error("Illegal content in < super tag.");if(t.tags[p.tag]<=t.tags.$||a(p,o))s.push(p),p.nodes=r(n,p.tag,s,o);else{if("/"==p.tag){if(0===s.length)throw new Error("Closing tag without opener: /"+p.n);if(u=s.pop(),p.n!=u.n&&!i(p.n,u.n,o))throw new Error("Nesting error: "+u.n+" vs. "+p.n);return u.end=p.i,l}"\n"==p.tag&&(p.last=0==n.length||"\n"==n[0].tag)}l.push(p)}if(s.length>0)throw new Error("missing closing tag: "+s.pop().n);return l}function a(t,n){for(var e=0,s=n.length;s>e;e++)if(n[e].o==t.n)return t.tag="#",!0}function i(t,n,e){for(var s=0,r=e.length;r>s;s++)if(e[s].c==t&&e[s].o==n)return!0}function o(t){var n=[];for(var e in t)n.push('"'+u(e)+'": function(c,p,t,i) {'+t[e]+"}");return"{ "+n.join(",")+" }"}function l(t){var n=[];for(var e in t.partials)n.push('"'+u(e)+'":{name:"'+u(t.partials[e].name)+'", '+l(t.partials[e])+"}");return"partials: {"+n.join(",")+"}, subs: "+o(t.subs)}function u(t){return t.replace(y,"\\\\").replace(g,'\\"').replace(d,"\\n").replace(v,"\\r").replace(m,"\\u2028").replace(x,"\\u2029")}function c(t){return~t.indexOf(".")?"d":"f"}function p(t,n){var e="<"+(n.prefix||""),s=e+t.n+w++;return n.partials[s]={name:t.n,partials:{}},n.code+='t.b(t.rp("'+u(s)+'",c,p,"'+(t.indent||"")+'"));',s}function b(t,n){n.code+="t.b(t.t(t."+c(t.n)+'("'+u(t.n)+'",c,p,0)));'}function f(t){return"t.b("+t+");"}var h=/\S/,g=/\"/g,d=/\n/g,v=/\r/g,y=/\\/g,m=/\u2028/,x=/\u2029/;t.tags={"#":1,"^":2,"<":3,$:4,"/":5,"!":6,">":7,"=":8,_v:9,"{":10,"&":11,_t:12},t.scan=function(r,a){function i(){y.length>0&&(m.push({tag:"_t",text:new String(y)}),y="")}function o(){for(var n=!0,e=w;e"==e.tag&&(e.indent=m[s].text.toString()),m.splice(s,1));else n||m.push({tag:"\n"});x=!1,w=m.length}function u(t,n){var s="="+S,r=t.indexOf(s,n),a=e(t.substring(t.indexOf("=",n)+1,r)).split(" ");return T=a[0],S=a[a.length-1],r+s.length-1}var c=r.length,p=0,b=1,f=2,g=p,d=null,v=null,y="",m=[],x=!1,k=0,w=0,T="{{",S="}}";for(a&&(a=a.split(" "),T=a[0],S=a[1]),k=0;c>k;k++)g==p?s(T,r,k)?(--k,i(),g=b):"\n"==r.charAt(k)?l(x):y+=r.charAt(k):g==b?(k+=T.length-1,v=t.tags[r.charAt(k+1)],d=v?r.charAt(k+1):"_v","="==d?(k=u(r,k),g=p):(v&&k++,g=f),x=k):s(S,r,k)?(m.push({tag:d,n:e(y),otag:T,ctag:S,i:"/"==d?x-T.length:k+S.length}),y="",k+=S.length-1,g=p,"{"==d&&("}}"==S?k++:n(m[m.length-1]))):y+=r.charAt(k);return l(x,!0),m};var k={_t:!0,"\n":!0,$:!0,"/":!0};t.stringify=function(n){return"{code: function (c,p,i) { "+t.wrapMain(n.code)+" },"+l(n)+"}"};var w=0;t.generate=function(n,e,s){w=0;var r={code:"",subs:{},partials:{}};return t.walk(n,r),s.asString?this.stringify(r,e,s):this.makeTemplate(r,e,s)},t.wrapMain=function(t){return'var t=this;t.b(i=i||"");'+t+"return t.fl();"},t.template=t.Template,t.makeTemplate=function(t,n,e){var s=this.makePartials(t);return s.code=new Function("c","p","i",this.wrapMain(t.code)),new this.template(s,n,this,e)},t.makePartials=function(t){var n,e={subs:{},partials:t.partials,name:t.name};for(n in e.partials)e.partials[n]=this.makePartials(e.partials[n]);for(n in t.subs)e.subs[n]=new Function("c","p","t","i",t.subs[n]);return e},t.codegen={"#":function(n,e){e.code+="if(t.s(t."+c(n.n)+'("'+u(n.n)+'",c,p,1),c,p,0,'+n.i+","+n.end+',"'+n.otag+" "+n.ctag+'")){t.rs(c,p,function(c,p,t){',t.walk(n.nodes,e),e.code+="});c.pop();}"},"^":function(n,e){e.code+="if(!t.s(t."+c(n.n)+'("'+u(n.n)+'",c,p,1),c,p,1,0,0,"")){',t.walk(n.nodes,e),e.code+="};"},">":p,"<":function(n,e){var s={partials:{},code:"",subs:{},inPartial:!0};t.walk(n.nodes,s);var r=e.partials[p(n,e)];r.subs=s.subs,r.partials=s.partials},$:function(n,e){var s={subs:{},code:"",partials:e.partials,prefix:n.n};t.walk(n.nodes,s),e.subs[n.n]=s.code,e.inPartial||(e.code+='t.sub("'+u(n.n)+'",c,p,i);')},"\n":function(t,n){n.code+=f('"\\n"'+(t.last?"":" + i"))},_v:function(t,n){n.code+="t.b(t.v(t."+c(t.n)+'("'+u(t.n)+'",c,p,0)));'},_t:function(t,n){n.code+=f('"'+u(t.text)+'"')},"{":b,"&":b},t.walk=function(n,e){for(var s,r=0,a=n.length;a>r;r++)s=t.codegen[n[r].tag],s&&s(n[r],e);return e},t.parse=function(t,n,e){return e=e||{},r(t,"",[],e.sectionTags||[])},t.cache={},t.cacheKey=function(t,n){return[t,!!n.asString,!!n.disableLambda,n.delimiters,!!n.modelGet].join("||")},t.compile=function(n,e){e=e||{};var s=t.cacheKey(n,e),r=this.cache[s];if(r){var a=r.partials;for(var i in a)delete a[i].instance;return r}return r=this.generate(this.parse(this.scan(n,e.delimiters),n,e),n,e),this.cache[s]=r}}("undefined"!=typeof exports?exports:Hogan);var Mustache=function(t){function n(n,e,s,r){var a=this.f(n,e,s,0),i=e;return a&&(i=i.concat(a)),t.Template.prototype.rp.call(this,n,i,s,r)}var e=function(e,s,r){this.rp=n,t.Template.call(this,e,s,r)};e.prototype=t.Template.prototype;var s,r=function(){this.cache={},this.generate=function(t,n){return new e(new Function("c","p","i",t),n,s)}};return r.prototype=t,s=new r,{to_html:function(t,n,e,r){var a=s.compile(t),i=a.render(n,e);return r?(r(i),void 0):i}}}(Hogan),templates={};templates.controls=new Hogan.Template({code:function(t,n,e){var s=this;return s.b(e=e||""),s.b('
'),s.b("\n"+e),s.b('
'),s.b("\n"+e),s.b(' '),s.b("\n"+e),s.b(" 0% played"),s.b("\n"+e),s.b(" "),s.b("\n"+e),s.b(' '),s.b("\n"+e),s.b(" 0% buffered"),s.b("\n"+e),s.b(" "),s.b("\n"+e),s.b("
"),s.b("\n"+e),s.b(' '),s.b("\n"+e),s.b(' "),s.b("\n"+e),s.b(' "),s.b("\n"+e),s.b(' "),s.b("\n"+e),s.b(' "),s.b("\n"+e),s.b(' "),s.b("\n"+e),s.b(' '),s.b("\n"+e),s.b(' Time'),s.b("\n"+e),s.b(' 00:00'),s.b("\n"+e),s.b(" "),s.b("\n"+e),s.b(" "),s.b("\n"+e),s.b(' '),s.b("\n"+e),s.b(' '),s.b("\n"+e),s.b(' "),s.b("\n"),s.b("\n"+e),s.b(' '),s.b("\n"+e),s.b(' '),s.b("\n"),s.b("\n"+e),s.b(' '),s.b("\n"+e),s.b(' "),s.b("\n"),s.b("\n"+e),s.b(' "),s.b("\n"+e),s.b(" "),s.b("\n"+e),s.b("
"),s.fl()},partials:{},subs:{}}),plyr.setup({debug:!0,title:"Video demo",html:templates.controls.render({}),captions:{defaultActive:!0}}); \ No newline at end of file diff --git a/dist/js/plyr.js b/dist/js/plyr.js index c1956f26..bb3b648c 100644 --- a/dist/js/plyr.js +++ b/dist/js/plyr.js @@ -1 +1 @@ -!function(e){"use strict";function t(e,t){m.debug&&window.console&&console[t?"error":"log"](e)}function n(){var e,t,n,r=navigator.userAgent,s=navigator.appName,a=""+parseFloat(navigator.appVersion),o=parseInt(navigator.appVersion,10);return-1!==navigator.appVersion.indexOf("Windows NT")&&-1!==navigator.appVersion.indexOf("rv:11")?(s="IE",a="11;"):-1!==(t=r.indexOf("MSIE"))?(s="IE",a=r.substring(t+5)):-1!==(t=r.indexOf("Chrome"))?(s="Chrome",a=r.substring(t+7)):-1!==(t=r.indexOf("Safari"))?(s="Safari",a=r.substring(t+7),-1!==(t=r.indexOf("Version"))&&(a=r.substring(t+8))):-1!==(t=r.indexOf("Firefox"))?(s="Firefox",a=r.substring(t+8)):(e=r.lastIndexOf(" ")+1)<(t=r.lastIndexOf("/"))&&(s=r.substring(e,t),a=r.substring(t+1),s.toLowerCase()==s.toUpperCase()&&(s=navigator.appName)),-1!==(n=a.indexOf(";"))&&(a=a.substring(0,n)),-1!==(n=a.indexOf(" "))&&(a=a.substring(0,n)),o=parseInt(""+a,10),isNaN(o)&&(a=""+parseFloat(navigator.appVersion),o=parseInt(navigator.appVersion,10)),[s,o]}function r(e,t,n){return e.replace(new RegExp(t.replace(/([.*+?^=!:${}()|\[\]\/\\])/g,"\\$1"),"g"),n)}function s(e,t){e.length||(e=[e]);for(var n=e.length-1;n>=0;n--){var r=n>0?t.cloneNode(!0):t,s=e[n],a=s.parentNode,o=s.nextSibling;r.appendChild(s),o?a.insertBefore(r,o):a.appendChild(r)}}function a(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 o(e,t,n){e.addEventListener(t,n,!1)}function i(e,t,n){e.removeEventListener(t,n,!1)}function c(e){var t=d().isFullScreen()?{x:0,y:0}:l(e.currentTarget);return{x:e.clientX-t.x,y:e.clientY-t.y}}function l(e){for(var t=0,n=0;e;)t+=e.offsetLeft-e.scrollLeft+e.clientLeft,n+=e.offsetTop-e.scrollTop+e.clientTop,e=e.offsetParent;return{x:t,y:n}}function u(e,t){for(var n in t)t[n]&&t[n].constructor&&t[n].constructor===Object?(e[n]=e[n]||{},u(e[n],t[n])):e[n]=t[n];return e}function d(){var e={supportsFullScreen:!1,isFullScreen:function(){return!1},requestFullScreen:function(){},cancelFullScreen:function(){},fullScreenEventName:"",element:null,prefix:""},t="webkit moz o ms khtml".split(" ");if("undefined"!=typeof document.cancelFullScreen)e.supportsFullScreen=!0;else for(var n=0,r=t.length;r>n;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(){switch(this.prefix){case"":return document.fullScreen;case"webkit":return document.webkitIsFullScreen;case"ms":return null!==document.msFullscreenElement;default:return document[this.prefix+"FullScreen"]}},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 p(e){function l(){for(B.subcount=0;b(B.captions[B.subcount][0])B.captions.length-1){B.subcount=B.captions.length-1;break}}function u(){a(B.container,m.classes.captions.enabled,!0),m.captions.defaultActive&&(a(B.container,m.classes.captions.active,!0),B.buttons.captions.setAttribute("checked","checked"))}function p(e){var t=[];return t=e.split(" --> "),v(t[0])}function b(e){var t=[];return t=e.split(" --> "),v(t[1])}function v(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 g(e){return B.container.querySelectorAll(e)}function y(e){return g(e)[0]}function h(){try{return window.self!==window.top}catch(e){return!0}}function x(){t("Injecting custom controls");var e=m.html;e=r(e,"{aria-label}",m.playAriaLabel),e=r(e,"{id}",B.random),B.container.insertAdjacentHTML("beforeend",e)}function k(){B.controls=y(m.selectors.controls),B.buttons={},B.buttons.play=y(m.selectors.buttons.play),B.buttons.pause=y(m.selectors.buttons.pause),B.buttons.restart=y(m.selectors.buttons.restart),B.buttons.rewind=y(m.selectors.buttons.rewind),B.buttons.forward=y(m.selectors.buttons.forward),B.buttons.mute=y(m.selectors.buttons.mute),B.buttons.captions=y(m.selectors.buttons.captions),B.buttons.fullscreen=y(m.selectors.buttons.fullscreen),B.progress={},B.progress.bar=y(m.selectors.progress),B.progress.text=B.progress.bar.getElementsByTagName("span")[0],B.volume=y(m.selectors.buttons.volume),B.duration=y(m.selectors.duration),B.seekTime=g(m.selectors.seekTime)}function w(){if(B.media=B.container.querySelectorAll("audio, video")[0],!B.media)return t("No audio or video element found!",!0),!1;if(B.media.removeAttribute("controls"),B.type="video"==B.media.tagName.toLowerCase()?"video":"audio",a(B.container,m.classes[B.type],!0),a(B.container,m.classes.stopped,null===B.media.getAttribute("autoplay")),"video"===B.type){var e=document.createElement("div");e.setAttribute("class",m.classes.videoWrapper),s(B.media,e),B.videoContainer=e}}function T(){if("video"===B.type){B.videoContainer.insertAdjacentHTML("afterbegin","
"),B.captionsContainer=y(m.selectors.captions),B.isTextTracks=!1,B.media.textTracks&&(B.isTextTracks=!0);for(var e,n="",r=B.media.childNodes,s=0;s=31||"Safari"===B.browserName&&B.browserMajorVersion>=7)for(t("Detected IE 10/11 or Firefox 31+ or Safari 7+"),B.isTextTracks=!1,l={},i=B.media.textTracks,c=0;cp(B.captions[B.subcount][0])&&B.media.currentTime.toFixed(1)b(B.captions[B.subcount][0])&&B.subcountt?0:t,B.isTextTracks||"video"!==B.type||l(B)}function E(e){"undefined"==typeof e&&(e=m.seekInterval);var t=B.media.currentTime+e;B.media.currentTime=t>B.media.duration?B.media.duration:t,B.isTextTracks||"video"!==B.type||l(B)}function L(){var e=f.supportsFullScreen;event.type===f.fullScreenEventName?m.fullscreen.active=f.isFullScreen():e?(f.isFullScreen()?f.cancelFullScreen():f.requestFullScreen(B.container),m.fullscreen.active=f.isFullScreen()):(m.fullscreen.active=!m.fullscreen.active,m.fullscreen.active?(o(document,"keyup",A),document.body.style.overflow="hidden"):(i(document,"keyup",A),document.body.style.overflow="")),a(B.container,m.classes.fullscreen.active,m.fullscreen.active)}function A(e){27===(e.which||e.charCode||e.keyCode)&&m.fullscreen.active&&L()}function V(e){"undefined"==typeof e&&(e=m.storage.enabled&&m.storage.supported?window.localStorage.plyr_volume||m.volume:m.volume),e>10&&(e=10),B.volume.value=e,B.media.volume=parseFloat(e/10),q(),m.storage.enabled&&m.storage.supported&&(window.localStorage.plyr_volume=e)}function O(e){"undefined"==typeof active&&(e=!B.media.muted,B.buttons.mute.checked=e),B.media.muted=e,q()}function j(e){"undefined"==typeof e&&(e=-1===B.container.className.indexOf(m.classes.captions.active),B.buttons.captions.checked=e),e?a(B.container,m.classes.captions.active,!0):a(B.container,m.classes.captions.active)}function q(){a(B.container,m.classes.muted,0===B.media.volume||B.media.muted)}function H(){o(B.buttons.play,"click",function(){N(),B.buttons.pause.focus()}),o(B.buttons.pause,"click",function(){C(),B.buttons.play.focus()}),o(B.buttons.restart,"click",I),o(B.buttons.rewind,"click",function(){M(m.seekInterval)}),o(B.buttons.forward,"click",function(){E(m.seekInterval)}),o(B.volume,"change",function(){V(this.value)}),o(B.buttons.mute,"change",function(){O(this.checked)}),o(B.buttons.fullscreen,"click",L),o(document,f.fullScreenEventName,L),"video"===B.type&&m.click&&o(B.videoContainer,"click",function(){B.media.paused?N():B.media.ended?I():C()}),o(B.media,"timeupdate",function(){B.secs=parseInt(B.media.currentTime%60),B.mins=parseInt(B.media.currentTime/60%60),B.secs=("0"+B.secs).slice(-2),B.mins=("0"+B.mins).slice(-2),B.duration.innerHTML=B.mins+":"+B.secs}),o(B.media,"timeupdate",function(){B.percent=100/B.media.duration*B.media.currentTime,B.percent>0&&(B.progress.bar.value=B.percent,B.progress.text.innerHTML=B.percent)}),o(B.progress.bar,"click",function(e){B.pos=c(e).x/this.offsetWidth,B.media.currentTime=B.pos*B.media.duration,B.isTextTracks||"video"!==B.type||l(B)}),o(B.buttons.captions,"click",function(){j(this.checked)}),o(B.media,"ended",function(){"video"===B.type&&(B.captionsContainer.innerHTML=""),a(B.container,m.classes.stopped,!0),a(B.container,m.classes.playing)})}function R(){return f=d(),B.browserInfo=n(),B.browserName=B.browserInfo[0],B.browserMajorVersion=B.browserInfo[1],t(B.browserName+" "+B.browserMajorVersion),"IE"!==B.browserName||8!==B.browserMajorVersion&&9!==B.browserMajorVersion?(m.playAriaLabel="undefined"!=typeof m.title&&m.title.length?"Play "+m.title:"Play",w(),B.random=Math.floor(1e4*Math.random()),x(),k(),V(),F(),T(),S(),H(),void 0):(t("Browser not suppported.",!0),!1)}var B=this;return B.container=e,R(),{media:B.media,play:N,pause:C,restart:I,rewind:M,forward:E,setVolume:V,toggleMute:O,toggleCaptions:j}}var f,m,b={enabled:!0,debug:!1,seekInterval:10,volume:5,click:!0,selectors:{container:".player",controls:".player-controls",buttons:{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:".player-progress",captions:".player-captions",duration:".player-duration",seekTime:".player-seek-time"},classes:{video:"player-video",videoWrapper:"player-video-wrapper",audio:"player-audio",stopped:"stopped",playing:"playing",muted:"muted",captions:{enabled:"captions-enabled",active:"captions-active"},fullscreen:{enabled:"fullscreen-enabled",active:"fullscreen-active"}},captions:{defaultActive:!1},fullscreen:{enabled:!0,fallback:!0},storage:{enabled:!0,supported:function(){try{return"localStorage"in window&&null!==window.localStorage}catch(e){return!1}}}};e.setup=function(e){if(m=u(b,e),!m.enabled)return!1;for(var t=document.querySelectorAll(m.selectors.container),n=[],r=t.length-1;r>=0;r--){var s=t[r];"undefined"==typeof s.plyr&&(s.plyr=new p(s)),n.push(s.plyr)}return n}}(this.plyr=this.plyr||{}); \ No newline at end of file +!function(e){"use strict";function t(e,t){b.debug&&window.console&&console[t?"error":"log"](e)}function n(){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)),[a,o]}function r(e,t,n){return e.replace(new RegExp(t.replace(/([.*+?^=!:${}()|\[\]\/\\])/g,"\\$1"),"g"),n)}function a(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 s(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 o(e,t,n){e.addEventListener(t,n,!1)}function i(e,t,n){e.removeEventListener(t,n,!1)}function c(e,t){return Math.floor(e/t*100)}function l(e){var t=d().isFullScreen()?{x:0,y:0}:u(e.currentTarget);return{x:e.clientX-t.x,y:e.clientY-t.y}}function u(e){for(var t=0,n=0;e;)t+=e.offsetLeft-e.scrollLeft+e.clientLeft,n+=e.offsetTop-e.scrollTop+e.clientTop,e=e.offsetParent;return{x:t,y:n}}function p(e,t){for(var n in t)t[n]&&t[n].constructor&&t[n].constructor===Object?(e[n]=e[n]||{},p(e[n],t[n])):e[n]=t[n];return e}function d(){var e={supportsFullScreen:!1,isFullScreen:function(){return!1},requestFullScreen:function(){},cancelFullScreen:function(){},fullScreenEventName:"",element:null,prefix:""},t="webkit moz o ms khtml".split(" ");if("undefined"!=typeof document.cancelFullScreen)e.supportsFullScreen=!0;else for(var n=0,r=t.length;r>n;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(){switch(this.prefix){case"":return document.fullScreen;case"webkit":return document.webkitIsFullScreen;case"ms":return null!==document.msFullscreenElement;default:return document[this.prefix+"FullScreen"]}},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 f(e){function u(){for(_.subcount=0;v(_.captions[_.subcount][0])<_.media.currentTime.toFixed(1);)if(_.subcount++,_.subcount>_.captions.length-1){_.subcount=_.captions.length-1;break}}function p(){s(_.container,b.classes.captions.enabled,!0),b.captions.defaultActive&&(s(_.container,b.classes.captions.active,!0),_.buttons.captions.setAttribute("checked","checked"))}function f(e){var t=[];return t=e.split(" --> "),g(t[0])}function v(e){var t=[];return t=e.split(" --> "),g(t[1])}function g(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 y(e){return _.container.querySelectorAll(e)}function h(e){return y(e)[0]}function x(){try{return window.self!==window.top}catch(e){return!0}}function k(){t("Injecting custom controls");var e=b.html;e=r(e,"{aria-label}",b.playAriaLabel),e=r(e,"{id}",_.random),_.container.insertAdjacentHTML("beforeend",e)}function w(){try{return _.controls=h(b.selectors.controls),_.buttons={},_.buttons.play=h(b.selectors.buttons.play),_.buttons.pause=h(b.selectors.buttons.pause),_.buttons.restart=h(b.selectors.buttons.restart),_.buttons.rewind=h(b.selectors.buttons.rewind),_.buttons.forward=h(b.selectors.buttons.forward),_.buttons.mute=h(b.selectors.buttons.mute),_.buttons.captions=h(b.selectors.buttons.captions),_.buttons.fullscreen=h(b.selectors.buttons.fullscreen),_.progress={},_.progress.container=h(b.selectors.progress.container),_.progress.buffer={},_.progress.buffer.bar=h(b.selectors.progress.buffer),_.progress.buffer.text=_.progress.buffer.bar.getElementsByTagName("span")[0],_.progress.played={},_.progress.played.bar=h(b.selectors.progress.played),_.progress.played.text=_.progress.played.bar.getElementsByTagName("span")[0],_.volume=h(b.selectors.buttons.volume),_.duration=h(b.selectors.duration),_.seekTime=y(b.selectors.seekTime),!0}catch(e){return t("It looks like there's a problem with your controls html. Bailing.",!0),!1}}function T(){if(_.media=_.container.querySelectorAll("audio, video")[0],!_.media)return t("No audio or video element found!",!0),!1;if(_.media.removeAttribute("controls"),_.type="video"==_.media.tagName.toLowerCase()?"video":"audio",s(_.container,b.classes[_.type],!0),s(_.container,b.classes.stopped,null===_.media.getAttribute("autoplay")),"video"===_.type){var e=document.createElement("div");e.setAttribute("class",b.classes.videoWrapper),a(_.media,e),_.videoContainer=e}}function S(){if("video"===_.type){_.videoContainer.insertAdjacentHTML("afterbegin","
"),_.captionsContainer=h(b.selectors.captions),_.isTextTracks=!1,_.media.textTracks&&(_.isTextTracks=!0);for(var e,n="",r=_.media.childNodes,a=0;a=31||"Safari"===_.browserName&&_.browserMajorVersion>=7)&&(t("Detected IE 10/11 or Firefox 31+ or Safari 7+"),_.isTextTracks=!1),_.isTextTracks){t("textTracks supported");for(var l=0;lf(_.captions[_.subcount][0])&&_.media.currentTime.toFixed(1)v(_.captions[_.subcount][0])&&_.subcount<_.captions.length-1&&_.subcount++,_.captionsContainer.innerHTML=_.currentCaption}),""!==n){var d=new XMLHttpRequest;d.onreadystatechange=function(){if(4===d.readyState)if(200===d.status){var e,n=[],r=d.responseText;n=r.split("\n\n");for(var a=0;a=7){t("Safari 7+ detected; removing track from DOM"),i=_.media.getElementsByTagName("track");for(var m=0;mt?0:t,_.isTextTracks||"video"!==_.type||u(_)}function L(e){"undefined"==typeof e&&(e=b.seekInterval);var t=_.media.currentTime+e;_.media.currentTime=t>_.media.duration?_.media.duration:t,_.isTextTracks||"video"!==_.type||u(_)}function A(){var e=m.supportsFullScreen;event.type===m.fullScreenEventName?b.fullscreen.active=m.isFullScreen():e?(m.isFullScreen()?m.cancelFullScreen():m.requestFullScreen(_.container),b.fullscreen.active=m.isFullScreen()):(b.fullscreen.active=!b.fullscreen.active,b.fullscreen.active?(o(document,"keyup",V),document.body.style.overflow="hidden"):(i(document,"keyup",V),document.body.style.overflow="")),s(_.container,b.classes.fullscreen.active,b.fullscreen.active)}function V(e){27===(e.which||e.charCode||e.keyCode)&&b.fullscreen.active&&A()}function O(e){"undefined"==typeof e&&(e=b.storage.enabled&&b.storage.supported?window.localStorage.plyr_volume||b.volume:b.volume),e>10&&(e=10),_.volume.value=e,_.media.volume=parseFloat(e/10),H(),b.storage.enabled&&b.storage.supported&&(window.localStorage.plyr_volume=e)}function j(e){"undefined"==typeof active&&(e=!_.media.muted,_.buttons.mute.checked=e),_.media.muted=e,H()}function q(e){"undefined"==typeof e&&(e=-1===_.container.className.indexOf(b.classes.captions.active),_.buttons.captions.checked=e),e?s(_.container,b.classes.captions.active,!0):s(_.container,b.classes.captions.active)}function H(){s(_.container,b.classes.muted,0===_.media.volume||_.media.muted)}function B(e){var t,n,r=0;switch(e.type){case"timeupdate":t=_.progress.played.bar,n=_.progress.played.text,r=c(_.media.currentTime,_.media.duration);break;case"playing":case"progress":t=_.progress.buffer.bar,n=_.progress.buffer.text,r=function(){var e=_.media.buffered;return e.length?c(e.end(0),_.media.duration):0}()}t&&r>0&&(t.value=r,n.innerHTML=r)}function R(){_.secs=parseInt(_.media.currentTime%60),_.mins=parseInt(_.media.currentTime/60%60),_.secs=("0"+_.secs).slice(-2),_.mins=("0"+_.mins).slice(-2),_.duration.innerHTML=_.mins+":"+_.secs}function P(){o(_.buttons.play,"click",function(){C(),_.buttons.pause.focus()}),o(_.buttons.pause,"click",function(){I(),_.buttons.play.focus()}),o(_.buttons.restart,"click",M),o(_.buttons.rewind,"click",function(){E(b.seekInterval)}),o(_.buttons.forward,"click",function(){L(b.seekInterval)}),o(_.volume,"change",function(){O(this.value)}),o(_.buttons.mute,"change",function(){j(this.checked)}),o(_.buttons.fullscreen,"click",A),o(document,m.fullScreenEventName,A),"video"===_.type&&b.click&&o(_.videoContainer,"click",function(){_.media.paused?C():_.media.ended?M():I()}),o(_.media,"timeupdate",R),o(_.media,"timeupdate",B),o(_.progress.played.bar,"click",function(e){_.pos=l(e).x/this.offsetWidth,_.media.currentTime=_.pos*_.media.duration,_.isTextTracks||"video"!==_.type||u(_)}),o(_.buttons.captions,"click",function(){q(this.checked)}),o(_.media,"ended",function(){"video"===_.type&&(_.captionsContainer.innerHTML=""),s(_.container,b.classes.stopped,!0),s(_.container,b.classes.playing)}),o(_.media,"loadstart",function(){t("loadstart")}),o(_.media,"progress",B),o(_.media,"playing",B)}function W(){return m=d(),_.browserInfo=n(),_.browserName=_.browserInfo[0],_.browserMajorVersion=_.browserInfo[1],t(_.browserName+" "+_.browserMajorVersion),"IE"!==_.browserName||8!==_.browserMajorVersion&&9!==_.browserMajorVersion?(b.playAriaLabel="undefined"!=typeof b.title&&b.title.length?"Play "+b.title:"Play",T(),_.random=Math.floor(1e4*Math.random()),k(),w()?(S(),O(),N(),F(),P(),void 0):!1):(t("Browser not suppported.",!0),!1)}var _=this;return _.container=e,W(),{media:_.media,play:C,pause:I,restart:M,rewind:E,forward:L,setVolume:O,toggleMute:j,toggleCaptions:q}}var m,b,v={enabled:!0,debug:!1,seekInterval:10,volume:5,click:!0,selectors:{container:".player",controls:".player-controls",buttons:{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",duration:".player-duration",seekTime:".player-seek-time"},classes:{video:"player-video",videoWrapper:"player-video-wrapper",audio:"player-audio",stopped:"stopped",playing:"playing",muted:"muted",captions:{enabled:"captions-enabled",active:"captions-active"},fullscreen:{enabled:"fullscreen-enabled",active:"fullscreen-active"}},captions:{defaultActive:!1},fullscreen:{enabled:!0,fallback:!0},storage:{enabled:!0,supported:function(){try{return"localStorage"in window&&null!==window.localStorage}catch(e){return!1}}}};e.setup=function(e){if(b=p(v,e),!b.enabled)return!1;for(var t=document.querySelectorAll(b.selectors.container),n=[],r=t.length-1;r>=0;r--){var a=t[r];"undefined"==typeof a.plyr&&(a.plyr=new f(a)),n.push(a.plyr)}return n}}(this.plyr=this.plyr||{}); \ No newline at end of file diff --git a/dist/js/templates.js b/dist/js/templates.js index 086c51a7..fb0502a9 100644 --- a/dist/js/templates.js +++ b/dist/js/templates.js @@ -1,2 +1,2 @@ var templates = {}; - templates['controls'] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("
");t.b("\n" + i);t.b(" ");t.b("\n" + i);t.b(" 0% played");t.b("\n" + i);t.b(" ");t.b("\n" + i);t.b(" ");t.b("\n" + i);t.b(" ");t.b("\n" + i);t.b(" ");t.b("\n" + i);t.b(" ");t.b("\n" + i);t.b(" ");t.b("\n" + i);t.b(" ");t.b("\n" + i);t.b(" ");t.b("\n" + i);t.b(" Time");t.b("\n" + i);t.b(" 00:00");t.b("\n" + i);t.b(" ");t.b("\n" + i);t.b(" ");t.b("\n" + i);t.b(" ");t.b("\n" + i);t.b(" ");t.b("\n" + i);t.b(" ");t.b("\n");t.b("\n" + i);t.b(" ");t.b("\n" + i);t.b(" ");t.b("\n");t.b("\n" + i);t.b(" ");t.b("\n" + i);t.b(" ");t.b("\n");t.b("\n" + i);t.b(" ");t.b("\n" + i);t.b(" ");t.b("\n" + i);t.b("
");return t.fl(); },partials: {}, subs: { }}); \ No newline at end of file + templates['controls'] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("
");t.b("\n" + i);t.b("
");t.b("\n" + i);t.b(" ");t.b("\n" + i);t.b(" 0% played");t.b("\n" + i);t.b(" ");t.b("\n" + i);t.b(" ");t.b("\n" + i);t.b(" 0% buffered");t.b("\n" + i);t.b(" ");t.b("\n" + i);t.b("
");t.b("\n" + i);t.b(" ");t.b("\n" + i);t.b(" ");t.b("\n" + i);t.b(" ");t.b("\n" + i);t.b(" ");t.b("\n" + i);t.b(" ");t.b("\n" + i);t.b(" ");t.b("\n" + i);t.b(" ");t.b("\n" + i);t.b(" Time");t.b("\n" + i);t.b(" 00:00");t.b("\n" + i);t.b(" ");t.b("\n" + i);t.b(" ");t.b("\n" + i);t.b(" ");t.b("\n" + i);t.b(" ");t.b("\n" + i);t.b(" ");t.b("\n");t.b("\n" + i);t.b(" ");t.b("\n" + i);t.b(" ");t.b("\n");t.b("\n" + i);t.b(" ");t.b("\n" + i);t.b(" ");t.b("\n");t.b("\n" + i);t.b(" ");t.b("\n" + i);t.b(" ");t.b("\n" + i);t.b("
");return t.fl(); },partials: {}, subs: { }}); \ No newline at end of file diff --git a/index.html b/index.html index 52a95451..5593c392 100644 --- a/index.html +++ b/index.html @@ -26,7 +26,7 @@ - +
diff --git a/readme.md b/readme.md index 92b953fb..c7bfd4fd 100644 --- a/readme.md +++ b/readme.md @@ -8,7 +8,7 @@ We wanted a lightweight, accessible and customisable media player that just supp ## Features - **Accessible** - full support for captions and screen readers. -- **Lightweight** - just 4KB minified and gzipped. +- **Lightweight** - just 4.8KB minified and gzipped. - **Customisable** - make the player look how you want with the markup you want. - **Semantic** - uses HTML5 form inputs for volume (range) and progress element for playback progress. - **No dependencies** - written in native JS. @@ -20,6 +20,9 @@ We wanted a lightweight, accessible and customisable media player that just supp - Accept a string selector, a node, or a nodelist for the `container` property of `selectors`. - Accept a selector for the `html` template property. +## Changelog +Check out [the changelog](changelog.md) + ## Implementation ### Bower