diff --git a/src/js/controls.js b/src/js/controls.js index ac7ba2b6..0759492b 100644 --- a/src/js/controls.js +++ b/src/js/controls.js @@ -73,7 +73,16 @@ const controls = { // Create the to reference sprite const use = document.createElementNS(namespace, 'use'); - use.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', `${iconPath}-${type}`); + const path = `${iconPath}-${type}`; + + // If the new `href` attribute is supported, use that + // https://github.com/sampotts/plyr/issues/460 + // https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/xlink:href + if ('href' in use) { + use.setAttribute('href', path); + } else { + use.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', path); + } // Add to icon.appendChild(use); @@ -1125,8 +1134,7 @@ const controls = { // Larger overlaid play button if (this.config.controls.includes('play-large')) { - this.elements.buttons.playLarge = controls.createButton.call(this, 'play-large'); - this.elements.container.appendChild(this.elements.buttons.playLarge); + this.elements.container.appendChild(controls.createButton.call(this, 'play-large')); } this.elements.controls = container; diff --git a/src/js/defaults.js b/src/js/defaults.js index ee863066..64783aed 100644 --- a/src/js/defaults.js +++ b/src/js/defaults.js @@ -28,9 +28,6 @@ const defaults = { // Aspect ratio (for embeds) ratio: '16:9', - // Looping - loop: false, - // Click video to play clickToPlay: true, @@ -57,6 +54,13 @@ const defaults = { options: ['hd2160', 'hd1440', 'hd1080', 'hd720', 'large', 'medium', 'small', 'tiny', 'default'], }, + // Set loops + loop: { + active: false, + // start: null, + // end: null, + }, + // Speed default and options to display speed: { default: 1, diff --git a/src/js/plyr.js b/src/js/plyr.js index 355fe5cb..09b2aa8a 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -170,21 +170,22 @@ class Plyr { case 'audio': this.type = type; - if (this.media.getAttribute('crossorigin') !== null) { + if (this.media.hasAttribute('crossorigin')) { this.config.crossorigin = true; } - if (this.media.getAttribute('autoplay') !== null) { + if (this.media.hasAttribute('autoplay')) { this.config.autoplay = true; } - if (this.media.getAttribute('playsinline') !== null) { + if (this.media.hasAttribute('playsinline')) { this.config.inline = true; } - if (this.media.getAttribute('muted') !== null) { + if (this.media.hasAttribute('muted')) { this.config.muted = true; } - if (this.media.getAttribute('loop') !== null) { + if (this.media.hasAttribute('loop')) { this.config.loop.active = true; } + break; default: @@ -889,12 +890,14 @@ class Plyr { // If it's a soft destroy, make minimal changes if (soft) { utils.removeElement(this.elements.captions); + Array.from(this.elements.buttons.play).forEach(button => utils.removeElement(button)); utils.removeElement(this.elements.controls); utils.removeElement(this.elements.wrapper); // Clear for GC this.elements.captions = null; this.elements.controls = null; + this.elements.buttons.play = null; this.elements.wrapper = null; // Callback diff --git a/src/js/utils.js b/src/js/utils.js index 1c3d6ed8..02f97d5a 100644 --- a/src/js/utils.js +++ b/src/js/utils.js @@ -433,7 +433,7 @@ const utils = { // Trap focus inside container trapFocus() { - const tabbables = utils.getElements.call(this, 'input:not([disabled]), button:not([disabled])'); + const tabbables = utils.getElements.call(this, 'button:not(:disabled), input:not(:disabled), [tabindex]'); const first = tabbables[0]; const last = tabbables[tabbables.length - 1]; @@ -441,17 +441,22 @@ const utils = { this.elements.container, 'keydown', event => { - // If it is tab - if (event.which === 9 && this.fullscreen.active) { - if (event.target === last && !event.shiftKey) { - // Move focus to first element that can be tabbed if Shift isn't used - event.preventDefault(); - first.focus(); - } else if (event.target === first && event.shiftKey) { - // Move focus to last element that can be tabbed if Shift is used - event.preventDefault(); - last.focus(); - } + // Bail if not tab key or not fullscreen + if (event.key !== 'Tab' || event.keyCode !== 9 || !this.fullscreen.active) { + return; + } + + // Get the current focused element + const focused = utils.getFocusElement(); + + if (focused === last && !event.shiftKey) { + // Move focus to first element that can be tabbed if Shift isn't used + first.focus(); + event.preventDefault(); + } else if (focused === first && event.shiftKey) { + // Move focus to last element that can be tabbed if Shift is used + last.focus(); + event.preventDefault(); } }, false