ProximaEntertainment/plyr
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix IE CORS captions

Browse Source
This commit is contained in:
Sam Potts
2018-02-19 09:52:46 +11:00
parent f1895a4cce
commit 24b4220de5
10 changed files with 1820 additions and 1015 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/js/captions.js
View File

@ -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);

19
src/js/utils.js
View File

@ -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,10 +94,15 @@ const utils = {
}
request.addEventListener('load', () => {
try {
resolve(JSON.parse(request.responseText));
} catch(e) {
resolve(request.responseText);
if (responseType === 'text') {
try {
resolve(JSON.parse(request.responseText));
} catch(e) {
resolve(request.responseText);
}
}
else {
resolve(request.response);
}
});
@ -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);