'),Ee.captionsContainer=q(N.selectors.captions).querySelector("span"),Ee.usingTextTracks=!1,Ee.media.textTracks&&(Ee.usingTextTracks=!0);for(var e,t="",n=Ee.media.childNodes,s=0;s=10||"Firefox"===Ee.browser.name&&Ee.browser.version>=31||"Chrome"===Ee.browser.name&&Ee.browser.version>=43||"Safari"===Ee.browser.name&&Ee.browser.version>=7)&&(r("Detected unsupported browser for HTML5 captions - using fallback"),Ee.usingTextTracks=!1),Ee.usingTextTracks){r("TextTracks supported");for(var i=0;i=7){r("Safari 7+ detected; removing track from DOM"),a=Ee.media.getElementsByTagName("track");for(var c=0;ct?t=0:t>Ee.media.duration&&(t=Ee.media.duration);try{Ee.media.currentTime=t.toFixed(1)}catch(s){}if(i(N.types.embed,Ee.type)){switch(Ee.type){case"youtube":Ee.embed.seekTo(t);break;case"vimeo":Ee.embed.api("seekTo",t.toFixed(0))}n&&ee(),T(Ee.media,"timeupdate"),Ee.media.seeking=!0}r("Seeking to "+Ee.media.currentTime+" seconds"),C(t)}function ae(){b(Ee.container,N.classes.playing,!Ee.media.paused),b(Ee.container,N.classes.stopped,Ee.media.paused)}function oe(e){var n=A.supportsFullScreen;e&&e.type===A.fullScreenEventName?Ee.isFullscreen=A.isFullScreen(Ee.container):n?(A.isFullScreen(Ee.container)?A.cancelFullScreen():A.requestFullScreen(Ee.container),Ee.isFullscreen=A.isFullScreen(Ee.container)):(Ee.isFullscreen=!Ee.isFullscreen,Ee.isFullscreen?(g(t,"keyup",ie),t.body.style.overflow="hidden"):(h(t,"keyup",ie),t.body.style.overflow="")),b(Ee.container,N.classes.fullscreen.active,Ee.isFullscreen),Ee.isFullscreen?Ee.container.setAttribute("tabindex","-1"):Ee.container.removeAttribute("tabindex"),R(Ee.isFullscreen),x(Ee.buttons.fullscreen,Ee.isFullscreen),N.fullscreen.hideControls&&ge(!0),T(Ee.container,Ee.isFullscreen?"enterfullscreen":"exitfullscreen")}function ie(e){27===(e.which||e.charCode||e.keyCode)&&Ee.isFullscreen&&oe()}function le(e){if("boolean"!=typeof e&&(e=!Ee.media.muted),x(Ee.buttons.mute,e),Ee.media.muted=e,i(N.types.embed,Ee.type)){switch(Ee.type){case"youtube":Ee.embed[Ee.media.muted?"mute":"unMute"]();break;case"vimeo":Ee.embed.api("setVolume",Ee.media.muted?0:parseFloat(N.volume/10))}T(Ee.media,"volumechange")}}function ue(t){if("undefined"==typeof t&&(t=N.storage.enabled&&E().supported?e.localStorage[N.storage.key]||N.volume:N.volume),t>10&&(t=10),0>t&&(t=0),Ee.media.volume=parseFloat(t/10),N.volume=t,i(N.types.embed,Ee.type)){switch(Ee.type){case"youtube":Ee.embed.setVolume(100*Ee.media.volume);break;case"vimeo":Ee.embed.api("setVolume",Ee.media.volume)}T(Ee.media,"volumechange")}Ee.media.muted&&t>0&&le()}function ce(){var t=Ee.media.muted?0:10*Ee.media.volume;Ee.supported.full&&Ee.volume&&(Ee.volume.value=t),N.storage.enabled&&E().supported&&e.localStorage.setItem(N.storage.key,t),b(Ee.container,N.classes.muted,0===t),Ee.supported.full&&Ee.buttons.mute&&x(Ee.buttons.mute,0===t)}function pe(e){Ee.supported.full&&Ee.buttons.captions&&("boolean"!=typeof e&&(e=-1===Ee.container.className.indexOf(N.classes.captions.active)),Ee.captionsEnabled=e,x(Ee.buttons.captions,Ee.captionsEnabled),b(Ee.container,N.classes.captions.active,Ee.captionsEnabled),T(Ee.container,Ee.captionsEnabled?"captionsenabled":"captionsdisabled"))}function de(e){var t="waiting"===e.type;clearTimeout(Ee.timers.loading),Ee.timers.loading=setTimeout(function(){b(Ee.container,N.classes.loading,t)},t?250:0)}function fe(e){var t=Ee.progress.played.bar,n=Ee.progress.played.text,r=0;if(e)switch(e.type){case"timeupdate":case"seeking":r=_(Ee.media.currentTime,Ee.media.duration),"timeupdate"==e.type&&Ee.buttons.seek&&(Ee.buttons.seek.value=r);break;case"change":case"input":r=e.target.value;break;case"playing":case"progress":t=Ee.progress.buffer.bar,n=Ee.progress.buffer.text,r=function(){var e=Ee.media.buffered;return e&&e.length?_(e.end(0),Ee.media.duration):"number"==typeof e?100*e:0}()}t&&(t.value=r),n&&(n.innerHTML=r)}function me(e,t){if(t){isNaN(e)&&(e=0),Ee.secs=parseInt(e%60),Ee.mins=parseInt(e/60%60),Ee.hours=parseInt(e/60/60%60);var n=parseInt(Ee.media.duration/60/60%60)>0;Ee.secs=("0"+Ee.secs).slice(-2),Ee.mins=("0"+Ee.mins).slice(-2),t.innerHTML=(n?Ee.hours+":":"")+Ee.mins+":"+Ee.secs}}function ye(){if(Ee.supported.full){var e=Ee.media.duration||0;!Ee.duration&&N.displayDuration&&Ee.media.paused&&me(e,Ee.currentTime),Ee.duration&&me(e,Ee.duration),ve()}}function be(e){me(Ee.media.currentTime,Ee.currentTime),e&&"timeupdate"==e.type&&Ee.media.seeking||fe(e)}function ve(e){if(N.tooltips.seek&&!Ee.browser.touch){var t=Ee.progress.container.getBoundingClientRect(),n=0,r=N.classes.tooltip+"--visible";if(e)n=100/t.width*(e.pageX-t.left);else{if(!v(Ee.progress.tooltip,r))return;n=Ee.progress.tooltip.style.left.replace("%","")}0>n?n=0:n>100&&(n=100),me(Ee.media.duration/100*n,Ee.progress.tooltip),Ee.progress.tooltip.style.left=n+"%",i(["mouseenter","mouseleave"],e.type)&&b(Ee.progress.tooltip,r,"mouseenter"===e.type)}}function ge(t){Ee.isFullscreen&&(b(Ee.container,N.classes.hover,!0),e.clearTimeout(Ee.timers.hover),Ee.timers.hover=e.setTimeout(function(){Ee.controls.mouseover&&t!==!0||b(Ee.container,N.classes.hover,!1)},2e3))}function he(e){if("undefined"!=typeof e)return void ke(e);var t;switch(Ee.type){case"youtube":t=Ee.embed.getVideoUrl();break;case"vimeo":Ee.embed.api("getVideoUrl",function(e){t=e});break;default:t=Ee.media.currentSrc}return t||""}function ke(n){if(!("undefined"!=typeof n&&"sources"in n&&n.sources.length))return void r("Invalid source format",!0);if(ee(),"youtube"===Ee.type?(Ee.embed.destroy(),e.clearInterval(Ee.timer.buffering),e.clearInterval(Ee.timer.playing)):"video"===Ee.type&&Ee.videoContainer&&p(Ee.videoContainer),p(Ee.media),"type"in n&&(Ee.type=n.type,"video"===Ee.type)){var s=n.sources[0];"type"in s&&i(N.types.embed,s.type)&&(Ee.type=s.type)}switch(Ee.supported=I.supported(Ee.type),Ee.type){case"video":Ee.media=t.createElement("video");break;case"audio":Ee.media=t.createElement("audio");break;case"youtube":case"vimeo":Ee.media=t.createElement("div"),Ee.embedId=n.sources[0].src}d(Ee.container,Ee.media),i(N.types.html5,Ee.type)&&(N.crossorigin&&Ee.media.setAttribute("crossorigin",""),N.autoplay&&Ee.media.setAttribute("autoplay",""),"poster"in n&&Ee.media.setAttribute("poster",n.poster),N.loop&&Ee.media.setAttribute("loop","")),Ee.container.className=Ee.originalClassName,b(Ee.container,N.classes.fullscreen.active,Ee.isFullscreen),b(Ee.container,N.classes.captions.active,Ee.captionsEnabled),Y(),N.autoplay=n.autoplay||N.autoplay,i(N.types.html5,Ee.type)&&j("source",n.sources),z(),i(N.types.html5,Ee.type)&&("tracks"in n&&j("track",n.tracks),Ee.media.load(),Fe(),ye()),N.autoplay&&Z(),"title"in n&&(N.title=n.title,$())}function we(e){"video"===Ee.type&&Ee.media.setAttribute("poster",e)}function Te(){function n(){var e=Ee.media.paused;e?Z():ee();var t=Ee.buttons[e?"play":"pause"],n=Ee.buttons[e?"pause":"play"];if(n){var r=v(t,N.classes.tabFocus);setTimeout(function(){n.focus(),r&&(b(t,N.classes.tabFocus,!1),b(n,N.classes.tabFocus,!0))},100)}}function r(){var e=t.activeElement;e&&e!=t.body?t.querySelector&&(e=t.querySelector(":focus")):e=null;for(var n in Ee.buttons){var r=Ee.buttons[n];b(r,N.classes.tabFocus,r===e)}}var s="IE"==Ee.browser.name?"change":"input";g(e,"keyup",function(e){var t=e.keyCode?e.keyCode:e.which;9==t&&r()}),g(t.body,"click",function(){b(q("."+N.classes.tabFocus),N.classes.tabFocus,!1)});for(var a in Ee.buttons){var o=Ee.buttons[a];g(o,"blur",function(){b(o,"tab-focus",!1)})}k(Ee.buttons.play,"click",N.listeners.play,n),k(Ee.buttons.pause,"click",N.listeners.pause,n),k(Ee.buttons.restart,"click",N.listeners.restart,se),k(Ee.buttons.rewind,"click",N.listeners.rewind,ne),k(Ee.buttons.forward,"click",N.listeners.forward,re),k(Ee.buttons.seek,s,N.listeners.seek,se),k(Ee.volume,s,N.listeners.volume,function(){ue(Ee.volume.value)}),k(Ee.buttons.mute,"click",N.listeners.mute,le),k(Ee.buttons.fullscreen,"click",N.listeners.fullscreen,oe),A.supportsFullScreen&&g(t,A.fullScreenEventName,oe),g(Ee.buttons.captions,"click",pe),g(Ee.progress.container,"mouseenter mouseleave mousemove",ve);N.fullscreen.hideControls&&g(Ee.controls,"mouseenter mouseleave",function(){Ee.controls.mouseover="mouseenter"===event.type})}function xe(){g(Ee.media,"timeupdate seeking",be),g(Ee.media,"timeupdate",C),g(Ee.media,"durationchange loadedmetadata",ye),g(Ee.media,"ended",function(){"video"===Ee.type&&(Ee.captionsContainer.innerHTML=""),ae()}),g(Ee.media,"progress playing",fe),g(Ee.media,"volumechange",ce),g(Ee.media,"play pause",ae),g(Ee.media,"waiting canplay seeked",de),N.click&&g(Ee.media,"click",function(){Ee.media.paused?Z():Ee.media.ended?(se(),Z()):ee()}),N.fullscreen.hideControls&&g(Ee.media,"mousemove",ge),g(Ee.media,N.events.join(" "),function(e){T(Ee.container,e.type)})}function _e(){if(!Ee.init)return null;if(Ee.container.setAttribute("class",y(N.selectors.container)),Ee.init=!1,p(q(N.selectors.controls.wrapper)),"youtube"===Ee.type)return void Ee.embed.destroy();"video"===Ee.type&&(p(q(N.selectors.captions)),c(Ee.videoContainer)),W(!0);var e=Ee.media.cloneNode(!0);Ee.media.parentNode.replaceChild(e,Ee.media)}function Ce(){if(Ee.init)return null;A=F(),Ee.browser=s(),Ee.media=Ee.container.querySelectorAll("audio, video, div")[0],Ee.originalClassName=Ee.container.className;var e=Ee.media.tagName.toLowerCase();if("div"===e?(Ee.type=Ee.media.getAttribute("data-type"),Ee.embedId=Ee.media.getAttribute("data-video-id"),Ee.media.removeAttribute("data-type"),Ee.media.removeAttribute("data-video-id")):(Ee.type=e,N.crossorigin=null!==Ee.media.getAttribute("crossorigin"),N.autoplay=N.autoplay||null!==Ee.media.getAttribute("autoplay"),N.loop=N.loop||null!==Ee.media.getAttribute("loop")),Ee.supported=I.supported(Ee.type),Y(),!Ee.supported.basic)return!1;if(r(Ee.browser.name+" "+Ee.browser.version),z(),i(N.types.html5,Ee.type)){if(!Ee.supported.full)return void(Ee.init=!0);Fe(),$()}Ee.init=!0}function Fe(){if(!Ee.supported.full)return r("No full support for this media type ("+Ee.type+")",!0),p(q(N.selectors.controls.wrapper)),void W(!0);var e=!V(N.selectors.controls.wrapper).length;e&&B(),D()&&(e&&Te(),xe(),W(),Q(),G(),ue(),ce(),be(),ae())}var Ee=this;return Ee.container=w,Ee.timers={},Ce(),Ee.init?{media:Ee.media,play:Z,pause:ee,restart:se,rewind:ne,forward:re,seek:se,source:he,poster:we,setVolume:ue,togglePlay:te,toggleMute:le,toggleCaptions:pe,toggleFullscreen:oe,isFullscreen:function(){return Ee.isFullscreen||!1},support:function(e){return a(Ee,e)},destroy:_e,restore:Ce}:{}}var A,N,I={},P={enabled:!0,debug:!1,autoplay:!1,loop:!1,seekTime:10,volume:5,click:!0,tooltips:{controls:!1,seek:!0},displayDuration:!0,iconPrefix:"icon",selectors:{container:".plyr",controls:{container:null,wrapper:".plyr__controls"},labels:"[data-plyr]",buttons:{seek:'[data-plyr="seek"]',play:'[data-plyr="play"]',pause:'[data-plyr="pause"]',restart:'[data-plyr="restart"]',rewind:'[data-plyr="rewind"]',forward:'[data-plyr="fast-forward"]',mute:'[data-plyr="mute"]',volume:'[data-plyr="volume"]',captions:'[data-plyr="captions"]',fullscreen:'[data-plyr="fullscreen"]'},progress:{container:".plyr__progress",buffer:".plyr__progress--buffer",played:".plyr__progress--played"},captions:".plyr__captions",currentTime:".plyr__time--current",duration:".plyr__time--duration"},classes:{videoWrapper:"plyr__video-wrapper",embedWrapper:"plyr__video-embed",type:"plyr--{0}",stopped:"plyr--stopped",playing:"plyr--playing",muted:"plyr--muted",loading:"plyr--loading",hover:"plyr--hover",tooltip:"plyr__tooltip",hidden:"plyr__sr-only",isIos:"plyr--is-ios",isTouch:"plyr--is-touch",captions:{enabled:"plyr--captions-enabled",active:"plyr--captions-active"},fullscreen:{enabled:"plyr--fullscreen-enabled",active:"plyr--fullscreen-active",hideControls:"plyr--fullscreen--hide-controls"},tabFocus:"tab-focus"},captions:{defaultActive:!1},fullscreen:{enabled:!0,fallback:!0,hideControls:!0,allowAudio:!1},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",frameTitle:"Player for {title}"},types:{embed:["youtube","vimeo"],html5:["video","audio"]},urls:{vimeo:{api:"https://cdn.plyr.io/froogaloop/1.0.0/plyr.froogaloop.js"},youtube:{api:"https://www.youtube.com/iframe_api"}},listeners:{seek:null,play:null,pause:null,restart:null,rewind:null,forward:null,mute:null,volume:null,captions:null,fullscreen:null},events:["ended","progress","stalled","playing","waiting","canplay","canplaythrough","loadstart","loadeddata","loadedmetadata","timeupdate","volumechange","play","pause","error","seeking","emptied"]};return I.supported=function(e){var n,r,a=s(),o="IE"===a.name&&a.version<=9,i=/iPhone|iPod/i.test(navigator.userAgent),l=!!t.createElement("audio").canPlayType,u=!!t.createElement("video").canPlayType;
switch(e){case"video":n=u,r=n&&!o&&!i;break;case"audio":n=l,r=n&&!o;break;case"vimeo":case"youtube":n=!0,r=!o&&!i;break;default:n=l&&u,r=n&&!o}return{basic:n,full:r}},I.setup=function(e,n){var r=[];if("string"==typeof e?e=t.querySelectorAll(e):e instanceof HTMLElement?e=[e]:e instanceof NodeList||"string"==typeof e||("undefined"==typeof n&&"object"==typeof e&&(n=e),e=t.querySelectorAll(P.selectors.container)),N=C(P,n),!N.enabled||!I.supported().basic||!e.length)return!1;for(var s=e.length-1;s>=0;s--){var a=e[s];if("undefined"==typeof a.plyr){var o=new S(a);a.plyr=Object.keys(o).length?o:!1,T(a,"setup",{plyr:a.plyr})}r.push(a.plyr)}return r},I}),function(){function e(e,t){t=t||{bubbles:!1,cancelable:!1,detail:void 0};var n=document.createEvent("CustomEvent");return n.initCustomEvent(e,t.bubbles,t.cancelable,t.detail),n}e.prototype=window.Event.prototype,"CustomEvent"in window||(window.CustomEvent=e)}();
\ No newline at end of file
diff --git a/package.json b/package.json
index 2f70a14e..cf4d32f3 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "plyr",
- "version": "1.5.7",
+ "version": "1.5.8",
"description": "A simple HTML5 media player using custom controls",
"homepage": "http://plyr.io",
"main": "gulpfile.js",
diff --git a/readme.md b/readme.md
index 0f84960f..8e9b54de 100644
--- a/readme.md
+++ b/readme.md
@@ -40,7 +40,7 @@ If you have any cool ideas or features, please let me know by [creating an issue
Check `docs/index.html` and `docs/dist/docs.js` for an example setup.
-**Heads up:** the example `index.html` file needs to be served from a webserver (such as Apache, Nginx, IIS or similar) unless you change the file sources to include http or https. e.g. change `//cdn.plyr.io/1.5.7/plyr.js` to `https://cdn.plyr.io/1.5.7/plyr.js`
+**Heads up:** the example `index.html` file needs to be served from a webserver (such as Apache, Nginx, IIS or similar) unless you change the file sources to include http or https. e.g. change `//cdn.plyr.io/1.5.8/plyr.js` to `https://cdn.plyr.io/1.5.8/plyr.js`
### Bower
If bower is your thang, you can grab Plyr using:
@@ -60,11 +60,11 @@ More info is on [npm](https://www.npmjs.com/package/ember-cli-plyr) and [GitHub]
If you want to use our CDN, you can use the following:
```html
-
-
+
+
```
-You can also access the `sprite.svg` file at `https://cdn.plyr.io/1.5.7/sprite.svg`.
+You can also access the `sprite.svg` file at `https://cdn.plyr.io/1.5.8/sprite.svg`.
### CSS & Styling
If you want to use the default css, add the `plyr.css` file from `/dist` into your head, or even better use `plyr.less` or `plyr.sass` file included in `/src` in your build to save a request.
@@ -161,7 +161,7 @@ More info on CORS here:
Here's an example of a default setup:
```html
-
+
```
diff --git a/src/js/plyr.js b/src/js/plyr.js
index 0749b716..ac6c7d20 100644
--- a/src/js/plyr.js
+++ b/src/js/plyr.js
@@ -2048,7 +2048,7 @@
// Update hover tooltip for seeking
function _updateSeekTooltip(event) {
// Bail if setting not true
- if (!config.tooltips.seek) {
+ if (!config.tooltips.seek || plyr.browser.touch) {
return;
}
@@ -2251,11 +2251,11 @@
// Load HTML5 sources
plyr.media.load();
- // Display duration if available
- _displayDuration();
-
// Setup interface
_setupInterface();
+
+ // Display duration if available
+ _displayDuration();
}
// Play if autoplay attribute is present
diff --git a/src/less/plyr.less b/src/less/plyr.less
index 65918665..f480ed3f 100644
--- a/src/less/plyr.less
+++ b/src/less/plyr.less
@@ -110,8 +110,11 @@
.seek-thumb() {
background: transparent;
border: 0;
- width: (@plyr-control-spacing * 4);
+ width: 1px;
height: @plyr-control-spacing;
+}
+.seek-thumb-touch() {
+ width: (@plyr-control-spacing * 4);
transform: translateX(-50%);
}
.seek-track() {
@@ -495,6 +498,21 @@
}
}
+ // Touch seek wider handle
+ &--is-touch &--seek[type='range'] {
+ &::-webkit-slider-thumb {
+ .seek-thumb-touch();
+ }
+ // Mozilla
+ &::-moz-range-thumb {
+ .seek-thumb-touch();
+ }
+ // Microsoft
+ &::-ms-thumb {
+ .seek-thumb-touch();
+ }
+ }
+
// Loading state
&--loading .plyr__progress--buffer {
animation: plyr-progress 1s linear infinite;
diff --git a/src/sass/plyr.scss b/src/sass/plyr.scss
index fd905af0..dd118602 100644
--- a/src/sass/plyr.scss
+++ b/src/sass/plyr.scss
@@ -111,8 +111,11 @@ $plyr-bp-captions-large: 768px !default; // When captions jump to the la
@mixin seek-thumb() {
background: transparent;
border: 0;
- width: ($plyr-control-spacing * 4);
+ width: 1px;
height: $plyr-control-spacing;
+}
+@mixin seek-thumb-touch() {
+ width: ($plyr-control-spacing * 4);
transform: translateX(-50%);
}
@mixin seek-track() {
@@ -496,6 +499,21 @@ $plyr-bp-captions-large: 768px !default; // When captions jump to the la
}
}
+ // Touch seek wider handle
+ &--is-touch &--seek[type='range'] {
+ &::-webkit-slider-thumb {
+ @include seek-thumb-touch();
+ }
+ // Mozilla
+ &::-moz-range-thumb {
+ @include seek-thumb-touch();
+ }
+ // Microsoft
+ &::-ms-thumb {
+ @include seek-thumb-touch();
+ }
+ }
+
// Loading state
&--loading .plyr__progress--buffer {
animation: plyr-progress 1s linear infinite;