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

Vimeo captions working

Browse Source
This commit is contained in:
Sam Potts
2017-05-07 20:07:08 +10:00
parent 9e2580ec6a
commit 28dddfcff2
2 changed files with 85 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
dist/plyr.js vendored
View File

File diff suppressed because one or more lines are too long

169
src/js/plyr.js
View File

@ -510,6 +510,47 @@
parent.insertBefore(element, parent.firstChild); parent.insertBefore(element, parent.firstChild);
}, },
// Inaert an element after another
insertAfter: function(element, target) {
target.parentNode.insertBefore(element, target.nextSibling);
},
// Create a DocumentFragment
createElement: function(type, attributes, text) {
// Create a new <element>
var element = document.createElement(type);
// Set all passed attributes
if (is.object(attributes)) {
utils.setAttributes(element, attributes);
}
// Add text node
if (is.string(text)) {
element.textContent = text;
}
// Return built element
return element;
},
// Insert a DocumentFragment
insertElement: function(type, parent, attributes, text) {
// Create a new <element>
var element = utils.createElement(type, attributes, text);
// Inject the new element
utils.prependChild(parent, element);
},
// Remove all child elements
emptyElement: function(element) {
var length = element.childNodes.length;
while (length--) {
element.removeChild(element.lastChild);
}
},
// Set attributes // Set attributes
setAttributes: function(element, attributes) { setAttributes: function(element, attributes) {
for (var key in attributes) { for (var key in attributes) {
@ -576,42 +617,6 @@
return attributes; return attributes;
}, },
// Create a DocumentFragment
createElement: function(type, attributes, text) {
// Create a new <element>
var element = document.createElement(type);
// Set all passed attributes
if (is.object(attributes)) {
utils.setAttributes(element, attributes);
}
// Add text node
if (is.string(text)) {
element.textContent = text;
}
// Return built element
return element;
},
// Insert a DocumentFragment
insertElement: function(type, parent, attributes, text) {
// Create a new <element>
var element = utils.createElement(type, attributes, text);
// Inject the new element
utils.prependChild(parent, element);
},
// Remove all child elements
emptyElement: function(element) {
var length = element.childNodes.length;
while (length--) {
element.removeChild(element.lastChild);
}
},
// Toggle class on an element // Toggle class on an element
toggleClass: function(element, className, state) { toggleClass: function(element, className, state) {
if (element) { if (element) {
@ -811,6 +816,15 @@
parseYouTubeId: function(url) { parseYouTubeId: function(url) {
var regex = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/; var regex = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/;
return url.match(regex) ? RegExp.$2 : url; return url.match(regex) ? RegExp.$2 : url;
},
// Remove HTML from a string
stripHTML: function(source) {
var fragment = document.createDocumentFragment();
var element = document.createElement('div');
fragment.appendChild(element);
element.innerHTML = source;
return fragment.firstChild.innerText;
} }
}; };
@ -1596,12 +1610,10 @@
} }
if (is.array(options) && !is.empty(options)) { if (is.array(options) && !is.empty(options)) {
// Remove any unwanted quality levels options.filter(function(quality) {
var filtered = options.filter(function(quality) { // Remove any unwanted quality levels
return ['tiny', 'small'].indexOf(quality) === -1; return !utils.inArray(['tiny', 'small'], quality);
}); }).forEach(function(quality) {
filtered.forEach(function(quality) {
var item = utils.createElement('li'); var item = utils.createElement('li');
var label = utils.createElement('label', { var label = utils.createElement('label', {
@ -1802,15 +1814,7 @@
// Inject the container // Inject the container
if (!is.htmlElement(player.elements.captions)) { if (!is.htmlElement(player.elements.captions)) {
player.elements.captions = utils.createElement('div', utils.getAttributesFromSelector(config.selectors.captions)); player.elements.captions = utils.createElement('div', utils.getAttributesFromSelector(config.selectors.captions));
utils.insertAfter(player.elements.captions, player.elements.wrapper);
console.warn(player.type);
if (player.type === 'video') {
player.elements.wrapper.appendChild(player.elements.captions);
} else {
console.warn(player.elements.media);
player.elements.media.appendChild(player.elements.captions);
}
} }
// Get tracks // Get tracks
@ -2268,7 +2272,7 @@
utils.toggleClass(player.elements.container, config.classes.isTouch, player.browser.isTouch); utils.toggleClass(player.elements.container, config.classes.isTouch, player.browser.isTouch);
// Inject the player wrapper // Inject the player wrapper
if (player.type === 'video') { if (utils.inArray(['video', 'youtube', 'vimeo'], player.type)) {
// Create the wrapper div // Create the wrapper div
player.elements.wrapper = utils.createElement('div', { player.elements.wrapper = utils.createElement('div', {
class: config.classes.videoWrapper class: config.classes.videoWrapper
@ -2287,7 +2291,7 @@
// Setup YouTube/Vimeo // Setup YouTube/Vimeo
function setupEmbed() { function setupEmbed() {
var container = utils.createElement('div'); //var container = utils.createElement('div');
var mediaId; var mediaId;
var id = player.type + '-' + Math.floor(Math.random() * (10000)); var id = player.type + '-' + Math.floor(Math.random() * (10000));
@ -2308,19 +2312,15 @@
} }
// Add embed class for responsive // Add embed class for responsive
utils.toggleClass(player.elements.media, config.classes.videoWrapper, true); utils.toggleClass(player.elements.wrapper, config.classes.embedWrapper, true);
utils.toggleClass(player.elements.media, config.classes.embedWrapper, true);
if (player.type === 'youtube') { if (player.type === 'youtube') {
// Create the YouTube container
player.elements.media.appendChild(container);
// Set ID // Set ID
container.setAttribute('id', id); player.elements.media.setAttribute('id', id);
// Setup API // Setup API
if (is.object(window.YT)) { if (is.object(window.YT)) {
youTubeReady(mediaId, container); youTubeReady(mediaId);
} else { } else {
// Load the API // Load the API
utils.injectScript(config.urls.youtube.api); utils.injectScript(config.urls.youtube.api);
@ -2330,7 +2330,7 @@
// Add to queue // Add to queue
window.onYouTubeReadyCallbacks.push(function() { window.onYouTubeReadyCallbacks.push(function() {
youTubeReady(mediaId, container); youTubeReady(mediaId);
}); });
// Set callback to process queue // Set callback to process queue
@ -2342,14 +2342,10 @@
} }
} else if (player.type === 'vimeo') { } else if (player.type === 'vimeo') {
// Vimeo needs an extra div to hide controls on desktop (which has full support) // Vimeo needs an extra div to hide controls on desktop (which has full support)
if (player.supported.full) { utils.wrap(player.elements.media, utils.createElement('div'));
player.elements.media.appendChild(container);
} else {
container = player.elements.media;
}
// Set ID // Set ID
container.setAttribute('id', id); player.elements.media.setAttribute('id', id);
// Load the API if not already // Load the API if not already
if (!is.object(window.Vimeo)) { if (!is.object(window.Vimeo)) {
@ -2359,11 +2355,11 @@
var vimeoTimer = window.setInterval(function() { var vimeoTimer = window.setInterval(function() {
if (is.object(window.Vimeo)) { if (is.object(window.Vimeo)) {
window.clearInterval(vimeoTimer); window.clearInterval(vimeoTimer);
vimeoReady(mediaId, container); vimeoReady(mediaId);
} }
}, 50); }, 50);
} else { } else {
vimeoReady(mediaId, container); vimeoReady(mediaId);
} }
} else if (player.type === 'soundcloud') { } else if (player.type === 'soundcloud') {
// TODO: Currently unsupported and undocumented // TODO: Currently unsupported and undocumented
@ -2381,8 +2377,7 @@
'id': id 'id': id
}); });
container.appendChild(soundCloud); player.elements.media.appendChild(soundCloud);
player.elements.media.appendChild(container);
// Load the API if not already // Load the API if not already
if (!window.SC) { if (!window.SC) {
@ -2412,10 +2407,10 @@
} }
// Handle YouTube API ready // Handle YouTube API ready
function youTubeReady(videoId, container) { function youTubeReady(videoId) {
// Setup instance // Setup instance
// https://developers.google.com/youtube/iframe_api_reference // https://developers.google.com/youtube/iframe_api_reference
player.embed = new window.YT.Player(container.id, { player.embed = new window.YT.Player(player.elements.media.id, {
videoId: videoId, videoId: videoId,
playerVars: { playerVars: {
autoplay: (config.autoplay ? 1 : 0), autoplay: (config.autoplay ? 1 : 0),
@ -2464,7 +2459,7 @@
instance.stopVideo(); instance.stopVideo();
player.elements.media.paused = true; player.elements.media.paused = true;
}; };
player.elements.media.duration = instance.getDuratiutils.on(); player.elements.media.duration = instance.getDuration();
player.elements.media.paused = true; player.elements.media.paused = true;
player.elements.media.currentTime = 0; player.elements.media.currentTime = 0;
player.elements.media.muted = instance.isMuted(); player.elements.media.muted = instance.isMuted();
@ -2480,7 +2475,7 @@
// Set the tabindex // Set the tabindex
if (player.supported.full) { if (player.supported.full) {
player.elements.media.querySelector('iframe').setAttribute('tabindex', -1); player.elements.media.setAttribute('tabindex', -1);
} }
// Update UI // Update UI
@ -2595,10 +2590,10 @@
} }
// Vimeo ready // Vimeo ready
function vimeoReady(mediaId, container) { function vimeoReady(mediaId) {
// Setup instance // Setup instance
// https://github.com/vimeo/player.js // https://github.com/vimeo/player.js
player.embed = new window.Vimeo.Player(container, { player.embed = new window.Vimeo.Player(player.elements.media, {
id: mediaId, id: mediaId,
loop: config.loop.active, loop: config.loop.active,
autoplay: config.autoplay, autoplay: config.autoplay,
@ -2653,11 +2648,13 @@
}); });
player.embed.on('cuechange', function(data) { player.embed.on('cuechange', function(data) {
log(data); var cue = null;
var track = data.cues[0].html; if (data.cues.length) {
cue = utils.stripHTML(data.cues[0].text);
}
setCaption(track); setCaption(cue);
}); });
player.embed.on('loaded', function() { player.embed.on('loaded', function() {
@ -3685,19 +3682,17 @@
// Setup new source // Setup new source
function setup() { function setup() {
// Remove embed object // Reset embed object
player.embed = null; player.embed = null;
// Remove the old media // Remove media
removeElement('media'); removeElement('media');
// Remove the old captions // Remove the old captions
removeElement('captions'); removeElement('captions');
// Remove video container // Remove video container
if (player.type === 'video' && player.elements.wrapper) { removeElement('wrapper');
removeElement('wrapper');
}
// Reset class name // Reset class name
if (player.elements.container) { if (player.elements.container) {
@ -3831,7 +3826,9 @@
var hadTabFocus = utils.hasClass(trigger, config.classes.tabFocus); var hadTabFocus = utils.hasClass(trigger, config.classes.tabFocus);
setTimeout(function() { setTimeout(function() {
target.focus(); if (is.htmlElement(target)) {
target.focus();
}
if (hadTabFocus) { if (hadTabFocus) {
utils.toggleClass(trigger, config.classes.tabFocus, false); utils.toggleClass(trigger, config.classes.tabFocus, false);