Merge branch 'master' of github.com:selz/plyr

# Conflicts:
#	src/js/plyr.js

docs/dist/docs.js

@@ -1 +1 @@
-"document"in self&&("classList"in document.createElement("_")?!function(){"use strict";var e=document.createElement("_");if(e.classList.add("c1","c2"),!e.classList.contains("c2")){var t=function(e){var t=DOMTokenList.prototype[e];DOMTokenList.prototype[e]=function(e){var i,n=arguments.length;for(i=0;n>i;i++)e=arguments[i],t.call(this,e)}};t("add"),t("remove")}if(e.classList.toggle("c3",!1),e.classList.contains("c3")){var i=DOMTokenList.prototype.toggle;DOMTokenList.prototype.toggle=function(e,t){return 1 in arguments&&!this.contains(e)==!t?t:i.call(this,e)}}e=null}():!function(e){"use strict";if("Element"in e){var t="classList",i="prototype",n=e.Element[i],s=Object,o=String[i].trim||function(){return this.replace(/^\s+|\s+$/g,"")},r=Array[i].indexOf||function(e){for(var t=0,i=this.length;i>t;t++)if(t in this&&this[t]===e)return t;return-1},a=function(e,t){this.name=e,this.code=DOMException[e],this.message=t},c=function(e,t){if(""===t)throw new a("SYNTAX_ERR","An invalid or illegal string was specified");if(/\s/.test(t))throw new a("INVALID_CHARACTER_ERR","String contains an invalid character");return r.call(e,t)},l=function(e){for(var t=o.call(e.getAttribute("class")||""),i=t?t.split(/\s+/):[],n=0,s=i.length;s>n;n++)this.push(i[n]);this._updateClassName=function(){e.setAttribute("class",this.toString())}},u=l[i]=[],d=function(){return new l(this)};if(a[i]=Error[i],u.item=function(e){return this[e]||null},u.contains=function(e){return e+="",-1!==c(this,e)},u.add=function(){var e,t=arguments,i=0,n=t.length,s=!1;do e=t[i]+"",-1===c(this,e)&&(this.push(e),s=!0);while(++i<n);s&&this._updateClassName()},u.remove=function(){var e,t,i=arguments,n=0,s=i.length,o=!1;do for(e=i[n]+"",t=c(this,e);-1!==t;)this.splice(t,1),o=!0,t=c(this,e);while(++n<s);o&&this._updateClassName()},u.toggle=function(e,t){e+="";var i=this.contains(e),n=i?t!==!0&&"remove":t!==!1&&"add";return n&&this[n](e),t===!0||t===!1?t:!i},u.toString=function(){return this.join(" ")},s.defineProperty){var p={get:d,enumerable:!0,configurable:!0};try{s.defineProperty(n,t,p)}catch(h){-2146823252===h.number&&(p.enumerable=!1,s.defineProperty(n,t,p))}}else s[i].__defineGetter__&&n.__defineGetter__(t,d)}}(self)),plyr.setup(".js-media-player",{debug:!0,title:"Video demo",tooltips:{controls:!0},captions:{defaultActive:!0},duration:100}),shr.setup({count:{classname:"btn__count"}}),function(){function e(e,t,i){if(e)if(e.classList)e.classList[i?"add":"remove"](t);else{var n=(" "+e.className+" ").replace(/\s+/g," ").replace(" "+t+" ","");e.className=n+(i?" "+t:"")}}function t(t,o){if(t in n&&(o||t!=s)&&(s.length||t!=n.video)){var r=document.querySelector(".js-media-player").plyr;switch(t){case n.video:r.source({type:"video",title:"View From A Blue Moon",sources:[{src:"https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.mp4",type:"video/mp4"},{src:"https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.webm",type:"video/webm"}],poster:"https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.jpg",tracks:[{kind:"captions",label:"English",srclang:"en",src:"https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.vtt","default":!0}]});break;case n.audio:r.source({type:"audio",title:"Kishi Bashi &ndash; &ldquo;It All Began With A Burst&rdquo;",sources:[{src:"https://cdn.selz.com/plyr/1.5/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3",type:"audio/mp3"},{src:"https://cdn.selz.com/plyr/1.5/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg",type:"audio/ogg"}]});break;case n.youtube:r.source({type:"video",title:"View From A Blue Moon",sources:[{src:"bTqVqk7FSmY",type:"youtube"}]});break;case n.vimeo:r.source({type:"video",title:"View From A Blue Moon",sources:[{src:"143418951",type:"vimeo"}]})}s=t;for(var a=i.length-1;a>=0;a--)e(i[a].parentElement,"active",!1);e(document.querySelector('[data-source="'+t+'"]').parentElement,"active",!0)}}for(var i=document.querySelectorAll("[data-source]"),n={video:"video",audio:"audio",youtube:"youtube",vimeo:"vimeo"},s=window.location.hash.replace("#",""),o=window.history&&window.history.pushState,r=i.length-1;r>=0;r--)i[r].addEventListener("click",function(){var e=this.getAttribute("data-source");t(e),o&&history.pushState({type:e},"","#"+e)});if(window.addEventListener("popstate",function(e){e.state&&"type"in e.state&&t(e.state.type)}),o){var a=!s.length;a&&(s=n.video),s in n&&history.replaceState({type:s},"",a?"":"#"+s),s!==n.video&&t(s,!0)}}(),document.domain.indexOf("plyr.io")>-1&&(!function(e,t,i,n,s,o,r){e.GoogleAnalyticsObject=s,e[s]=e[s]||function(){(e[s].q=e[s].q||[]).push(arguments)},e[s].l=1*new Date,o=t.createElement(i),r=t.getElementsByTagName(i)[0],o.async=1,o.src=n,r.parentNode.insertBefore(o,r)}(window,document,"script","//www.google-analytics.com/analytics.js","ga"),ga("create","UA-40881672-11","auto"),ga("send","pageview"));
+"document"in self&&("classList"in document.createElement("_")?!function(){"use strict";var e=document.createElement("_");if(e.classList.add("c1","c2"),!e.classList.contains("c2")){var t=function(e){var t=DOMTokenList.prototype[e];DOMTokenList.prototype[e]=function(e){var i,s=arguments.length;for(i=0;s>i;i++)e=arguments[i],t.call(this,e)}};t("add"),t("remove")}if(e.classList.toggle("c3",!1),e.classList.contains("c3")){var i=DOMTokenList.prototype.toggle;DOMTokenList.prototype.toggle=function(e,t){return 1 in arguments&&!this.contains(e)==!t?t:i.call(this,e)}}e=null}():!function(e){"use strict";if("Element"in e){var t="classList",i="prototype",s=e.Element[i],n=Object,o=String[i].trim||function(){return this.replace(/^\s+|\s+$/g,"")},r=Array[i].indexOf||function(e){for(var t=0,i=this.length;i>t;t++)if(t in this&&this[t]===e)return t;return-1},a=function(e,t){this.name=e,this.code=DOMException[e],this.message=t},c=function(e,t){if(""===t)throw new a("SYNTAX_ERR","An invalid or illegal string was specified");if(/\s/.test(t))throw new a("INVALID_CHARACTER_ERR","String contains an invalid character");return r.call(e,t)},l=function(e){for(var t=o.call(e.getAttribute("class")||""),i=t?t.split(/\s+/):[],s=0,n=i.length;n>s;s++)this.push(i[s]);this._updateClassName=function(){e.setAttribute("class",this.toString())}},u=l[i]=[],d=function(){return new l(this)};if(a[i]=Error[i],u.item=function(e){return this[e]||null},u.contains=function(e){return e+="",-1!==c(this,e)},u.add=function(){var e,t=arguments,i=0,s=t.length,n=!1;do e=t[i]+"",-1===c(this,e)&&(this.push(e),n=!0);while(++i<s);n&&this._updateClassName()},u.remove=function(){var e,t,i=arguments,s=0,n=i.length,o=!1;do for(e=i[s]+"",t=c(this,e);-1!==t;)this.splice(t,1),o=!0,t=c(this,e);while(++s<n);o&&this._updateClassName()},u.toggle=function(e,t){e+="";var i=this.contains(e),s=i?t!==!0&&"remove":t!==!1&&"add";return s&&this[s](e),t===!0||t===!1?t:!i},u.toString=function(){return this.join(" ")},n.defineProperty){var p={get:d,enumerable:!0,configurable:!0};try{n.defineProperty(s,t,p)}catch(h){-2146823252===h.number&&(p.enumerable=!1,n.defineProperty(s,t,p))}}else n[i].__defineGetter__&&s.__defineGetter__(t,d)}}(self)),plyr.setup(".js-media-player",{debug:!0,title:"Video demo",tooltips:{controls:!0},captions:{defaultActive:!0}}),shr.setup({count:{classname:"btn__count"}}),function(){function e(e,t,i){if(e)if(e.classList)e.classList[i?"add":"remove"](t);else{var s=(" "+e.className+" ").replace(/\s+/g," ").replace(" "+t+" ","");e.className=s+(i?" "+t:"")}}function t(t,o){if(t in s&&(o||t!=n)&&(n.length||t!=s.video)){var r=document.querySelector(".js-media-player").plyr;switch(t){case s.video:r.source({type:"video",title:"View From A Blue Moon",sources:[{src:"https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.mp4",type:"video/mp4"},{src:"https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.webm",type:"video/webm"}],poster:"https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.jpg",tracks:[{kind:"captions",label:"English",srclang:"en",src:"https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.vtt","default":!0}]});break;case s.audio:r.source({type:"audio",title:"Kishi Bashi &ndash; &ldquo;It All Began With A Burst&rdquo;",sources:[{src:"https://cdn.selz.com/plyr/1.5/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3",type:"audio/mp3"},{src:"https://cdn.selz.com/plyr/1.5/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg",type:"audio/ogg"}]});break;case s.youtube:r.source({type:"video",title:"View From A Blue Moon",sources:[{src:"bTqVqk7FSmY",type:"youtube"}]});break;case s.vimeo:r.source({type:"video",title:"View From A Blue Moon",sources:[{src:"143418951",type:"vimeo"}]})}n=t;for(var a=i.length-1;a>=0;a--)e(i[a].parentElement,"active",!1);e(document.querySelector('[data-source="'+t+'"]').parentElement,"active",!0)}}for(var i=document.querySelectorAll("[data-source]"),s={video:"video",audio:"audio",youtube:"youtube",vimeo:"vimeo"},n=window.location.hash.replace("#",""),o=window.history&&window.history.pushState,r=i.length-1;r>=0;r--)i[r].addEventListener("click",function(){var e=this.getAttribute("data-source");t(e),o&&history.pushState({type:e},"","#"+e)});if(window.addEventListener("popstate",function(e){e.state&&"type"in e.state&&t(e.state.type)}),o){var a=!n.length;a&&(n=s.video),n in s&&history.replaceState({type:n},"",a?"":"#"+n),n!==s.video&&t(n,!0)}}(),document.domain.indexOf("plyr.io")>-1&&(!function(e,t,i,s,n,o,r){e.GoogleAnalyticsObject=n,e[n]=e[n]||function(){(e[n].q=e[n].q||[]).push(arguments)},e[n].l=1*new Date,o=t.createElement(i),r=t.getElementsByTagName(i)[0],o.async=1,o.src=s,r.parentNode.insertBefore(o,r)}(window,document,"script","//www.google-analytics.com/analytics.js","ga"),ga("create","UA-40881672-11","auto"),ga("send","pageview"));

docs/index.html

@@ -58,7 +58,7 @@
                         <source src="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.webm" type="video/webm">
 
                         <!-- Text track file -->
-                        <track kind="captions" label="English" srclang="en" src="View_From_A_Blue_Moon_Trailer-HD.vtt" default>
+                        <track kind="captions" label="English" srclang="en" src="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.en.vtt" default>
 
                         <!-- Fallback for browsers that don't support the <video> element -->
                         <a href="https://cdn.selz.com/plyr/1.0/movie.mp4">Download</a>

docs/src/js/docs.js

@@ -13,8 +13,7 @@ plyr.setup('.js-media-player', {
 	},
 	captions: {
 		defaultActive: 	true
-	},
+	}
-	duration: 100
 });
 
 // Setup shr

readme.md

@@ -198,9 +198,14 @@ Passing just the options object:
 plyr.setup(options);
 ```
 
+### Captions
+WebVTT captions are supported. To add a caption track, check the HTML example above and look for the `<track>` element.
+
+Be sure to [validate your caption files](https://quuz.org/webvtt/)
+
 #### Options
 
-Options must be passed as an object to the `setup()` method as above.
+Options must be passed as an object to the `setup()` method as above or as JSON in `data-plyr` attribute on each of your target elements (e.g. data-plyr='{ title: "testing" }') - note the single quotes encapsulating the JSON.
 
 <table class="table" width="100%">
 <thead>
@@ -282,6 +287,12 @@ Options must be passed as an object to the `setup()` method as above.
 		<strong>seek</strong>: Display a seek tooltip to indicate on click where the media would seek to.
 	</td>
   </tr>
+  <tr>
+    <td><code>duration</code></td>
+    <td>Number</td>
+    <td><code>null</code></td>
+    <td>Specify a custom duration.</td>
+  </tr>
   <tr>
     <td><code>displayDuration</code></td>
     <td>Boolean</td>

src/js/plyr.js

@@ -817,12 +817,9 @@
 
             // Inject the container
             if (!_getElement(config.selectors.captions)) {
-                plyr.videoContainer.insertAdjacentHTML('afterbegin', '<div class="' + _getClassname(config.selectors.captions) + '"><span></span></div>');
+                plyr.videoContainer.insertAdjacentHTML('afterbegin', '<div class="' + _getClassname(config.selectors.captions) + '"></div>');
             }
 
-            // Cache selector
-            plyr.captionsContainer = _getElement(config.selectors.captions).querySelector('span');
-
             // Determine if HTML5 textTracks is supported
             plyr.usingTextTracks = false;
             if (plyr.media.textTracks) {
@@ -870,14 +867,12 @@
                 _showCaptions(plyr);
 
                 // Disable unsupported browsers than report false positive
+                // Firefox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1033144
                 if ((plyr.browser.name === 'IE' && plyr.browser.version >= 10) ||
                     (plyr.browser.name === 'Firefox' && plyr.browser.version >= 31)) {
-                        // ||
-                    //(plyr.browser.name === 'Chrome' && plyr.browser.version >= 43) ||
-                    //(plyr.browser.name === 'Safari' && plyr.browser.version >= 7)) {
 
                     // Debugging
-                    _log('Detected unsupported browser for HTML5 captions - using fallback');
+                    _log('Detected browser with known TextTrack issues - using manual fallback');
 
                     // Set to false so skips to 'manual' captioning
                     plyr.usingTextTracks = false;
@@ -893,20 +888,12 @@
 
                         if (track.kind === 'captions' || track.kind === 'subtitles') {
                             _on(track, 'cuechange', function() {
-                                console.log('cuechange');
-                                console.log(this);
-
-                                // Clear container
-                                plyr.captionsContainer.innerHTML = '';
-
                                 // Display a cue, if there is one
                                 if (this.activeCues[0] && 'text' in this.activeCues[0]) {
-                                    console.log(this.activeCues[0].getCueAsHTML());
+                                    _setCaption(this.activeCues[0].getCueAsHTML());
-
+                                }
-                                    plyr.captionsContainer.appendChild(this.activeCues[0].getCueAsHTML());
+                                else {
-
+                                    _setCaption();
-                                    // Force redraw
-                                    var redraw = plyr.captionsContainer.offsetHeight;
                                 }
                             });
                         }
@@ -955,25 +942,72 @@
                         xhr.send();
                     }
                 }
-
-                // If Safari 7+, removing track from DOM [see 'turn off native caption rendering' above]
-                /*if (plyr.browser.name === 'Safari' && plyr.browser.version >= 7) {
-                    _log('Safari 7+ detected; removing track from DOM');
-
-                    // Find all <track> elements
-                    tracks = plyr.media.getElementsByTagName('track');
-
-                    // Loop through and remove one by one
-                    for (var t = 0; t < tracks.length; t++) {
-                        plyr.media.removeChild(tracks[t]);
             }
-                }*/
         }
+
+        // Set the current caption
+        function _setCaption(caption) {
+            var container = _getElement(config.selectors.captions),
+                content = document.createElement('span');
+
+            // Empty the container
+            container.innerHTML = '';
+
+            // Default to empty
+            if(typeof caption === 'undefined') {
+                caption = '';
+            }
+
+            // Set the span content
+            if(typeof caption === 'string') {
+                content.innerHTML = caption.trim();
+            }
+            else {
+                content.appendChild(caption);
+            }
+
+            // Set new caption text
+            container.appendChild(content);
+
+            // Force redraw
+            var redraw = container.offsetHeight;
         }
 
         // Captions functions
         // Seek the manual caption time and update UI
         function _seekManualCaptions(time) {
+            // Utilities for caption time codes
+            function _timecodeCommon(tc, pos) {
+                var tcpair = [];
+                tcpair = tc.split(' --> ');
+                for(var i = 0; i < tcpair.length; i++) {
+                    // WebVTT allows for extra meta data after the timestamp line
+                    // So get rid of this if it exists
+                    tcpair[i] = tcpair[i].replace(/(\d+:\d+:\d+\.\d+).*/, "$1");
+                }
+                return _subTcSecs(tcpair[pos]);
+            }
+            function _timecodeMin(tc) {
+                return _timecodeCommon(tc, 0);
+            }
+            function _timecodeMax(tc) {
+                return _timecodeCommon(tc, 1);
+            }
+            function _subTcSecs(tc) {
+                if (tc === null || tc === undefined) {
+                    return 0;
+                }
+                else {
+                    var tc1 = [],
+                        tc2 = [],
+                        seconds;
+                    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;
+                }
+            }
+
             // If it's not video, or we're using textTracks, bail.
             if (plyr.usingTextTracks || plyr.type !== 'video' || !plyr.supported.full) {
                 return;
@@ -1005,25 +1039,12 @@
                 plyr.media.currentTime.toFixed(1) <= _timecodeMax(plyr.captions[plyr.subcount][0])) {
                     plyr.currentCaption = plyr.captions[plyr.subcount][1];
 
-                // Trim caption text
+                // Render the caption
-                var content = plyr.currentCaption.trim();
+                _setCaption(plyr.currentCaption);
-
-                // Render the caption (only if changed)
-                if (plyr.captionsContainer.innerHTML != content) {
-                    // Empty caption
-                    // Otherwise NVDA reads it twice
-                    plyr.captionsContainer.innerHTML = '';
-
-                    // Set new caption text
-                    plyr.captionsContainer.innerHTML = content;
-                }
             }
             else {
-                plyr.captionsContainer.innerHTML = '';
+                _setCaption('');
             }
-
-            // Force redraw
-            // var redraw = plyr.captionsContainer.offsetHeight;
         }
 
         // Display captions container and button (for initialization)
@@ -1041,32 +1062,6 @@
             }
         }
 
-        // Utilities for caption time codes
-        function _timecodeMin(tc) {
-            var tcpair = [];
-            tcpair = tc.split(' --> ');
-            return _subTcSecs(tcpair[0]);
-        }
-        function _timecodeMax(tc) {
-            var tcpair = [];
-            tcpair = tc.split(' --> ');
-            return _subTcSecs(tcpair[1]);
-        }
-        function _subTcSecs(tc) {
-            if (tc === null || tc === undefined) {
-                return 0;
-            }
-            else {
-                var tc1 = [],
-                    tc2 = [],
-                    seconds;
-                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;
-            }
-        }
-
         // Find all elements
         function _getElements(selector) {
             return plyr.container.querySelectorAll(selector);
@@ -2444,7 +2439,7 @@
 
             if (config.fullscreen.hideControls) {
                 // Keep an eye on the mouse location in relation to controls
-                _on(plyr.controls, 'mouseenter mouseleave', function() {
+                _on(plyr.controls, 'mouseenter mouseleave', function(event) {
                     plyr.controls.mouseover = (event.type === 'mouseenter');
                 });
             }
@@ -2465,7 +2460,7 @@
             _on(plyr.media, 'ended', function() {
                 // Clear
                 if (plyr.type === 'video') {
-                    plyr.captionsContainer.innerHTML = '';
+                    _setCaption('');
                 }
 
                 // Reset UI

src/less/plyr.less

@@ -167,6 +167,11 @@
         vertical-align: middle;
     }
 
+    // Hide default captions
+    video::-webkit-media-text-track-container {
+        display: none;
+    }
+
     // Container for embeds
     &__video-embed {
         padding-bottom: 56.25%; /* 16:9 */

src/sass/plyr.scss

@@ -167,6 +167,11 @@ $plyr-bp-captions-large:             768px !default; // When captions jump to th
         vertical-align: middle;
     }
 
+    // Hide default captions
+    video::-webkit-media-text-track-container {
+        display: none;
+    }
+
     // For embeds
     &__video-embed {
         padding-bottom: 56.25%; /* 16:9 */