diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/js/controls.js | 5 | ||||
| -rw-r--r-- | src/js/plugins/vimeo.js | 16 | ||||
| -rw-r--r-- | src/js/plyr.js | 15 | ||||
| -rw-r--r-- | src/js/source.js | 4 | ||||
| -rw-r--r-- | src/js/support.js | 10 | ||||
| -rw-r--r-- | src/sass/components/embed.scss | 25 |
6 files changed, 50 insertions, 25 deletions
diff --git a/src/js/controls.js b/src/js/controls.js index c44cd13a..05d98bab 100644 --- a/src/js/controls.js +++ b/src/js/controls.js @@ -581,6 +581,11 @@ const controls = { list = pane && pane.querySelector('ul'); } + // If there's no list it means it's not been rendered... + if (!utils.is.element(list)) { + return; + } + // Update the label const label = this.elements.settings.tabs[setting].querySelector(`.${this.config.classNames.menu.value}`); label.innerHTML = controls.getLabel.call(this, setting, value); diff --git a/src/js/plugins/vimeo.js b/src/js/plugins/vimeo.js index 3aac5b2d..a250d096 100644 --- a/src/js/plugins/vimeo.js +++ b/src/js/plugins/vimeo.js @@ -35,10 +35,14 @@ const vimeo = { setAspectRatio(input) { const ratio = utils.is.string(input) ? input.split(':') : this.config.ratio.split(':'); const padding = 100 / ratio[0] * ratio[1]; - const height = 240; - const offset = (height - padding) / (height / 50); this.elements.wrapper.style.paddingBottom = `${padding}%`; - this.media.style.transform = `translateY(-${offset}%)`; + + if (this.supported.ui) { + const height = 240; + const offset = (height - padding) / (height / 50); + + this.media.style.transform = `translateY(-${offset}%)`; + } }, // API Ready @@ -55,6 +59,7 @@ const vimeo = { speed: true, transparent: 0, gesture: 'media', + playsinline: !this.config.fullscreen.iosNative, }; const params = utils.buildUrlParams(options); @@ -88,6 +93,11 @@ const vimeo = { player.media.paused = true; player.media.currentTime = 0; + // Disable native text track rendering + if (player.supported.ui) { + player.embed.disableTextTrack(); + } + // Create a faux HTML5 API using the Vimeo API player.media.play = () => { player.embed.play().then(() => { diff --git a/src/js/plyr.js b/src/js/plyr.js index 3de94143..4a46722b 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -185,12 +185,17 @@ class Plyr { if (truthy.includes(params.autoplay)) { this.config.autoplay = true; } - if (truthy.includes(params.playsinline)) { - this.config.inline = true; - } if (truthy.includes(params.loop)) { this.config.loop.active = true; } + + // TODO: replace fullscreen.iosNative with this playsinline config option + // YouTube requires the playsinline in the URL + if (this.isYouTube) { + this.config.playsinline = truthy.includes(params.playsinline); + } else { + this.config.playsinline = true; + } } } else { // <div> with attributes @@ -224,7 +229,7 @@ class Plyr { this.config.autoplay = true; } if (this.media.hasAttribute('playsinline')) { - this.config.inline = true; + this.config.playsinline = true; } if (this.media.hasAttribute('muted')) { this.config.muted = true; @@ -241,7 +246,7 @@ class Plyr { } // Check for support again but with type - this.supported = support.check(this.type, this.provider, this.config.inline); + this.supported = support.check(this.type, this.provider, this.config.playsinline); // If no support for even API, bail if (!this.supported.api) { diff --git a/src/js/source.js b/src/js/source.js index 3e713102..4e3f9186 100644 --- a/src/js/source.js +++ b/src/js/source.js @@ -55,7 +55,7 @@ const source = { this.provider = !utils.is.empty(input.sources[0].provider) ? input.sources[0].provider : providers.html5; // Check for support - this.supported = support.check(this.type, this.provider, this.config.inline); + this.supported = support.check(this.type, this.provider, this.config.playsinline); // Create new markup switch (`${this.provider}:${this.type}`) { @@ -103,7 +103,7 @@ const source = { if (this.config.muted) { this.media.setAttribute('muted', ''); } - if (this.config.inline) { + if (this.config.playsinline) { this.media.setAttribute('playsinline', ''); } } diff --git a/src/js/support.js b/src/js/support.js index a9a302f3..5528e898 100644 --- a/src/js/support.js +++ b/src/js/support.js @@ -12,16 +12,16 @@ const support = { // Check for support // Basic functionality vs full UI - check(type, provider, inline) { + check(type, provider, playsinline) { let api = false; let ui = false; const browser = utils.getBrowser(); - const playsInline = browser.isIPhone && inline && support.inline; + const canPlayInline = browser.isIPhone && playsinline && support.playsinline; switch (`${provider}:${type}`) { case 'html5:video': api = support.video; - ui = api && support.rangeInput && (!browser.isIPhone || playsInline); + ui = api && support.rangeInput && (!browser.isIPhone || canPlayInline); break; case 'html5:audio': @@ -32,7 +32,7 @@ const support = { case 'youtube:video': case 'vimeo:video': api = true; - ui = support.rangeInput && (!browser.isIPhone || playsInline); + ui = support.rangeInput && (!browser.isIPhone || canPlayInline); break; default: @@ -59,7 +59,7 @@ const support = { // Inline playback support // https://webkit.org/blog/6784/new-video-policies-for-ios/ - inline: 'playsInline' in document.createElement('video'), + playsinline: 'playsInline' in document.createElement('video'), // Check for mime type support against a player instance // Credits: http://diveintohtml5.info/everything.html diff --git a/src/sass/components/embed.scss b/src/sass/components/embed.scss index c15ee522..d72836de 100644 --- a/src/sass/components/embed.scss +++ b/src/sass/components/embed.scss @@ -3,14 +3,12 @@ // YouTube, Vimeo, etc // -------------------------------------------------------------- -.plyr__video-embed { - // Default to 16:9 ratio but this is set by JavaScript based on config - $padding: ((100 / 16) * 9); - $height: 240; - $offset: to-percentage(($height - $padding) / ($height / 50)); +// Default to 16:9 ratio but this is set by JavaScript based on config +$embed-padding: ((100 / 16) * 9); +.plyr__video-embed { height: 0; - padding-bottom: to-percentage($padding); + padding-bottom: to-percentage($embed-padding); position: relative; iframe { @@ -22,6 +20,17 @@ user-select: none; width: 100%; } +} + +// If the full custom UI is supported +.plyr--full-ui .plyr__video-embed { + $height: 240; + $offset: to-percentage(($height - $embed-padding) / ($height / 50)); + + // To allow mouse events to be captured if full support + iframe { + pointer-events: none; + } // Vimeo hack > div { @@ -30,7 +39,3 @@ transform: translateY(-$offset); } } -// To allow mouse events to be captured if full support -.plyr--full-ui .plyr__video-embed iframe { - pointer-events: none; -} |