v3.0.0-beta.15

dist/plyr.js

@@ -649,6 +649,8 @@ var utils = {
     // Fetch wrapper
     // Using XHR to avoid issues with older browsers
     fetch: function fetch(url) {
+        var responseType = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'text';
+
         return new Promise(function (resolve, reject) {
             try {
                 var request = new XMLHttpRequest();
@@ -659,11 +661,15 @@ var utils = {
                 }
 
                 request.addEventListener('load', function () {
+                    if (responseType === 'text') {
                         try {
                             resolve(JSON.parse(request.responseText));
                         } catch (e) {
                             resolve(request.responseText);
                         }
+                    } else {
+                        resolve(request.response);
+                    }
                 });
 
                 request.addEventListener('error', function () {
@@ -671,6 +677,10 @@ var utils = {
                 });
 
                 request.open('GET', url, true);
+
+                // Set the required response type
+                request.responseType = responseType;
+
                 request.send();
             } catch (e) {
                 reject(e);
@@ -4741,6 +4751,7 @@ var controls = {
 
 // ==========================================================================
 // Plyr Captions
+// TODO: Create as class
 // ==========================================================================
 
 var captions = {
@@ -4782,7 +4793,6 @@ var captions = {
 
             return;
         }
-
         // Inject the container
         if (!utils.is.element(this.elements.captions)) {
             this.elements.captions = utils.createElement('div', utils.getAttributesFromSelector(this.config.selectors.captions));
@@ -4793,11 +4803,36 @@ var captions = {
         // Set the class hook
         utils.toggleClass(this.elements.container, this.config.classNames.captions.enabled, !utils.is.empty(captions.getTracks.call(this)));
 
+        // Get tracks
+        var tracks = captions.getTracks.call(this);
+
         // If no caption file exists, hide container for caption text
-        if (utils.is.empty(captions.getTracks.call(this))) {
+        if (utils.is.empty(tracks)) {
             return;
         }
 
+        // Get browser info
+        var browser = utils.getBrowser();
+
+        // Fix IE captions if CORS is used
+        // Fetch captions and inject as blobs instead (data URIs not supported!)
+        if (browser.isIE && window.URL) {
+            var elements = this.media.querySelectorAll('track');
+
+            Array.from(elements).forEach(function (track) {
+                var src = track.getAttribute('src');
+                var href = utils.parseUrl(src);
+
+                if (href.hostname !== window.location.href.hostname && ['http:', 'https:'].includes(href.protocol)) {
+                    utils.fetch(src, 'blob').then(function (blob) {
+                        track.setAttribute('src', window.URL.createObjectURL(blob));
+                    }).catch(function () {
+                        utils.removeElement(track);
+                    });
+                }
+            });
+        }
+
         // Set language
         captions.setLanguage.call(this);
 

dist/plyr.polyfilled.js

@@ -5268,7 +5268,7 @@ var defaults = {
     // Sprite (for icons)
     loadSprite: true,
     iconPrefix: 'plyr',
-    iconUrl: 'https://cdn.plyr.io/3.0.0-beta.14/plyr.svg',
+    iconUrl: 'https://cdn.plyr.io/3.0.0-beta.15/plyr.svg',
 
     // Blank video (used to prevent errors on source change)
     blankVideo: 'https://cdn.plyr.io/static/blank.mp4',
@@ -5840,6 +5840,8 @@ var utils = {
     // Fetch wrapper
     // Using XHR to avoid issues with older browsers
     fetch: function fetch(url) {
+        var responseType = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'text';
+
         return new Promise(function (resolve, reject) {
             try {
                 var request = new XMLHttpRequest();
@@ -5850,11 +5852,15 @@ var utils = {
                 }
 
                 request.addEventListener('load', function () {
+                    if (responseType === 'text') {
                         try {
                             resolve(JSON.parse(request.responseText));
                         } catch (e) {
                             resolve(request.responseText);
                         }
+                    } else {
+                        resolve(request.response);
+                    }
                 });
 
                 request.addEventListener('error', function () {
@@ -5862,6 +5868,10 @@ var utils = {
                 });
 
                 request.open('GET', url, true);
+
+                // Set the required response type
+                request.responseType = responseType;
+
                 request.send();
             } catch (e) {
                 reject(e);
@@ -9932,6 +9942,7 @@ var controls = {
 
 // ==========================================================================
 // Plyr Captions
+// TODO: Create as class
 // ==========================================================================
 
 var captions = {
@@ -9973,7 +9984,6 @@ var captions = {
 
             return;
         }
-
         // Inject the container
         if (!utils.is.element(this.elements.captions)) {
             this.elements.captions = utils.createElement('div', utils.getAttributesFromSelector(this.config.selectors.captions));
@@ -9984,11 +9994,36 @@ var captions = {
         // Set the class hook
         utils.toggleClass(this.elements.container, this.config.classNames.captions.enabled, !utils.is.empty(captions.getTracks.call(this)));
 
+        // Get tracks
+        var tracks = captions.getTracks.call(this);
+
         // If no caption file exists, hide container for caption text
-        if (utils.is.empty(captions.getTracks.call(this))) {
+        if (utils.is.empty(tracks)) {
             return;
         }
 
+        // Get browser info
+        var browser = utils.getBrowser();
+
+        // Fix IE captions if CORS is used
+        // Fetch captions and inject as blobs instead (data URIs not supported!)
+        if (browser.isIE && window.URL) {
+            var elements = this.media.querySelectorAll('track');
+
+            Array.from(elements).forEach(function (track) {
+                var src = track.getAttribute('src');
+                var href = utils.parseUrl(src);
+
+                if (href.hostname !== window.location.href.hostname && ['http:', 'https:'].includes(href.protocol)) {
+                    utils.fetch(src, 'blob').then(function (blob) {
+                        track.setAttribute('src', window.URL.createObjectURL(blob));
+                    }).catch(function () {
+                        utils.removeElement(track);
+                    });
+                }
+            });
+        }
+
         // Set language
         captions.setLanguage.call(this);
 
@@ -11125,7 +11160,7 @@ var source = {
 
 // ==========================================================================
 // Plyr
-// plyr.js v3.0.0-beta.14
+// plyr.js v3.0.0-beta.15
 // https://github.com/sampotts/plyr
 // License: The MIT License (MIT)
 // ==========================================================================

package.json

@@ -1,6 +1,6 @@
 {
     "name": "plyr",
-    "version": "3.0.0-beta.14",
+    "version": "3.0.0-beta.15",
     "description": "A simple, accessible and customizable HTML5, YouTube and Vimeo media player",
     "homepage": "https://plyr.io",
     "main": "./dist/plyr.js",
@@ -47,15 +47,7 @@
         "stylelint-scss": "^2.3.0",
         "stylelint-selector-bem-pattern": "^2.0.0"
     },
-    "keywords": [
+    "keywords": ["HTML5 Video", "HTML5 Audio", "Media Player", "DASH", "Shaka", "WordPress", "HLS"],
-        "HTML5 Video",
-        "HTML5 Audio",
-        "Media Player",
-        "DASH",
-        "Shaka",
-        "WordPress",
-        "HLS"
-    ],
     "repository": {
         "type": "git",
         "url": "git://github.com/sampotts/plyr.git"

readme.md

@@ -128,7 +128,7 @@ Include the `plyr.js` script before the closing `</body>` tag and then call `ply
 If you want to use our CDN (provided by [Fastly](https://www.fastly.com/)) for the JavaScript, you can use the following:
 
 ```html
-<script src="https://cdn.plyr.io/3.0.0-beta.14/plyr.js"></script>
+<script src="https://cdn.plyr.io/3.0.0-beta.15/plyr.js"></script>
 ```
 
 _Note_: Be sure to read the [polyfills](#polyfills) section below about browser compatibility
@@ -144,13 +144,13 @@ Include the `plyr.css` stylsheet into your `<head>`
 If you want to use our CDN (provided by [Fastly](https://www.fastly.com/)) for the default CSS, you can use the following:
 
 ```html
-<link rel="stylesheet" href="https://cdn.plyr.io/3.0.0-beta.14/plyr.css">
+<link rel="stylesheet" href="https://cdn.plyr.io/3.0.0-beta.15/plyr.css">
 ```
 
 ### SVG Sprite
 
 The SVG sprite is loaded automatically from our CDN (provided by [Fastly](https://www.fastly.com/)). To change this, see the [options](#options) below. For
-reference, the CDN hosted SVG sprite can be found at `https://cdn.plyr.io/3.0.0-beta.14/plyr.svg`.
+reference, the CDN hosted SVG sprite can be found at `https://cdn.plyr.io/3.0.0-beta.15/plyr.svg`.
 
 ## Advanced
 

src/js/captions.js

@@ -1,5 +1,6 @@
 // ==========================================================================
 // Plyr Captions
+// TODO: Create as class
 // ==========================================================================
 
 import support from './support';
@@ -45,7 +46,6 @@ const captions = {
 
             return;
         }
-
         // Inject the container
         if (!utils.is.element(this.elements.captions)) {
             this.elements.captions = utils.createElement('div', utils.getAttributesFromSelector(this.config.selectors.captions));
@@ -56,11 +56,42 @@ const captions = {
         // Set the class hook
         utils.toggleClass(this.elements.container, this.config.classNames.captions.enabled, !utils.is.empty(captions.getTracks.call(this)));
 
+        // Get tracks
+        const tracks = captions.getTracks.call(this);
+
         // If no caption file exists, hide container for caption text
-        if (utils.is.empty(captions.getTracks.call(this))) {
+        if (utils.is.empty(tracks)) {
             return;
         }
 
+        // Get browser info
+        const browser = utils.getBrowser();
+
+        // Fix IE captions if CORS is used
+        // Fetch captions and inject as blobs instead (data URIs not supported!)
+        if (browser.isIE && window.URL) {
+            const elements = this.media.querySelectorAll('track');
+
+            Array.from(elements).forEach(track => {
+                const src = track.getAttribute('src');
+                const href = utils.parseUrl(src);
+
+                if (href.hostname !== window.location.href.hostname && [
+                    'http:',
+                    'https:',
+                ].includes(href.protocol)) {
+                    utils
+                        .fetch(src, 'blob')
+                        .then(blob => {
+                            track.setAttribute('src', window.URL.createObjectURL(blob));
+                        })
+                        .catch(() => {
+                            utils.removeElement(track);
+                        });
+                }
+            });
+        }
+
         // Set language
         captions.setLanguage.call(this);
 

src/js/defaults.js

@@ -56,7 +56,7 @@ const defaults = {
     // Sprite (for icons)
     loadSprite: true,
     iconPrefix: 'plyr',
-    iconUrl: 'https://cdn.plyr.io/3.0.0-beta.14/plyr.svg',
+    iconUrl: 'https://cdn.plyr.io/3.0.0-beta.15/plyr.svg',
 
     // Blank video (used to prevent errors on source change)
     blankVideo: 'https://cdn.plyr.io/static/blank.mp4',

src/js/plyr.js

@@ -1,6 +1,6 @@
 // ==========================================================================
 // Plyr
-// plyr.js v3.0.0-beta.14
+// plyr.js v3.0.0-beta.15
 // https://github.com/sampotts/plyr
 // License: The MIT License (MIT)
 // ==========================================================================

src/js/plyr.polyfilled.js

@@ -1,6 +1,6 @@
 // ==========================================================================
 // Plyr Polyfilled Build
-// plyr.js v3.0.0-beta.14
+// plyr.js v3.0.0-beta.15
 // https://github.com/sampotts/plyr
 // License: The MIT License (MIT)
 // ==========================================================================

src/js/utils.js

@@ -83,7 +83,7 @@ const utils = {
 
     // Fetch wrapper
     // Using XHR to avoid issues with older browsers
-    fetch(url) {
+    fetch(url, responseType = 'text') {
         return new Promise((resolve, reject) => {
             try {
                 const request = new XMLHttpRequest();
@@ -94,11 +94,16 @@ const utils = {
                 }
 
                 request.addEventListener('load', () => {
+                    if (responseType === 'text') {
                         try {
                             resolve(JSON.parse(request.responseText));
                         } catch(e) {
                             resolve(request.responseText);
                         }
+                    }
+                    else {
+                        resolve(request.response);
+                    }
                 });
 
                 request.addEventListener('error', () => {
@@ -106,6 +111,10 @@ const utils = {
                 });
 
                 request.open('GET', url, true);
+
+                // Set the required response type
+                request.responseType = responseType;
+
                 request.send();
             } catch (e) {
                 reject(e);