From 1496b21c834efd728f861888c2200c1416e8d02d Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Thu, 19 May 2016 11:59:52 +1000 Subject: Version bump --- src/js/plyr.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/js/plyr.js') diff --git a/src/js/plyr.js b/src/js/plyr.js index 6f5b4aeb..2997ca8f 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -1,6 +1,6 @@ // ========================================================================== // Plyr -// plyr.js v1.6.11 +// plyr.js v1.6.12 // https://github.com/selz/plyr // License: The MIT License (MIT) // ========================================================================== -- cgit v1.2.3 From 98e4c5aceadb8b6b50e03bef749efcfe8b6d58c7 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Thu, 19 May 2016 12:06:51 +1000 Subject: Decreased sensitivity and inverted scroll on volume slider (scroll up to increase, down to decrease) --- src/js/plyr.js | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) (limited to 'src/js/plyr.js') diff --git a/src/js/plyr.js b/src/js/plyr.js index 2997ca8f..b8e158e1 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -1,6 +1,6 @@ // ========================================================================== // Plyr -// plyr.js v1.6.12 +// plyr.js v1.6.13 // https://github.com/selz/plyr // License: The MIT License (MIT) // ========================================================================== @@ -2107,14 +2107,14 @@ function _increaseVolume() { var volume = plyr.media.muted ? 0 : (plyr.media.volume * config.volumeMax); - _setVolume(volume + config.volumeStep); + _setVolume(volume + (config.volumeStep / 5)); } // Decrease volume function _decreaseVolume() { var volume = plyr.media.muted ? 0 : (plyr.media.volume * config.volumeMax); - _setVolume(volume - config.volumeStep); + _setVolume(volume - (config.volumeStep / 5)); } // Update volume UI and storage @@ -2786,15 +2786,18 @@ _on(plyr.controls, 'focus blur', _toggleControls, true); } + // Adjust volume on scroll _on(plyr.volume.input, 'wheel', function(event) { event.preventDefault(); + // Scroll down to decrease if (event.deltaY < 0 || event.deltaX > 0) { - _increaseVolume(); + _decreaseVolume(); } + // Scroll up to increase if (event.deltaY > 0 || event.deltaX < 0) { - _decreaseVolume(); + _increaseVolume(); } }); } -- cgit v1.2.3 From 69194915d4fa999d8f5584b9c2dbcfdb7e26d21c Mon Sep 17 00:00:00 2001 From: Sam Date: Mon, 23 May 2016 19:16:48 +0100 Subject: Sprite loading improvements, touch controls - SVG sprite loading automatically for an easier setup - Touch devices now show controls on touch rather than pausing playback --- src/js/plyr.js | 100 ++++++++++++++++++++++++++++++++++++++++++++++----------- 1 file changed, 81 insertions(+), 19 deletions(-) (limited to 'src/js/plyr.js') diff --git a/src/js/plyr.js b/src/js/plyr.js index b8e158e1..928f80ad 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -1,6 +1,6 @@ // ========================================================================== // Plyr -// plyr.js v1.6.13 +// plyr.js v1.6.14 // https://github.com/selz/plyr // License: The MIT License (MIT) // ========================================================================== @@ -26,7 +26,7 @@ /*global YT,$f*/ // Globals - var fullscreen, api = {}; + var fullscreen; // Default config var defaults = { @@ -41,8 +41,9 @@ volumeStep: 1, duration: null, displayDuration: true, + loadSprite: true, iconPrefix: 'plyr', - iconUrl: '', + iconUrl: 'https://cdn.plyr.io/1.6.14/plyr.svg', clickToPlay: true, hideControls: true, showPosterOnEnd: false, @@ -657,11 +658,20 @@ } } + // Get icon URL + function _getIconUrl() { + return { + url: config.iconUrl, + external: (config.iconUrl.indexOf("http") === 0) + }; + } + // Build the default HTML function _buildControls() { // Create html array - var html = [], - iconPath = config.iconUrl + '#' + config.iconPrefix; + var html = [], + iconUrl = _getIconUrl(), + iconPath = (!iconUrl.external ? iconUrl.url : '') + '#' + config.iconPrefix; // Larger overlaid play button if (_inArray(config.controls, 'play-large')) { @@ -1162,6 +1172,20 @@ // Insert controls function _injectControls() { + // Sprite + if (config.loadSprite) { + var iconUrl = _getIconUrl(); + + // Only load external sprite using AJAX + if (iconUrl.external) { + _log('Loading external SVG sprite'); + loadSprite(iconUrl.url); + } + else { + _log('Sprite will be used inline'); + } + } + // Make a copy of the html var html = config.html; @@ -2432,7 +2456,7 @@ } } else { - show = false; + show = !_hasClass(plyr.container, config.classes.hideControls); } } @@ -2443,21 +2467,26 @@ if (show || plyr.media.paused) { _toggleClass(plyr.container, config.classes.hideControls, false); - // Always show controls when paused + // Always show controls when paused or if touch if (plyr.media.paused) { return; } + + // Delay for hiding on touch + if (plyr.browser.touch) { + delay = 3000; + } } - // If toggle is false or if we're playing (regardless of toggle), then - // set the timer to hide the controls + // If toggle is false or if we're playing (regardless of toggle), + // then set the timer to hide the controls if (!show || !plyr.media.paused) { plyr.timers.hover = window.setTimeout(function() { // If the mouse is over the controls (and not entering fullscreen), bail if (plyr.controls.active && !isEnterFullscreen) { return; } - + _toggleClass(plyr.container, config.classes.hideControls, true); }, delay); } @@ -2554,7 +2583,7 @@ } // Check for support - plyr.supported = api.supported(plyr.type); + plyr.supported = supported(plyr.type); // Create new markup switch(plyr.type) { @@ -2863,6 +2892,11 @@ // On click play, pause ore restart _on(wrapper, 'click', function() { + if (plyr.browser.touch && !plyr.media.paused) { + _toggleControls(true); + return; + } + if (plyr.media.paused) { _play(); } @@ -3000,7 +3034,7 @@ } // Check for support - plyr.supported = api.supported(plyr.type); + plyr.supported = supported(plyr.type); // Add style hook _toggleStyleHook(); @@ -3130,6 +3164,7 @@ toggleMute: _toggleMute, toggleCaptions: _toggleCaptions, toggleFullscreen: _toggleFullscreen, + toggleControls: _toggleControls, isFullscreen: function() { return plyr.isFullscreen || false; }, support: function(mimeType) { return _supportMime(plyr, mimeType); }, destroy: _destroy, @@ -3137,8 +3172,31 @@ }; } + // Load a sprite + function loadSprite(url) { + var x = new XMLHttpRequest(); + + // Check for CORS support + if ('withCredentials' in x) { + x.open('GET', url, true); + } + else { + return; + } + + // Inject hidden div with sprite on load + x.onload = function() { + var c = document.createElement('div'); + c.setAttribute('hidden', ''); + c.innerHTML = x.responseText; + document.body.insertBefore(c, document.body.childNodes[0]); + } + + x.send(); + } + // Check for support - api.supported = function(type) { + function supported(type) { var browser = _browserSniff(), oldIE = (browser.name === 'IE' && browser.version <= 9), iPhone = /iPhone|iPod/i.test(navigator.userAgent), @@ -3173,10 +3231,10 @@ basic: basic, full: full }; - }; + } - // Expose setup function - api.setup = function(elements, options) { + // Setup function + function setup(elements, options) { // Get the players var instances = []; @@ -3202,7 +3260,7 @@ // Bail if disabled or no basic support // You may want to disable certain UAs etc - if (!api.supported().basic || !elements.length) { + if (!supported().basic || !elements.length) { return false; } @@ -3236,9 +3294,13 @@ } return instances; - }; + } - return api; + return { + setup: setup, + supported: supported, + loadSprite: loadSprite + }; })); // Custom event polyfill -- cgit v1.2.3 From 3c2921b9940857e2276922ce6d3235706ed256d7 Mon Sep 17 00:00:00 2001 From: Sam Date: Mon, 23 May 2016 21:11:43 +0100 Subject: Restore scroll position when exiting fullscreen (fixes #236) --- src/js/plyr.js | 31 +++++++++++++++++++++++++++---- 1 file changed, 27 insertions(+), 4 deletions(-) (limited to 'src/js/plyr.js') diff --git a/src/js/plyr.js b/src/js/plyr.js index 928f80ad..73593a56 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -1,6 +1,6 @@ // ========================================================================== // Plyr -// plyr.js v1.6.14 +// plyr.js v1.6.15 // https://github.com/selz/plyr // License: The MIT License (MIT) // ========================================================================== @@ -26,10 +26,11 @@ /*global YT,$f*/ // Globals - var fullscreen; + var fullscreen, + scroll = { x: 0, y: 0 }, // Default config - var defaults = { + defaults = { enabled: true, debug: false, autoplay: false, @@ -43,7 +44,7 @@ displayDuration: true, loadSprite: true, iconPrefix: 'plyr', - iconUrl: 'https://cdn.plyr.io/1.6.14/plyr.svg', + iconUrl: 'https://cdn.plyr.io/1.6.15/plyr.svg', clickToPlay: true, hideControls: true, showPosterOnEnd: false, @@ -1953,6 +1954,19 @@ _toggleControls(plyr.media.paused); } + // Save scroll position + function _saveScrollPosition() { + scroll = { + x: window.pageXOffset || 0, + y: window.pageYOffset || 0 + }; + } + + // Restore scroll position + function _restoreScrollPosition() { + window.scrollTo(scroll.x, scroll.y); + } + // Toggle fullscreen function _toggleFullscreen(event) { // Check for native support @@ -1966,6 +1980,10 @@ else if (nativeSupport) { // Request fullscreen if (!fullscreen.isFullScreen(plyr.container)) { + // Save scroll position + _saveScrollPosition(); + + // Request full screen fullscreen.requestFullScreen(plyr.container); } // Bail from fullscreen @@ -2010,6 +2028,11 @@ // Trigger an event _triggerEvent(plyr.container, plyr.isFullscreen ? 'enterfullscreen' : 'exitfullscreen'); + + // Restore scroll position + if (!plyr.isFullscreen && nativeSupport) { + _restoreScrollPosition(); + } } // Bail from faux-fullscreen -- cgit v1.2.3 From 351e1540c5e7241bc7c4a2d0a0598620c1699d73 Mon Sep 17 00:00:00 2001 From: Sam Date: Mon, 23 May 2016 22:33:16 +0100 Subject: Version bump --- src/js/plyr.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'src/js/plyr.js') diff --git a/src/js/plyr.js b/src/js/plyr.js index 73593a56..06173523 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -1,6 +1,6 @@ // ========================================================================== // Plyr -// plyr.js v1.6.15 +// plyr.js v1.6.16 // https://github.com/selz/plyr // License: The MIT License (MIT) // ========================================================================== @@ -44,7 +44,7 @@ displayDuration: true, loadSprite: true, iconPrefix: 'plyr', - iconUrl: 'https://cdn.plyr.io/1.6.15/plyr.svg', + iconUrl: 'https://cdn.plyr.io/1.6.16/plyr.svg', clickToPlay: true, hideControls: true, showPosterOnEnd: false, -- cgit v1.2.3 From c0909095e31b2901092f9ca875d7d5536ebc90fd Mon Sep 17 00:00:00 2001 From: Sam Date: Thu, 26 May 2016 22:32:18 +0100 Subject: Added `disableContextMenu` option to hide the right click context menu (fixes #248 and #225) --- src/js/plyr.js | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) (limited to 'src/js/plyr.js') diff --git a/src/js/plyr.js b/src/js/plyr.js index 06173523..1794afa1 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -1,6 +1,6 @@ // ========================================================================== // Plyr -// plyr.js v1.6.16 +// plyr.js v1.6.17 // https://github.com/selz/plyr // License: The MIT License (MIT) // ========================================================================== @@ -44,10 +44,11 @@ displayDuration: true, loadSprite: true, iconPrefix: 'plyr', - iconUrl: 'https://cdn.plyr.io/1.6.16/plyr.svg', + iconUrl: 'https://cdn.plyr.io/1.6.17/plyr.svg', clickToPlay: true, hideControls: true, showPosterOnEnd: false, + disableContextMenu: true, tooltips: { controls: false, seek: true @@ -2933,6 +2934,11 @@ }); } + // Disable right click + if (config.disableContextMenu) { + _on(plyr.media, 'contextmenu', function(event) { event.preventDefault(); }); + } + // Proxy events to container _on(plyr.media, config.events.join(' '), function(event) { _triggerEvent(plyr.container, event.type, true); -- cgit v1.2.3 From 552f448ccd4634441104dca29c20fa441d644dfc Mon Sep 17 00:00:00 2001 From: Sam Date: Mon, 30 May 2016 07:41:17 +0100 Subject: Seek rounding from 1 to 4 decimal places (fixes #242) --- src/js/plyr.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'src/js/plyr.js') diff --git a/src/js/plyr.js b/src/js/plyr.js index 1794afa1..1e5d2156 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -1,6 +1,6 @@ // ========================================================================== // Plyr -// plyr.js v1.6.17 +// plyr.js v1.6.18 // https://github.com/selz/plyr // License: The MIT License (MIT) // ========================================================================== @@ -44,7 +44,7 @@ displayDuration: true, loadSprite: true, iconPrefix: 'plyr', - iconUrl: 'https://cdn.plyr.io/1.6.17/plyr.svg', + iconUrl: 'https://cdn.plyr.io/1.6.18/plyr.svg', clickToPlay: true, hideControls: true, showPosterOnEnd: false, @@ -1890,7 +1890,7 @@ // Set the current time // Try/catch incase the media isn't set and we're calling seek() from source() and IE moans try { - plyr.media.currentTime = targetTime.toFixed(1); + plyr.media.currentTime = targetTime.toFixed(4); } catch(e) {} -- cgit v1.2.3 From 521431e09390e86895f8a52cf0a50195d9050be1 Mon Sep 17 00:00:00 2001 From: Sam Date: Wed, 1 Jun 2016 09:38:29 +0100 Subject: Fix for scroll direction on volume (fixes #258) --- src/js/plyr.js | 28 ++++++++++++++++++++-------- 1 file changed, 20 insertions(+), 8 deletions(-) (limited to 'src/js/plyr.js') diff --git a/src/js/plyr.js b/src/js/plyr.js index 1e5d2156..f54db4e0 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -1,6 +1,6 @@ // ========================================================================== // Plyr -// plyr.js v1.6.18 +// plyr.js v1.6.19 // https://github.com/selz/plyr // License: The MIT License (MIT) // ========================================================================== @@ -44,7 +44,7 @@ displayDuration: true, loadSprite: true, iconPrefix: 'plyr', - iconUrl: 'https://cdn.plyr.io/1.6.18/plyr.svg', + iconUrl: 'https://cdn.plyr.io/1.6.19/plyr.svg', clickToPlay: true, hideControls: true, showPosterOnEnd: false, @@ -1439,8 +1439,6 @@ _setAttributes(vimeo, { 'src': 'https://player.vimeo.com/video/' + mediaId + '?player_id=' + id + '&api=1&badge=0&byline=0&portrait=0&title=0', 'id': id, - 'webkitallowfullscreen': '', - 'mozallowfullscreen': '', 'allowfullscreen': '', 'frameborder': 0 }); @@ -2843,14 +2841,28 @@ _on(plyr.volume.input, 'wheel', function(event) { event.preventDefault(); - // Scroll down to decrease + // Detect "natural" scroll - suppored on OS X Safari only + // Other browsers on OS X will be inverted until support improves + var inverted = event.webkitDirectionInvertedFromDevice; + + // Scroll down (or up on natural) to decrease if (event.deltaY < 0 || event.deltaX > 0) { - _decreaseVolume(); + if (inverted) { + _decreaseVolume(); + } + else { + _increaseVolume(); + } } - // Scroll up to increase + // Scroll up (or down on natural) to increase if (event.deltaY > 0 || event.deltaX < 0) { - _increaseVolume(); + if (inverted) { + _increaseVolume(); + } + else { + _decreaseVolume(); + } } }); } -- cgit v1.2.3 From 7eec6c6739c318e5cf118e21b1eb95d213c2297f Mon Sep 17 00:00:00 2001 From: Sam Date: Thu, 2 Jun 2016 10:18:33 +0100 Subject: Fix for multiple sprites being requested (fixes #259) --- src/js/plyr.js | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) (limited to 'src/js/plyr.js') diff --git a/src/js/plyr.js b/src/js/plyr.js index f54db4e0..9b724e14 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -1181,7 +1181,7 @@ // Only load external sprite using AJAX if (iconUrl.external) { _log('Loading external SVG sprite'); - loadSprite(iconUrl.url); + loadSprite(iconUrl.url, "sprite-plyr"); } else { _log('Sprite will be used inline'); @@ -3214,9 +3214,14 @@ } // Load a sprite - function loadSprite(url) { + function loadSprite(url, id) { var x = new XMLHttpRequest(); + // If the id is set and sprite exists, bail + if (typeof id === 'string' && document.querySelector('#' + id) !== null) { + return; + } + // Check for CORS support if ('withCredentials' in x) { x.open('GET', url, true); @@ -3229,6 +3234,9 @@ x.onload = function() { var c = document.createElement('div'); c.setAttribute('hidden', ''); + if (typeof id === 'string') { + c.setAttribute('id', id); + } c.innerHTML = x.responseText; document.body.insertBefore(c, document.body.childNodes[0]); } @@ -3317,7 +3325,7 @@ // Bail if not enabled if (!config.enabled) { - return; + return null; } // Create new instance -- cgit v1.2.3 From 4afd311ef64fbef2744e3fda04cbbe7ce56e2cbe Mon Sep 17 00:00:00 2001 From: Sam Date: Thu, 2 Jun 2016 10:19:35 +0100 Subject: Version bump --- src/js/plyr.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'src/js/plyr.js') diff --git a/src/js/plyr.js b/src/js/plyr.js index 9b724e14..2e05bb2e 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -1,6 +1,6 @@ // ========================================================================== // Plyr -// plyr.js v1.6.19 +// plyr.js v1.6.20 // https://github.com/selz/plyr // License: The MIT License (MIT) // ========================================================================== @@ -44,7 +44,7 @@ displayDuration: true, loadSprite: true, iconPrefix: 'plyr', - iconUrl: 'https://cdn.plyr.io/1.6.19/plyr.svg', + iconUrl: 'https://cdn.plyr.io/1.6.20/plyr.svg', clickToPlay: true, hideControls: true, showPosterOnEnd: false, -- cgit v1.2.3 From 70646ca90798823932573f209eb30f6a8e82694f Mon Sep 17 00:00:00 2001 From: Sam Date: Tue, 7 Jun 2016 12:34:36 +0100 Subject: See changelog (fixes #265, #253, #257) --- src/js/plyr.js | 37 +++++++++++++++++++++++++++++++------ 1 file changed, 31 insertions(+), 6 deletions(-) (limited to 'src/js/plyr.js') diff --git a/src/js/plyr.js b/src/js/plyr.js index 2e05bb2e..1e7df62e 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -1,6 +1,6 @@ // ========================================================================== // Plyr -// plyr.js v1.6.20 +// plyr.js v1.7.0 // https://github.com/selz/plyr // License: The MIT License (MIT) // ========================================================================== @@ -44,7 +44,7 @@ displayDuration: true, loadSprite: true, iconPrefix: 'plyr', - iconUrl: 'https://cdn.plyr.io/1.6.20/plyr.svg', + iconUrl: 'https://cdn.plyr.io/1.7.0/plyr.svg', clickToPlay: true, hideControls: true, showPosterOnEnd: false, @@ -54,6 +54,8 @@ seek: true }, selectors: { + html5: 'video, audio', + embed: '[data-type]', container: '.plyr', controls: { container: null, @@ -323,6 +325,8 @@ else { parent.appendChild(child); } + + return child; } } @@ -404,6 +408,17 @@ return false; } + // Element matches selector + function _matches(element, selector) { + var p = Element.prototype; + + var f = p.matches || p.webkitMatchesSelector || p.mozMatchesSelector || p.msMatchesSelector || function(s) { + return [].indexOf.call(document.querySelectorAll(s), this) !== -1; + }; + + return f.call(element, selector); + } + // Bind event function _on(element, events, callback, useCapture) { if (element) { @@ -3045,7 +3060,7 @@ // Get the div placeholder for YouTube and Vimeo if (!plyr.media) { - plyr.media = plyr.container.querySelectorAll('div')[0]; + plyr.media = plyr.container.querySelectorAll('[data-type]')[0]; } // Bail if nothing to setup @@ -3285,7 +3300,8 @@ // Setup function function setup(elements, options) { // Get the players - var instances = []; + var instances = [], + selector = [defaults.selectors.html5, defaults.selectors.embed].join(','); // Select the elements // Assume elements is a NodeList by default @@ -3304,7 +3320,7 @@ } // Use default selector - elements = document.querySelectorAll(defaults.selectors.container); + elements = document.querySelectorAll(selector); } // Bail if disabled or no basic support @@ -3318,10 +3334,19 @@ // Get the current element var element = elements[i]; + // Custom settings passed as data attribute + var settings = element.getAttribute("data-plyr"); + + // Wrap each media element if needed + if (_matches(element, selector)) { + // Wrap in a
+ element = _wrap(element, document.createElement('div')); + } + // Setup a player instance and add to the element if (typeof element.plyr === 'undefined') { // Create instance-specific config - var config = _extend(defaults, options, JSON.parse(element.getAttribute("data-plyr"))); + var config = _extend({}, defaults, options, JSON.parse(settings)); // Bail if not enabled if (!config.enabled) { -- cgit v1.2.3 From 98792168e4d76ab126f3fb643b9cc7d462b5d1b2 Mon Sep 17 00:00:00 2001 From: Sam Date: Thu, 9 Jun 2016 09:49:01 +0100 Subject: Changes to setup return value, SVG bug fix (fixes #269) --- src/js/plyr.js | 148 ++++++++++++++++++++++++++++++++++++--------------------- 1 file changed, 94 insertions(+), 54 deletions(-) (limited to 'src/js/plyr.js') diff --git a/src/js/plyr.js b/src/js/plyr.js index 1e7df62e..8d4e321b 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -1,6 +1,6 @@ // ========================================================================== // Plyr -// plyr.js v1.7.0 +// plyr.js v1.8.0 // https://github.com/selz/plyr // License: The MIT License (MIT) // ========================================================================== @@ -44,7 +44,7 @@ displayDuration: true, loadSprite: true, iconPrefix: 'plyr', - iconUrl: 'https://cdn.plyr.io/1.7.0/plyr.svg', + iconUrl: 'https://cdn.plyr.io/1.8.0/plyr.svg', clickToPlay: true, hideControls: true, showPosterOnEnd: false, @@ -175,51 +175,56 @@ // Credits: http://paypal.github.io/accessible-html5-video-player/ // Unfortunately, due to mixed support, UA sniffing is required function _browserSniff() { - var nAgt = navigator.userAgent, + var ua = navigator.userAgent, name = navigator.appName, fullVersion = '' + parseFloat(navigator.appVersion), majorVersion = parseInt(navigator.appVersion, 10), nameOffset, verOffset, - ix; + ix, + isIE = false, + isFirefox = false, + isChrome = false, + isSafari = false; // MSIE 11 if ((navigator.appVersion.indexOf('Windows NT') !== -1) && (navigator.appVersion.indexOf('rv:11') !== -1)) { - name = 'IE'; + isIE = true; fullVersion = '11;'; } // MSIE - else if ((verOffset=nAgt.indexOf('MSIE')) !== -1) { - name = 'IE'; - fullVersion = nAgt.substring(verOffset + 5); + else if ((verOffset = ua.indexOf('MSIE')) !== -1) { + isIE = true; + fullVersion = ua.substring(verOffset + 5); } // Chrome - else if ((verOffset=nAgt.indexOf('Chrome')) !== -1) { - name = 'Chrome'; - fullVersion = nAgt.substring(verOffset + 7); + else if ((verOffset = ua.indexOf('Chrome')) !== -1) { + isChrome = true; + fullVersion = ua.substring(verOffset + 7); } // Safari - else if ((verOffset=nAgt.indexOf('Safari')) !== -1) { - name = 'Safari'; - fullVersion = nAgt.substring(verOffset + 7); - if ((verOffset = nAgt.indexOf('Version')) !== -1) { - fullVersion = nAgt.substring(verOffset + 8); + else if ((verOffset = ua.indexOf('Safari')) !== -1) { + isSafari = true; + fullVersion = ua.substring(verOffset + 7); + if ((verOffset = ua.indexOf('Version')) !== -1) { + fullVersion = ua.substring(verOffset + 8); } } // Firefox - else if ((verOffset=nAgt.indexOf('Firefox')) !== -1) { - name = 'Firefox'; - fullVersion = nAgt.substring(verOffset + 8); + else if ((verOffset = ua.indexOf('Firefox')) !== -1) { + isFirefox = true; + fullVersion = ua.substring(verOffset + 8); } // In most other browsers, 'name/version' is at the end of userAgent - else if ((nameOffset=nAgt.lastIndexOf(' ') + 1) < (verOffset=nAgt.lastIndexOf('/'))) { - name = nAgt.substring(nameOffset,verOffset); - fullVersion = nAgt.substring(verOffset + 1); + else if ((nameOffset = ua.lastIndexOf(' ') + 1) < (verOffset = ua.lastIndexOf('/'))) { + name = ua.substring(nameOffset,verOffset); + fullVersion = ua.substring(verOffset + 1); if (name.toLowerCase() == name.toUpperCase()) { name = navigator.appName; } } + // Trim the fullVersion string at semicolon/space if present if ((ix = fullVersion.indexOf(';')) !== -1) { fullVersion = fullVersion.substring(0, ix); @@ -227,6 +232,7 @@ if ((ix = fullVersion.indexOf(' ')) !== -1) { fullVersion = fullVersion.substring(0, ix); } + // Get major version majorVersion = parseInt('' + fullVersion, 10); if (isNaN(majorVersion)) { @@ -238,6 +244,10 @@ return { name: name, version: majorVersion, + isIE: isIE, + isFirefox: isFirefox, + isChrome: isChrome, + isSafari: isSafari, ios: /(iPad|iPhone|iPod)/g.test(navigator.platform), touch: 'ontouchstart' in document.documentElement }; @@ -924,8 +934,8 @@ // Disable unsupported browsers than report false positive // Firefox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1033144 - if ((plyr.browser.name === 'IE' && plyr.browser.version >= 10) || - (plyr.browser.name === 'Firefox' && plyr.browser.version >= 31)) { + if ((plyr.browser.isIE && plyr.browser.version >= 10) || + (plyr.browser.isFirefox && plyr.browser.version >= 31)) { // Debugging _log('Detected browser with known TextTrack issues - using manual fallback'); @@ -1191,15 +1201,16 @@ function _injectControls() { // Sprite if (config.loadSprite) { - var iconUrl = _getIconUrl(); + var iconUrl = _getIconUrl(), + isExternal = iconUrl.external; // Only load external sprite using AJAX - if (iconUrl.external) { - _log('Loading external SVG sprite'); + if (isExternal || plyr.browser.isIE) { + _log('AJAX loading external SVG sprite' + (plyr.browser.isIE ? ' (due to IE)' : '')); loadSprite(iconUrl.url, "sprite-plyr"); } else { - _log('Sprite will be used inline'); + _log('Sprite will be used as external resource directly'); } } @@ -2715,7 +2726,7 @@ // Listen for control events function _controlListeners() { // IE doesn't support input event, so we fallback to change - var inputEvent = (plyr.browser.name == 'IE' ? 'change' : 'input'); + var inputEvent = (plyr.browser.isIE ? 'change' : 'input'); // Click play/pause helper function _togglePlay() { @@ -3262,7 +3273,7 @@ // Check for support function supported(type) { var browser = _browserSniff(), - oldIE = (browser.name === 'IE' && browser.version <= 9), + oldIE = (browser.isIE && browser.version <= 9), iPhone = /iPhone|iPod/i.test(navigator.userAgent), audio = !!document.createElement('audio').canPlayType, video = !!document.createElement('video').canPlayType, @@ -3298,55 +3309,82 @@ } // Setup function - function setup(elements, options) { + function setup(targets, options) { // Get the players - var instances = [], - selector = [defaults.selectors.html5, defaults.selectors.embed].join(','); + var elements = [], + containers = [], + selector = [defaults.selectors.html5, defaults.selectors.embed].join(','); // Select the elements // Assume elements is a NodeList by default - if (typeof elements === 'string') { - elements = document.querySelectorAll(elements); + if (typeof targets === 'string') { + targets = document.querySelectorAll(targets); } // Single HTMLElement passed - else if (elements instanceof HTMLElement) { - elements = [elements]; + else if (targets instanceof HTMLElement) { + targets = [targets]; } // No selector passed, possibly options as first argument - else if (!(elements instanceof NodeList) && typeof elements !== 'string') { + else if (!(targets instanceof NodeList) && typeof targets !== 'string') { // If options are the first argument - if (typeof options === 'undefined' && typeof elements === 'object') { - options = elements; + if (typeof options === 'undefined' && typeof targets === 'object') { + options = targets; } // Use default selector - elements = document.querySelectorAll(selector); + targets = document.querySelectorAll(selector); } // Bail if disabled or no basic support // You may want to disable certain UAs etc - if (!supported().basic || !elements.length) { + if (!supported().basic || !targets.length) { return false; } - // Create a player instance for each element - for (var i = 0; i < elements.length; i++) { - // Get the current element - var element = elements[i]; + // Convert NodeList to array + if (targets instanceof NodeList) { + targets = Array.prototype.slice.call(targets); + } + + // Check if the targets have multiple media elements + for (var i = 0; i < targets.length; i++) { + var target = targets[i]; + + // Get children + var children = target.querySelectorAll(selector); + + // If there's more than one media element, wrap them + if (children.length > 1) { + for (var x = 0; x < children.length; x++) { + containers.push({ + element: _wrap(children[x], document.createElement('div')), + original: target + }); + } + } + else { + containers.push({ + element: target + }); + } + } - // Custom settings passed as data attribute - var settings = element.getAttribute("data-plyr"); + // Create a player instance for each element + for (var key in containers) { + var element = containers[key].element, + original = containers[key].original || element; - // Wrap each media element if needed + // Wrap each media element if is target is media element + // as opposed to a wrapper if (_matches(element, selector)) { // Wrap in a
element = _wrap(element, document.createElement('div')); } // Setup a player instance and add to the element - if (typeof element.plyr === 'undefined') { + if (!('plyr' in element)) { // Create instance-specific config - var config = _extend({}, defaults, options, JSON.parse(settings)); + var config = _extend({}, defaults, options, JSON.parse(original.getAttribute('data-plyr'))); // Bail if not enabled if (!config.enabled) { @@ -3360,14 +3398,16 @@ element.plyr = (Object.keys(instance).length ? instance : false); // Callback - _triggerEvent(element, 'setup', { plyr: element.plyr }); + _triggerEvent(original, 'setup', { + plyr: element.plyr + }); } // Add to return array even if it's already setup - instances.push(element.plyr); + elements.push(element); } - return instances; + return elements; } return { -- cgit v1.2.3 From 161dd48312d3a66c0b21255467155fe3196ca67e Mon Sep 17 00:00:00 2001 From: Sam Date: Thu, 9 Jun 2016 09:57:16 +0100 Subject: Fixed log message --- src/js/plyr.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) (limited to 'src/js/plyr.js') diff --git a/src/js/plyr.js b/src/js/plyr.js index 8d4e321b..f5dc88e0 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -1,6 +1,6 @@ // ========================================================================== // Plyr -// plyr.js v1.8.0 +// plyr.js v1.8.1 // https://github.com/selz/plyr // License: The MIT License (MIT) // ========================================================================== @@ -44,7 +44,7 @@ displayDuration: true, loadSprite: true, iconPrefix: 'plyr', - iconUrl: 'https://cdn.plyr.io/1.8.0/plyr.svg', + iconUrl: 'https://cdn.plyr.io/1.8.1/plyr.svg', clickToPlay: true, hideControls: true, showPosterOnEnd: false, @@ -190,21 +190,25 @@ // MSIE 11 if ((navigator.appVersion.indexOf('Windows NT') !== -1) && (navigator.appVersion.indexOf('rv:11') !== -1)) { isIE = true; + name = 'IE'; fullVersion = '11;'; } // MSIE else if ((verOffset = ua.indexOf('MSIE')) !== -1) { isIE = true; + name = 'IE'; fullVersion = ua.substring(verOffset + 5); } // Chrome else if ((verOffset = ua.indexOf('Chrome')) !== -1) { isChrome = true; + name = 'Chrome'; fullVersion = ua.substring(verOffset + 7); } // Safari else if ((verOffset = ua.indexOf('Safari')) !== -1) { isSafari = true; + name = 'Safari'; fullVersion = ua.substring(verOffset + 7); if ((verOffset = ua.indexOf('Version')) !== -1) { fullVersion = ua.substring(verOffset + 8); @@ -213,6 +217,7 @@ // Firefox else if ((verOffset = ua.indexOf('Firefox')) !== -1) { isFirefox = true; + name = 'Firefox'; fullVersion = ua.substring(verOffset + 8); } // In most other browsers, 'name/version' is at the end of userAgent -- cgit v1.2.3 From c7d28b09c0acd79fa6370023f0c1f1938b033d24 Mon Sep 17 00:00:00 2001 From: Sam Date: Thu, 9 Jun 2016 11:05:07 +0100 Subject: Fixed event bubbling --- src/js/plyr.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) (limited to 'src/js/plyr.js') diff --git a/src/js/plyr.js b/src/js/plyr.js index f5dc88e0..153652c3 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -1,6 +1,6 @@ // ========================================================================== // Plyr -// plyr.js v1.8.1 +// plyr.js v1.8.2 // https://github.com/selz/plyr // License: The MIT License (MIT) // ========================================================================== @@ -44,7 +44,7 @@ displayDuration: true, loadSprite: true, iconPrefix: 'plyr', - iconUrl: 'https://cdn.plyr.io/1.8.1/plyr.svg', + iconUrl: 'https://cdn.plyr.io/1.8.2/plyr.svg', clickToPlay: true, hideControls: true, showPosterOnEnd: false, @@ -2057,7 +2057,7 @@ _toggleState(plyr.buttons.fullscreen, plyr.isFullscreen); // Trigger an event - _triggerEvent(plyr.container, plyr.isFullscreen ? 'enterfullscreen' : 'exitfullscreen'); + _triggerEvent(plyr.container, plyr.isFullscreen ? 'enterfullscreen' : 'exitfullscreen', true); // Restore scroll position if (!plyr.isFullscreen && nativeSupport) { @@ -2245,7 +2245,7 @@ _toggleClass(plyr.container, config.classes.captions.active, plyr.captionsEnabled); // Trigger an event - _triggerEvent(plyr.container, plyr.captionsEnabled ? 'captionsenabled' : 'captionsdisabled'); + _triggerEvent(plyr.container, plyr.captionsEnabled ? 'captionsenabled' : 'captionsdisabled', true); } // Check if media is loading @@ -3210,7 +3210,7 @@ _displayDuration(); // Ready event - _triggerEvent(plyr.container, 'ready'); + _triggerEvent(plyr.container, 'ready', true); } // Initialize instance @@ -3403,7 +3403,7 @@ element.plyr = (Object.keys(instance).length ? instance : false); // Callback - _triggerEvent(original, 'setup', { + _triggerEvent(original, 'setup', true, { plyr: element.plyr }); } -- cgit v1.2.3 From 80cfabbaf90d5b48bb5cc6b65e99d1ac4813233e Mon Sep 17 00:00:00 2001 From: Wilson Alberto Date: Mon, 13 Jun 2016 17:01:46 +0100 Subject: Prevent error when verifying if play buttons exist --- src/js/plyr.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/js/plyr.js') diff --git a/src/js/plyr.js b/src/js/plyr.js index 153652c3..b7f59405 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -1351,7 +1351,7 @@ } // If there's a play button, set label - if (plyr.supported.full && plyr.buttons.play) { + if (plyr.supported.full && plyr.buttons && plyr.buttons.play) { for (var i = plyr.buttons.play.length - 1; i >= 0; i--) { plyr.buttons.play[i].setAttribute('aria-label', label); } -- cgit v1.2.3 From 9b75436380bade755a7d54347dd85885b8230dd5 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Sat, 25 Jun 2016 23:39:00 +1000 Subject: v1.8.3 - Disabled iPad support for YouTube and Vimeo due to iOS limitations with iFrame playback - Fixed IE11 icon loading (fixes #269) - Updated screenshot (fixes #281) - Added WordPress plugin (fixes #239) - Added Neos plugin - Added HLS, Shaka and dash.js examples (see #235 for more) - Improvements for controls hiding and showing on touch devices --- src/js/plyr.js | 117 ++++++++++++++++++++++++++++++++++----------------------- 1 file changed, 71 insertions(+), 46 deletions(-) (limited to 'src/js/plyr.js') diff --git a/src/js/plyr.js b/src/js/plyr.js index b7f59405..327cb9fa 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -1,6 +1,6 @@ // ========================================================================== // Plyr -// plyr.js v1.8.2 +// plyr.js v1.8.3 // https://github.com/selz/plyr // License: The MIT License (MIT) // ========================================================================== @@ -44,7 +44,7 @@ displayDuration: true, loadSprite: true, iconPrefix: 'plyr', - iconUrl: 'https://cdn.plyr.io/1.8.2/plyr.svg', + iconUrl: 'https://cdn.plyr.io/1.8.3/plyr.svg', clickToPlay: true, hideControls: true, showPosterOnEnd: false, @@ -253,8 +253,8 @@ isFirefox: isFirefox, isChrome: isChrome, isSafari: isSafari, - ios: /(iPad|iPhone|iPod)/g.test(navigator.platform), - touch: 'ontouchstart' in document.documentElement + isIos: /(iPad|iPhone|iPod)/g.test(navigator.platform), + isTouch: 'ontouchstart' in document.documentElement }; } @@ -684,9 +684,14 @@ _log(config); // Debugging - function _log(text, warn) { + function _log() { if (config.debug && window.console) { - console[(warn ? 'warn' : 'log')](text); + console.log.apply(console, arguments); + } + } + function _warn() { + if (config.debug && window.console) { + console.warn.apply(console, arguments); } } @@ -694,7 +699,7 @@ function _getIconUrl() { return { url: config.iconUrl, - external: (config.iconUrl.indexOf("http") === 0) + absolute: (config.iconUrl.indexOf("http") === 0) || plyr.browser.isIE }; } @@ -703,7 +708,7 @@ // Create html array var html = [], iconUrl = _getIconUrl(), - iconPath = (!iconUrl.external ? iconUrl.url : '') + '#' + config.iconPrefix; + iconPath = (!iconUrl.absolute ? iconUrl.url : '') + '#' + config.iconPrefix; // Larger overlaid play button if (_inArray(config.controls, 'play-large')) { @@ -1013,7 +1018,7 @@ _log('Successfully loaded the caption file via AJAX'); } else { - _log('There was a problem loading the caption file via AJAX', true); + _warn('There was a problem loading the caption file via AJAX'); } } }; @@ -1206,12 +1211,11 @@ function _injectControls() { // Sprite if (config.loadSprite) { - var iconUrl = _getIconUrl(), - isExternal = iconUrl.external; + var iconUrl = _getIconUrl(); // Only load external sprite using AJAX - if (isExternal || plyr.browser.isIE) { - _log('AJAX loading external SVG sprite' + (plyr.browser.isIE ? ' (due to IE)' : '')); + if (iconUrl.absolute) { + _log('AJAX loading absolute SVG sprite' + (plyr.browser.isIE ? ' (due to IE)' : '')); loadSprite(iconUrl.url, "sprite-plyr"); } else { @@ -1316,7 +1320,7 @@ return true; } catch(e) { - _log('It looks like there is a problem with your controls html', true); + _warn('It looks like there is a problem with your controls HTML'); // Restore native video controls _toggleNativeControls(true); @@ -1332,7 +1336,7 @@ // Toggle native controls function _toggleNativeControls(toggle) { - if (toggle) { + if (toggle && _inArray(config.types.html5, plyr.type)) { plyr.media.setAttribute('controls', ''); } else { @@ -1351,7 +1355,7 @@ } // If there's a play button, set label - if (plyr.supported.full && plyr.buttons && plyr.buttons.play) { + if (plyr.supported.full && plyr.buttons.play) { for (var i = plyr.buttons.play.length - 1; i >= 0; i--) { plyr.buttons.play[i].setAttribute('aria-label', label); } @@ -1368,8 +1372,8 @@ function _setupMedia() { // If there's no media, bail if (!plyr.media) { - _log('No audio or video element found', true); - return false; + _warn('No media element found!'); + return; } if (plyr.supported.full) { @@ -1386,10 +1390,10 @@ _toggleClass(plyr.container, config.classes.stopped, config.autoplay); // Add iOS class - _toggleClass(plyr.container, config.classes.isIos, plyr.browser.ios); + _toggleClass(plyr.container, config.classes.isIos, plyr.browser.isIos); // Add touch class - _toggleClass(plyr.container, config.classes.isTouch, plyr.browser.touch); + _toggleClass(plyr.container, config.classes.isTouch, plyr.browser.isTouch); // Inject the player wrapper if (plyr.type === 'video') { @@ -1533,8 +1537,10 @@ // Store reference to API plyr.container.plyr.embed = plyr.embed; - // Setup the UI - _setupInterface(); + // Setup the UI if full support + if (plyr.supported.full) { + _setupInterface(); + } // Set title _setTitle(_getElement('iframe')); @@ -1899,7 +1905,7 @@ targetTime = input; } // Event - else if (typeof input === 'object' && (input.type === 'input' || input.type === 'change')) { + else if (input.type && _inArray(['input', 'change'], input.type)) { // It's the seek slider // Seek to the selected time targetTime = ((input.target.value / input.target.max) * duration); @@ -2276,6 +2282,10 @@ // Video playing case 'timeupdate': case 'seeking': + if (plyr.controls.pressed) { + return; + } + value = _getPercentage(plyr.media.currentTime, duration); // Set seek range value only if it's a 'natural' time event @@ -2485,21 +2495,22 @@ if (!config.hideControls || plyr.type === 'audio') { return; } + var delay = 0, isEnterFullscreen = false, show = toggle; // Default to false if no boolean - if (typeof toggle !== "boolean") { + if (typeof toggle !== 'boolean') { if (toggle && toggle.type) { // Is the enter fullscreen event isEnterFullscreen = (toggle.type === 'enterfullscreen'); // Whether to show controls - show = _inArray(['mousemove', 'mouseenter', 'focus'], toggle.type); + show = _inArray(['mousemove', 'touchstart', 'mouseenter', 'focus'], toggle.type); - // Delay hiding on mousemove events - if (toggle.type === 'mousemove') { + // Delay hiding on move events + if (_inArray(['mousemove', 'touchmove'], toggle.type)) { delay = 2000; } @@ -2509,7 +2520,7 @@ } } else { - show = !_hasClass(plyr.container, config.classes.hideControls); + show = _hasClass(plyr.container, config.classes.hideControls); } } @@ -2526,7 +2537,7 @@ } // Delay for hiding on touch - if (plyr.browser.touch) { + if (plyr.browser.isTouch) { delay = 3000; } } @@ -2536,7 +2547,7 @@ if (!show || !plyr.media.paused) { plyr.timers.hover = window.setTimeout(function() { // If the mouse is over the controls (and not entering fullscreen), bail - if (plyr.controls.active && !isEnterFullscreen) { + if ((plyr.controls.pressed || plyr.controls.hover) && !isEnterFullscreen) { return; } @@ -2584,7 +2595,7 @@ // Sources are not checked for support so be careful function _updateSource(source) { if (typeof source === 'undefined' || !('sources' in source) || !source.sources.length) { - _log('Invalid source format', true); + _warn('Invalid source format'); return; } @@ -2712,6 +2723,10 @@ // Display duration if available _displayDuration(); } + // If embed but not fully supported, setupInterface now + else if (_inArray(config.types.embed, plyr.type) && !plyr.supported.full) { + _setupInterface(); + } // Set aria title and iframe title config.title = source.title; @@ -2857,11 +2872,16 @@ // Toggle controls visibility based on mouse movement if (config.hideControls) { // Toggle controls on mouse events and entering fullscreen - _on(plyr.container, 'mouseenter mouseleave mousemove enterfullscreen', _toggleControls); + _on(plyr.container, 'mouseenter mouseleave mousemove touchstart touchend touchcancel touchmove enterfullscreen', _toggleControls); // Watch for cursor over controls so they don't hide when trying to interact _on(plyr.controls, 'mouseenter mouseleave', function(event) { - plyr.controls.active = (event.type === 'mouseenter'); + plyr.controls.hover = event.type === 'mouseenter'; + }); + + // Watch for cursor over controls so they don't hide when trying to interact + _on(plyr.controls, 'mousedown mouseup touchstart touchend touchcancel', function(event) { + plyr.controls.pressed = _inArray(['mousedown', 'touchstart'], event.type); }); // Focus in/out on controls @@ -2959,8 +2979,8 @@ // On click play, pause ore restart _on(wrapper, 'click', function() { - if (plyr.browser.touch && !plyr.media.paused) { - _toggleControls(true); + // Touch devices will just show controls + if (plyr.browser.isTouch && !plyr.media.paused) { return; } @@ -3144,6 +3164,10 @@ _play(); } } + // If embed but not fully supported, setupInterface now (to avoid flash of controls) + else if (_inArray(config.types.embed, plyr.type) && !plyr.supported.full) { + _setupInterface(); + } // Successful setup plyr.init = true; @@ -3152,7 +3176,7 @@ function _setupInterface() { // Don't setup interface if no support if (!plyr.supported.full) { - _log('No full support for this media type (' + plyr.type + ')', true); + _warn('No full support for this media type (' + plyr.type + ')'); // Remove controls _remove(_getElement(config.selectors.controls.wrapper)); @@ -3277,34 +3301,35 @@ // Check for support function supported(type) { - var browser = _browserSniff(), - oldIE = (browser.isIE && browser.version <= 9), - iPhone = /iPhone|iPod/i.test(navigator.userAgent), - audio = !!document.createElement('audio').canPlayType, - video = !!document.createElement('video').canPlayType, + var browser = _browserSniff(), + isOldIE = (browser.isIE && browser.version <= 9), + isIos = browser.isIos, + isIphone = /iPhone|iPod/i.test(navigator.userAgent), + audio = !!document.createElement('audio').canPlayType, + video = !!document.createElement('video').canPlayType, basic, full; switch (type) { case 'video': basic = video; - full = (basic && (!oldIE && !iPhone)); + full = (basic && (!isOldIE && !isIphone)); break; case 'audio': basic = audio; - full = (basic && !oldIE); + full = (basic && !isOldIE); break; case 'vimeo': case 'youtube': case 'soundcloud': basic = true; - full = (!oldIE && !iPhone); + full = (!isOldIE && !isIos); break; default: basic = (audio && video); - full = (basic && !oldIE); + full = (basic && !isOldIE); } return { @@ -3429,7 +3454,7 @@ return false; } - function CustomEvent (event, params) { + function CustomEvent(event, params) { params = params || { bubbles: false, cancelable: false, detail: undefined }; var evt = document.createEvent('CustomEvent'); evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail); -- cgit v1.2.3 From 095d100ba44e828f82fb432c5d47fb89a6eaaaf4 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Sat, 25 Jun 2016 23:47:30 +1000 Subject: Version bump --- src/js/plyr.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'src/js/plyr.js') diff --git a/src/js/plyr.js b/src/js/plyr.js index 327cb9fa..b7f89258 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -1,6 +1,6 @@ // ========================================================================== // Plyr -// plyr.js v1.8.3 +// plyr.js v1.8.4 // https://github.com/selz/plyr // License: The MIT License (MIT) // ========================================================================== @@ -44,7 +44,7 @@ displayDuration: true, loadSprite: true, iconPrefix: 'plyr', - iconUrl: 'https://cdn.plyr.io/1.8.3/plyr.svg', + iconUrl: 'https://cdn.plyr.io/1.8.4/plyr.svg', clickToPlay: true, hideControls: true, showPosterOnEnd: false, -- cgit v1.2.3 From 7e7508ca821b930fc132370d6d490e9c16d983a4 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Sun, 26 Jun 2016 08:34:36 +1000 Subject: Fixed overflow issues (fixes #286) --- src/js/plyr.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'src/js/plyr.js') diff --git a/src/js/plyr.js b/src/js/plyr.js index b7f89258..fa66dca8 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -1,6 +1,6 @@ // ========================================================================== // Plyr -// plyr.js v1.8.4 +// plyr.js v1.8.5 // https://github.com/selz/plyr // License: The MIT License (MIT) // ========================================================================== @@ -44,7 +44,7 @@ displayDuration: true, loadSprite: true, iconPrefix: 'plyr', - iconUrl: 'https://cdn.plyr.io/1.8.4/plyr.svg', + iconUrl: 'https://cdn.plyr.io/1.8.5/plyr.svg', clickToPlay: true, hideControls: true, showPosterOnEnd: false, @@ -191,7 +191,7 @@ if ((navigator.appVersion.indexOf('Windows NT') !== -1) && (navigator.appVersion.indexOf('rv:11') !== -1)) { isIE = true; name = 'IE'; - fullVersion = '11;'; + fullVersion = '11'; } // MSIE else if ((verOffset = ua.indexOf('MSIE')) !== -1) { -- cgit v1.2.3 From 931672895fa84bd5d1e1d19c6291ca0ecc76eeeb Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Sun, 26 Jun 2016 09:04:38 +1000 Subject: Reverted font size change --- src/js/plyr.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'src/js/plyr.js') diff --git a/src/js/plyr.js b/src/js/plyr.js index fa66dca8..01fb38c4 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -1,6 +1,6 @@ // ========================================================================== // Plyr -// plyr.js v1.8.5 +// plyr.js v1.8.6 // https://github.com/selz/plyr // License: The MIT License (MIT) // ========================================================================== @@ -44,7 +44,7 @@ displayDuration: true, loadSprite: true, iconPrefix: 'plyr', - iconUrl: 'https://cdn.plyr.io/1.8.5/plyr.svg', + iconUrl: 'https://cdn.plyr.io/1.8.6/plyr.svg', clickToPlay: true, hideControls: true, showPosterOnEnd: false, -- cgit v1.2.3 From 7f7ecf852e2cc1e98ccb747c3a07206d7668520a Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Sun, 26 Jun 2016 09:07:42 +1000 Subject: Line height fix --- src/js/plyr.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'src/js/plyr.js') diff --git a/src/js/plyr.js b/src/js/plyr.js index 01fb38c4..11d32160 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -1,6 +1,6 @@ // ========================================================================== // Plyr -// plyr.js v1.8.6 +// plyr.js v1.8.7 // https://github.com/selz/plyr // License: The MIT License (MIT) // ========================================================================== @@ -44,7 +44,7 @@ displayDuration: true, loadSprite: true, iconPrefix: 'plyr', - iconUrl: 'https://cdn.plyr.io/1.8.6/plyr.svg', + iconUrl: 'https://cdn.plyr.io/1.8.7/plyr.svg', clickToPlay: true, hideControls: true, showPosterOnEnd: false, -- cgit v1.2.3 From 39dc651a9d2efc84abd4fb6d6f95b873ed54af0c Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Sun, 10 Jul 2016 20:50:55 +1000 Subject: Fix for !hideControls on touch devices (fixes #303) --- src/js/plyr.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'src/js/plyr.js') diff --git a/src/js/plyr.js b/src/js/plyr.js index 11d32160..6198c79a 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -2979,8 +2979,8 @@ // On click play, pause ore restart _on(wrapper, 'click', function() { - // Touch devices will just show controls - if (plyr.browser.isTouch && !plyr.media.paused) { + // Touch devices will just show controls (if we're hiding controls) + if (config.hideControls && plyr.browser.isTouch && !plyr.media.paused) { return; } -- cgit v1.2.3 From 3c9e9862d8183d8d20494b69d391fbe7ac38ff85 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Sun, 10 Jul 2016 20:58:19 +1000 Subject: Added getCurrentTime API method (fixes #292) --- src/js/plyr.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'src/js/plyr.js') diff --git a/src/js/plyr.js b/src/js/plyr.js index 6198c79a..1834e1c0 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -3264,7 +3264,8 @@ isFullscreen: function() { return plyr.isFullscreen || false; }, support: function(mimeType) { return _supportMime(plyr, mimeType); }, destroy: _destroy, - restore: _init + restore: _init, + getCurrentTime: function() { return plyr.media.currentTime; } }; } -- cgit v1.2.3 From eee699cec6c79a18a95fdf7fc5e7715698a867e9 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Sun, 10 Jul 2016 20:59:42 +1000 Subject: Version bump --- src/js/plyr.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'src/js/plyr.js') diff --git a/src/js/plyr.js b/src/js/plyr.js index 1834e1c0..9321b12f 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -1,6 +1,6 @@ // ========================================================================== // Plyr -// plyr.js v1.8.7 +// plyr.js v1.8.8 // https://github.com/selz/plyr // License: The MIT License (MIT) // ========================================================================== @@ -44,7 +44,7 @@ displayDuration: true, loadSprite: true, iconPrefix: 'plyr', - iconUrl: 'https://cdn.plyr.io/1.8.7/plyr.svg', + iconUrl: 'https://cdn.plyr.io/1.8.8/plyr.svg', clickToPlay: true, hideControls: true, showPosterOnEnd: false, -- cgit v1.2.3 From 05b9b9a83122597db6aa85b03691b94bcf566ecd Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Thu, 14 Jul 2016 17:13:37 +1000 Subject: Fix for MEDIA_ERR_SRC_NOT_SUPPORTED when calling .source() API method --- src/js/plyr.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) (limited to 'src/js/plyr.js') diff --git a/src/js/plyr.js b/src/js/plyr.js index 9321b12f..3cbd8e6d 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -3023,9 +3023,8 @@ // Set blank video src attribute // This is to prevent a MEDIA_ERR_SRC_NOT_SUPPORTED error - // Small mp4: https://github.com/mathiasbynens/small/blob/master/mp4.mp4 // Info: http://stackoverflow.com/questions/32231579/how-to-properly-dispose-of-an-html5-video-and-close-socket-or-connection - plyr.media.setAttribute('src', 'data:video/mp4;base64,AAAAHGZ0eXBpc29tAAACAGlzb21pc28ybXA0MQAAAAhmcmVlAAAAGm1kYXQAAAGzABAHAAABthBgUYI9t+8AAAMNbW9vdgAAAGxtdmhkAAAAAMXMvvrFzL76AAAD6AAAACoAAQAAAQAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgAAABhpb2RzAAAAABCAgIAHAE/////+/wAAAiF0cmFrAAAAXHRraGQAAAAPxcy++sXMvvoAAAABAAAAAAAAACoAAAAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAABAAAAAAAgAAAAIAAAAAAG9bWRpYQAAACBtZGhkAAAAAMXMvvrFzL76AAAAGAAAAAEVxwAAAAAALWhkbHIAAAAAAAAAAHZpZGUAAAAAAAAAAAAAAABWaWRlb0hhbmRsZXIAAAABaG1pbmYAAAAUdm1oZAAAAAEAAAAAAAAAAAAAACRkaW5mAAAAHGRyZWYAAAAAAAAAAQAAAAx1cmwgAAAAAQAAAShzdGJsAAAAxHN0c2QAAAAAAAAAAQAAALRtcDR2AAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAgACABIAAAASAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGP//AAAAXmVzZHMAAAAAA4CAgE0AAQAEgICAPyARAAAAAAMNQAAAAAAFgICALQAAAbABAAABtYkTAAABAAAAASAAxI2IAMUARAEUQwAAAbJMYXZjNTMuMzUuMAaAgIABAgAAABhzdHRzAAAAAAAAAAEAAAABAAAAAQAAABxzdHNjAAAAAAAAAAEAAAABAAAAAQAAAAEAAAAUc3RzegAAAAAAAAASAAAAAQAAABRzdGNvAAAAAAAAAAEAAAAsAAAAYHVkdGEAAABYbWV0YQAAAAAAAAAhaGRscgAAAAAAAAAAbWRpcmFwcGwAAAAAAAAAAAAAAAAraWxzdAAAACOpdG9vAAAAG2RhdGEAAAABAAAAAExhdmY1My4yMS4x'); + plyr.media.setAttribute('src', 'https://cdn.selz.com/plyr/blank.mp4'); // Load the new empty source // This will cancel existing requests @@ -3452,7 +3451,7 @@ // https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent (function () { if (typeof window.CustomEvent === 'function') { - return false; + return; } function CustomEvent(event, params) { -- cgit v1.2.3 From b8cdc71001cf78486b42a7e5a16eefb3f9f3da27 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Thu, 21 Jul 2016 21:14:22 +1000 Subject: Clean up of type checks and fix for _restart() (Fixes #315) --- src/js/plyr.js | 94 ++++++++++++++++++++++++++++++++++++---------------------- 1 file changed, 58 insertions(+), 36 deletions(-) (limited to 'src/js/plyr.js') diff --git a/src/js/plyr.js b/src/js/plyr.js index 3cbd8e6d..7ee27993 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -376,7 +376,7 @@ // Set attributes function _setAttributes(element, attributes) { for (var key in attributes) { - element.setAttribute(key, (typeof attributes[key] === 'boolean' && attributes[key]) ? '' : attributes[key]); + element.setAttribute(key, (_is.boolean(attributes[key]) && attributes[key]) ? '' : attributes[key]); } } @@ -464,7 +464,7 @@ // Whether the listener is a capturing listener or not // Default to false - if (typeof useCapture !== 'boolean') { + if (!_is.boolean(useCapture)) { useCapture = false; } @@ -492,7 +492,7 @@ } // Default bubbles to false - if (typeof bubbles !== 'boolean') { + if (!_is.boolean(bubbles)) { bubbles = false; } @@ -515,7 +515,7 @@ } // Get state - state = (typeof state === 'boolean' ? state : !target.getAttribute('aria-pressed')); + state = (_is.boolean(state) ? state : !target.getAttribute('aria-pressed')); // Set the attribute on target target.setAttribute('aria-pressed', state); @@ -570,6 +570,28 @@ return destination; } + // Check variable types + var _is = { + object: function(input) { + return input !== null && typeof(input) === 'object' && input.constructor === Object; + }, + array: function(input) { + return input !== null && typeof(input) === 'object' && input.constructor === Array; + }, + number: function(input) { + return typeof(input) === 'number' && !isNaN(input - 0) || (typeof input == 'object' && input.constructor === Number); + }, + string: function(input) { + return typeof input === 'string' || (typeof input == 'object' && input.constructor === String); + }, + boolean: function(input) { + return typeof input === 'boolean'; + }, + undefined: function(input) { + return typeof input === 'undefined'; + } + }; + // Fullscreen API function _fullscreen() { var fullscreen = { @@ -584,7 +606,7 @@ browserPrefixes = 'webkit moz o ms khtml'.split(' '); // Check for native support - if (typeof document.cancelFullScreen !== 'undefined') { + if (!_is.undefined(document.cancelFullScreen)) { fullscreen.supportsFullScreen = true; } else { @@ -592,12 +614,12 @@ for (var i = 0, il = browserPrefixes.length; i < il; i++ ) { fullscreen.prefix = browserPrefixes[i]; - if (typeof document[fullscreen.prefix + 'CancelFullScreen'] !== 'undefined') { + if (!_is.undefined(document[fullscreen.prefix + 'CancelFullScreen'])) { fullscreen.supportsFullScreen = true; break; } // Special case for MS (when isn't it?) - else if (typeof document.msExitFullscreen !== 'undefined' && document.msFullscreenEnabled) { + else if (!_is.undefined(document.msExitFullscreen) && document.msFullscreenEnabled) { fullscreen.prefix = 'ms'; fullscreen.supportsFullScreen = true; break; @@ -612,7 +634,7 @@ fullscreen.fullScreenEventName = (fullscreen.prefix == 'ms' ? 'MSFullscreenChange' : fullscreen.prefix + 'fullscreenchange'); fullscreen.isFullScreen = function(element) { - if (typeof element === 'undefined') { + if (_is.undefined(element)) { element = document.body; } switch (this.prefix) { @@ -625,7 +647,7 @@ } }; fullscreen.requestFullScreen = function(element) { - if (typeof element === 'undefined') { + if (_is.undefined(element)) { element = document.body; } return (this.prefix === '') ? element.requestFullScreen() : element[this.prefix + (this.prefix == 'ms' ? 'RequestFullscreen' : 'RequestFullScreen')](); @@ -1041,12 +1063,12 @@ container.innerHTML = ''; // Default to empty - if (typeof caption === 'undefined') { + if (_is.undefined(caption)) { caption = ''; } // Set the span content - if (typeof caption === 'string') { + if (_is.undefined(caption)) { content.innerHTML = caption.trim(); } else { @@ -1106,7 +1128,7 @@ // Check time is a number, if not use currentTime // IE has a bug where currentTime doesn't go to 0 // https://twitter.com/Sam_Potts/status/573715746506731521 - time = typeof time === 'number' ? time : plyr.media.currentTime; + time = _is.number(time) ? time : plyr.media.currentTime; // If there's no subs available, bail if (!plyr.captions[plyr.subcount]) { @@ -1197,7 +1219,7 @@ // Add elements to HTML5 media (source, tracks, etc) function _insertChildElements(type, attributes) { - if (typeof attributes === 'string') { + if (_is.string(attributes)) { _insertElement(type, plyr.media, { src: attributes }); } else if (attributes.constructor === Array) { @@ -1247,7 +1269,7 @@ if (config.selectors.controls.container !== null) { container = config.selectors.controls.container; - if (typeof selector === 'string') { + if (_is.string(selector)) { container = document.querySelector(container); } } @@ -1350,7 +1372,7 @@ var label = config.i18n.play; // If there's a media title set, use that for the label - if (typeof(config.title) !== 'undefined' && config.title.length) { + if (!_is.undefined(config.title) && config.title.length) { label += ', ' + config.title; } @@ -1443,7 +1465,7 @@ container.setAttribute('id', id); // Setup API - if (typeof YT === 'object') { + if (_is.object(YT)) { _youTubeReady(mediaId, container); } else { @@ -1878,7 +1900,7 @@ // Rewind function _rewind(seekTime) { // Use default if needed - if (typeof seekTime !== 'number') { + if (!_is.number(seekTime)) { seekTime = config.seekTime; } _seek(plyr.media.currentTime - seekTime); @@ -1887,7 +1909,7 @@ // Fast forward function _forward(seekTime) { // Use default if needed - if (typeof seekTime !== 'number') { + if (!_is.number(seekTime)) { seekTime = config.seekTime; } _seek(plyr.media.currentTime + seekTime); @@ -1901,11 +1923,11 @@ duration = _getDuration(); // Explicit position - if (typeof input === 'number') { + if (_is.number(input)) { targetTime = input; } // Event - else if (input.type && _inArray(['input', 'change'], input.type)) { + else if (_is.object(input) && _inArray(['input', 'change'], input.type)) { // It's the seek slider // Seek to the selected time targetTime = ((input.target.value / input.target.max) * duration); @@ -2082,7 +2104,7 @@ // Mute function _toggleMute(muted) { // If the method is called without parameter, toggle based on current value - if (typeof muted !== 'boolean') { + if (!_is.boolean(muted)) { muted = !plyr.media.muted; } @@ -2125,7 +2147,7 @@ min = config.volumeMin; // Use default if no value specified - if (typeof volume === 'undefined') { + if (_is.undefined(volume)) { volume = config.volume; if (config.storage.enabled && _storage().supported) { @@ -2237,7 +2259,7 @@ } // If the method is called without parameter, toggle based on current value - if (typeof show !== 'boolean') { + if (!_is.boolean(show)) { show = (plyr.container.className.indexOf(config.classes.captions.active) === -1); } @@ -2307,7 +2329,7 @@ return _getPercentage(buffered.end(0), duration); } // YouTube returns between 0 and 1 - else if (typeof buffered === 'number') { + else if (_is.number(buffered)) { return (buffered * 100); } @@ -2329,11 +2351,11 @@ } // Default to 0 - if (typeof value === 'undefined') { + if (_is.undefined(value)) { value = 0; } // Default to buffer or bail - if (typeof progress === 'undefined') { + if (_is.undefined(progress)) { if (plyr.progress && plyr.progress.buffer) { progress = plyr.progress.buffer; } @@ -2424,7 +2446,7 @@ // Update seek range and progress function _updateSeekDisplay(time) { // Default to 0 - if (typeof time !== 'number') { + if (!_is.number(time)) { time = 0; } @@ -2501,7 +2523,7 @@ show = toggle; // Default to false if no boolean - if (typeof toggle !== 'boolean') { + if (!_is.boolean(toggle)) { if (toggle && toggle.type) { // Is the enter fullscreen event isEnterFullscreen = (toggle.type === 'enterfullscreen'); @@ -2559,7 +2581,7 @@ // Add common function to retrieve media source function _source(source) { // If not null or undefined, parse it - if (typeof source !== 'undefined') { + if (!_is.undefined(source)) { _updateSource(source); return; } @@ -2594,7 +2616,7 @@ // Update source // Sources are not checked for support so be careful function _updateSource(source) { - if (typeof source === 'undefined' || !('sources' in source) || !source.sources.length) { + if (!_is.object(source) || !('sources' in source) || !source.sources.length) { _warn('Invalid source format'); return; } @@ -2671,7 +2693,7 @@ _prependChild(plyr.container, plyr.media); // Autoplay the new source? - if (typeof source.autoplay !== 'undefined') { + if (_is.boolean(source.autoplay)) { config.autoplay = source.autoplay; } @@ -3273,7 +3295,7 @@ var x = new XMLHttpRequest(); // If the id is set and sprite exists, bail - if (typeof id === 'string' && document.querySelector('#' + id) !== null) { + if (_is.string(id) && document.querySelector('#' + id) !== null) { return; } @@ -3289,7 +3311,7 @@ x.onload = function() { var c = document.createElement('div'); c.setAttribute('hidden', ''); - if (typeof id === 'string') { + if (_is.string(id)) { c.setAttribute('id', id); } c.innerHTML = x.responseText; @@ -3347,7 +3369,7 @@ // Select the elements // Assume elements is a NodeList by default - if (typeof targets === 'string') { + if (_is.string(targets)) { targets = document.querySelectorAll(targets); } // Single HTMLElement passed @@ -3355,9 +3377,9 @@ targets = [targets]; } // No selector passed, possibly options as first argument - else if (!(targets instanceof NodeList) && typeof targets !== 'string') { + else if (!(targets instanceof NodeList) && !_is.string(targets)) { // If options are the first argument - if (typeof options === 'undefined' && typeof targets === 'object') { + if (_is.undefined(options) && _is.object(targets)) { options = targets; } -- cgit v1.2.3 From a85d45d2e5ac5391e9afeadffa5ed82726cd7345 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Thu, 21 Jul 2016 21:21:10 +1000 Subject: Fix for fullscreen not being defined (Fixes #295) --- src/js/plyr.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) (limited to 'src/js/plyr.js') diff --git a/src/js/plyr.js b/src/js/plyr.js index 7ee27993..ddf3a62d 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -900,7 +900,9 @@ } // Toggle state - _toggleState(plyr.buttons.fullscreen, false); + if (plyr.buttons && plyr.buttons.fullscreen) { + _toggleState(plyr.buttons.fullscreen, false); + } // Setup focus trap _focusTrap(); -- cgit v1.2.3 From 57ad124ce837e1c5cde5663d32ea7c172dc59b26 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Thu, 21 Jul 2016 21:25:27 +1000 Subject: v1.8.9 --- src/js/plyr.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) (limited to 'src/js/plyr.js') diff --git a/src/js/plyr.js b/src/js/plyr.js index ddf3a62d..4afc78a6 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -1,6 +1,6 @@ // ========================================================================== // Plyr -// plyr.js v1.8.8 +// plyr.js v1.8.9 // https://github.com/selz/plyr // License: The MIT License (MIT) // ========================================================================== @@ -44,7 +44,7 @@ displayDuration: true, loadSprite: true, iconPrefix: 'plyr', - iconUrl: 'https://cdn.plyr.io/1.8.8/plyr.svg', + iconUrl: 'https://cdn.plyr.io/1.8.9/plyr.svg', clickToPlay: true, hideControls: true, showPosterOnEnd: false, @@ -2084,7 +2084,9 @@ _focusTrap(plyr.isFullscreen); // Set button state - _toggleState(plyr.buttons.fullscreen, plyr.isFullscreen); + if (plyr.buttons && plyr.buttons.fullscreen) { + _toggleState(plyr.buttons.fullscreen, plyr.isFullscreen); + } // Trigger an event _triggerEvent(plyr.container, plyr.isFullscreen ? 'enterfullscreen' : 'exitfullscreen', true); -- cgit v1.2.3 From e72a91de6e5a89d92c5e10a8c725df5d543c31e9 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Thu, 21 Jul 2016 21:59:16 +1000 Subject: Fix for seek issues introduced in v1.8.9 --- src/js/plyr.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'src/js/plyr.js') diff --git a/src/js/plyr.js b/src/js/plyr.js index 4afc78a6..a9c923f7 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -1,6 +1,6 @@ // ========================================================================== // Plyr -// plyr.js v1.8.9 +// plyr.js v1.8.10 // https://github.com/selz/plyr // License: The MIT License (MIT) // ========================================================================== @@ -44,7 +44,7 @@ displayDuration: true, loadSprite: true, iconPrefix: 'plyr', - iconUrl: 'https://cdn.plyr.io/1.8.9/plyr.svg', + iconUrl: 'https://cdn.plyr.io/1.8.10/plyr.svg', clickToPlay: true, hideControls: true, showPosterOnEnd: false, @@ -573,7 +573,7 @@ // Check variable types var _is = { object: function(input) { - return input !== null && typeof(input) === 'object' && input.constructor === Object; + return input !== null && typeof(input) === 'object'; }, array: function(input) { return input !== null && typeof(input) === 'object' && input.constructor === Array; -- cgit v1.2.3 From 0505e49038f76b353e78489ebb28b6cdf40f9a3e Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Sat, 23 Jul 2016 10:42:06 +1000 Subject: Vimeo API upgrade, YouTube Bugfix, Array support - Vimeo API upgrade - Fix for YouTube bug introduced in v1.8.9 (Fixes #320) - Added support for passing array to .setup() (Fixes #319) --- src/js/plyr.js | 229 +++++++++++++++++++++++++++------------------------------ 1 file changed, 107 insertions(+), 122 deletions(-) (limited to 'src/js/plyr.js') diff --git a/src/js/plyr.js b/src/js/plyr.js index a9c923f7..9cab9e09 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -1,6 +1,6 @@ // ========================================================================== // Plyr -// plyr.js v1.8.10 +// plyr.js v1.8.11 // https://github.com/selz/plyr // License: The MIT License (MIT) // ========================================================================== @@ -23,7 +23,6 @@ } }(typeof window !== 'undefined' ? window : this, function(window, document) { 'use strict'; - /*global YT,$f*/ // Globals var fullscreen, @@ -44,7 +43,7 @@ displayDuration: true, loadSprite: true, iconPrefix: 'plyr', - iconUrl: 'https://cdn.plyr.io/1.8.10/plyr.svg', + iconUrl: 'https://cdn.plyr.io/1.8.11/plyr.svg', clickToPlay: true, hideControls: true, showPosterOnEnd: false, @@ -146,7 +145,7 @@ // URLs urls: { vimeo: { - api: 'https://cdn.plyr.io/froogaloop/1.0.1/plyr.froogaloop.js', + api: 'https://player.vimeo.com/api/player.js', }, youtube: { api: 'https://www.youtube.com/iframe_api' @@ -587,6 +586,12 @@ boolean: function(input) { return typeof input === 'boolean'; }, + nodeList: function(input) { + return input instanceof NodeList; + }, + htmlElement: function(input) { + return input instanceof HTMLElement; + }, undefined: function(input) { return typeof input === 'undefined'; } @@ -911,6 +916,7 @@ // Setup captions function _setupCaptions() { + // Bail if not HTML5 video if (plyr.type !== 'video') { return; } @@ -1271,13 +1277,13 @@ if (config.selectors.controls.container !== null) { container = config.selectors.controls.container; - if (_is.string(selector)) { + if (_is.string(container)) { container = document.querySelector(container); } } // Inject into the container by default - if (!(container instanceof HTMLElement)) { + if (!_is.htmlElement(container)) { container = plyr.container } @@ -1387,7 +1393,7 @@ // Set iframe title // https://github.com/Selz/plyr/issues/124 - if (iframe instanceof HTMLElement) { + if (_is.htmlElement(iframe)) { iframe.setAttribute('title', config.i18n.frameTitle.replace('{title}', config.title)); } } @@ -1467,7 +1473,7 @@ container.setAttribute('id', id); // Setup API - if (_is.object(YT)) { + if (_is.object(window.YT)) { _youTubeReady(mediaId, container); } else { @@ -1488,41 +1494,27 @@ } // Vimeo else if (plyr.type === 'vimeo') { - // Inject the iframe - var vimeo = document.createElement('iframe'); - - // Watch for iframe load - vimeo.loaded = false; - _on(vimeo, 'load', function() { vimeo.loaded = true; }); - - _setAttributes(vimeo, { - 'src': 'https://player.vimeo.com/video/' + mediaId + '?player_id=' + id + '&api=1&badge=0&byline=0&portrait=0&title=0', - 'id': id, - 'allowfullscreen': '', - 'frameborder': 0 - }); + // Create the YouTube container + plyr.media.appendChild(container); - // If full support, we can use custom controls (hiding Vimeos), if not, use Vimeo - if (plyr.supported.full) { - container.appendChild(vimeo); - plyr.media.appendChild(container); - } - else { - plyr.media.appendChild(vimeo); - } + // Set ID + container.setAttribute('id', id); // Load the API if not already - if (!('$f' in window)) { + if (!_is.object(window.Vimeo)) { _injectScript(config.urls.vimeo.api); - } - // Wait for fragaloop load - var vimeoTimer = window.setInterval(function() { - if ('$f' in window && vimeo.loaded) { - window.clearInterval(vimeoTimer); - _vimeoReady.call(vimeo); - } - }, 50); + // Wait for fragaloop load + var vimeoTimer = window.setInterval(function() { + if (_is.object(window.Vimeo)) { + window.clearInterval(vimeoTimer); + _vimeoReady(mediaId, container); + } + }, 50); + } + else { + _vimeoReady(mediaId, container); + } } // Soundcloud else if (plyr.type === 'soundcloud') { @@ -1580,7 +1572,7 @@ // Setup instance // https://developers.google.com/youtube/iframe_api_reference - plyr.embed = new YT.Player(container.id, { + plyr.embed = new window.YT.Player(container.id, { videoId: videoId, playerVars: { autoplay: (config.autoplay ? 1 : 0), @@ -1708,86 +1700,86 @@ } // Vimeo ready - function _vimeoReady() { - /* jshint validthis: true */ - plyr.embed = $f(this); - - // Setup on ready - plyr.embed.addEvent('ready', function() { + function _vimeoReady(mediaId, container) { + // Setup player + plyr.embed = new window.Vimeo.Player(container.id, { + id: mediaId, + loop: config.loop, + autoplay: config.autoplay, + byline: false, + portrait: false, + title: false + }); - // Create a faux HTML5 API using the Vimeo API - plyr.media.play = function() { - plyr.embed.api('play'); - plyr.media.paused = false; - }; - plyr.media.pause = function() { - plyr.embed.api('pause'); - plyr.media.paused = true; - }; - plyr.media.stop = function() { - plyr.embed.api('stop'); - plyr.media.paused = true; - }; + // Create a faux HTML5 API using the Vimeo API + plyr.media.play = function() { + plyr.embed.play(); + plyr.media.paused = false; + }; + plyr.media.pause = function() { + plyr.embed.pause(); plyr.media.paused = true; - plyr.media.currentTime = 0; - - // Update UI - _embedReady(); - - plyr.embed.api('getCurrentTime', function (value) { - plyr.media.currentTime = value; + }; + plyr.media.stop = function() { + plyr.embed.stop(); + plyr.media.paused = true; + }; + plyr.media.paused = true; + plyr.media.currentTime = 0; - // Trigger timeupdate - _triggerEvent(plyr.media, 'timeupdate'); - }); + // Update UI + _embedReady(); - plyr.embed.api('getDuration', function(value) { - plyr.media.duration = value; + plyr.embed.getCurrentTime().then(function (value) { + plyr.media.currentTime = value; - // Display duration if available - _displayDuration(); - }); + // Trigger timeupdate + _triggerEvent(plyr.media, 'timeupdate'); + }); - plyr.embed.addEvent('play', function() { - plyr.media.paused = false; - _triggerEvent(plyr.media, 'play'); - _triggerEvent(plyr.media, 'playing'); - }); + plyr.embed.getDuration().then(function(value) { + plyr.media.duration = value; - plyr.embed.addEvent('pause', function() { - plyr.media.paused = true; - _triggerEvent(plyr.media, 'pause'); - }); + // Display duration if available + _displayDuration(); + }); - plyr.embed.addEvent('playProgress', function(data) { - plyr.media.seeking = false; - plyr.media.currentTime = data.seconds; - _triggerEvent(plyr.media, 'timeupdate'); - }); + // Captions + if (config.captions.defaultActive) { + plyr.embed.enableTextTrack('en'); + } - plyr.embed.addEvent('loadProgress', function(data) { - plyr.media.buffered = data.percent; - _triggerEvent(plyr.media, 'progress'); + plyr.embed.on('play', function() { + plyr.media.paused = false; + _triggerEvent(plyr.media, 'play'); + _triggerEvent(plyr.media, 'playing'); + }); - if (parseInt(data.percent) === 1) { - // Trigger event - _triggerEvent(plyr.media, 'canplaythrough'); - } - }); + plyr.embed.on('pause', function() { + plyr.media.paused = true; + _triggerEvent(plyr.media, 'pause'); + }); - plyr.embed.addEvent('finish', function() { - plyr.media.paused = true; - _triggerEvent(plyr.media, 'ended'); - }); + plyr.embed.on('timeupdate', function(data) { + plyr.media.seeking = false; + plyr.media.currentTime = data.seconds; + _triggerEvent(plyr.media, 'timeupdate'); + }); - // Always seek to 0 - // plyr.embed.api('seekTo', 0); + plyr.embed.on('progress', function(data) { + plyr.media.buffered = data.percent; + _triggerEvent(plyr.media, 'progress'); - // Autoplay - if (config.autoplay) { - plyr.embed.api('play'); + if (parseInt(data.percent) === 1) { + // Trigger event + _triggerEvent(plyr.media, 'canplaythrough'); } }); + + plyr.embed.on('ended', function() { + plyr.media.paused = true; + _triggerEvent(plyr.media, 'ended'); + }); } // Soundcloud ready @@ -1963,7 +1955,7 @@ case 'vimeo': // Round to nearest second for vimeo - plyr.embed.api('seekTo', targetTime.toFixed(0)); + plyr.embed.setCurrentTime(targetTime.toFixed(0)); break; case 'soundcloud': @@ -2132,9 +2124,6 @@ break; case 'vimeo': - plyr.embed.api('setVolume', plyr.media.muted ? 0 : parseFloat(config.volume / config.volumeMax)); - break; - case 'soundcloud': plyr.embed.setVolume(plyr.media.muted ? 0 : parseFloat(config.volume / config.volumeMax)); break; @@ -2187,16 +2176,12 @@ // Embeds if (_inArray(config.types.embed, plyr.type)) { - // YouTube switch(plyr.type) { case 'youtube': plyr.embed.setVolume(plyr.media.volume * 100); break; case 'vimeo': - plyr.embed.api('setVolume', plyr.media.volume); - break; - case 'soundcloud': plyr.embed.setVolume(plyr.media.volume); break; @@ -2369,7 +2354,7 @@ } // One progress element passed - if (progress instanceof HTMLElement) { + if (_is.htmlElement(progress)) { progress.value = value; } // Object of progress + text element @@ -2598,7 +2583,7 @@ break; case 'vimeo': - plyr.embed.api('getVideoUrl', function (value) { + plyr.embed.getVideoUrl.then(function (value) { url = value; }); break; @@ -2826,7 +2811,7 @@ for (var button in plyr.buttons) { var element = plyr.buttons[button]; - if (element instanceof NodeList) { + if (_is.nodeList(element)) { for (var i = 0; i < element.length; i++) { _toggleClass(element[i], config.classes.tabFocus, (element[i] === focused)); } @@ -3377,11 +3362,11 @@ targets = document.querySelectorAll(targets); } // Single HTMLElement passed - else if (targets instanceof HTMLElement) { + else if (_is.htmlElement(targets)) { targets = [targets]; } // No selector passed, possibly options as first argument - else if (!(targets instanceof NodeList) && !_is.string(targets)) { + else if (!_is.nodeList(targets) && !_is.array(targets) && !_is.string(targets)) { // If options are the first argument if (_is.undefined(options) && _is.object(targets)) { options = targets; @@ -3391,17 +3376,17 @@ targets = document.querySelectorAll(selector); } + // Convert NodeList to array + if (_is.nodeList(targets)) { + targets = Array.prototype.slice.call(targets); + } + // Bail if disabled or no basic support // You may want to disable certain UAs etc if (!supported().basic || !targets.length) { return false; } - // Convert NodeList to array - if (targets instanceof NodeList) { - targets = Array.prototype.slice.call(targets); - } - // Check if the targets have multiple media elements for (var i = 0; i < targets.length; i++) { var target = targets[i]; -- cgit v1.2.3 From d7cc29f2fbc046f8b78a558df9c5504f8e608326 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Sat, 23 Jul 2016 11:11:17 +1000 Subject: Vimeo keyboard focus fix (Fixes #317), Fix for Vimeo on basic support devices --- src/js/plyr.js | 28 +++++++++++++++++++++------- 1 file changed, 21 insertions(+), 7 deletions(-) (limited to 'src/js/plyr.js') diff --git a/src/js/plyr.js b/src/js/plyr.js index 9cab9e09..c176f59b 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -1,6 +1,6 @@ // ========================================================================== // Plyr -// plyr.js v1.8.11 +// plyr.js v1.8.12 // https://github.com/selz/plyr // License: The MIT License (MIT) // ========================================================================== @@ -43,7 +43,7 @@ displayDuration: true, loadSprite: true, iconPrefix: 'plyr', - iconUrl: 'https://cdn.plyr.io/1.8.11/plyr.svg', + iconUrl: 'https://cdn.plyr.io/1.8.12/plyr.svg', clickToPlay: true, hideControls: true, showPosterOnEnd: false, @@ -1494,8 +1494,13 @@ } // Vimeo else if (plyr.type === 'vimeo') { - // Create the YouTube container - plyr.media.appendChild(container); + // Vimeo needs an extra div to hide controls on desktop (which has full support) + if (plyr.supported.full) { + plyr.media.appendChild(container); + } + else { + container = plyr.media; + } // Set ID container.setAttribute('id', id); @@ -1517,6 +1522,7 @@ } } // Soundcloud + // TODO: Currently unsupported and undocumented else if (plyr.type === 'soundcloud') { // Inject the iframe var soundCloud = document.createElement('iframe'); @@ -1744,10 +1750,18 @@ _displayDuration(); }); - // Captions - if (config.captions.defaultActive) { + // TODO: Captions + /*if (config.captions.defaultActive) { plyr.embed.enableTextTrack('en'); - } + }*/ + + // Fix keyboard focus issues + // https://github.com/Selz/plyr/issues/317 + plyr.embed.on('loaded', function() { + if(_is.htmlElement(plyr.embed.element)) { + plyr.embed.element.setAttribute('tabindex', '-1'); + } + }); plyr.embed.on('play', function() { plyr.media.paused = false; -- cgit v1.2.3 From 6e18bc8b31d33f4dbe5413a5a6ac712a7c64bb74 Mon Sep 17 00:00:00 2001 From: Khalid Aziz Date: Thu, 4 Aug 2016 02:05:12 -0500 Subject: Updated define to work with AMD imports --- src/js/plyr.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/js/plyr.js') diff --git a/src/js/plyr.js b/src/js/plyr.js index c176f59b..71f98af5 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -16,7 +16,7 @@ module.exports = factory(root, document); } else if (typeof define === 'function' && define.amd) { // AMD - define(null, function() { factory(root, document) }); + define([], function () { return factory(root, document); }); } else { // Browser globals (root is window) root.plyr = factory(root, document); -- cgit v1.2.3 From 35c6ec946160817e666124202986960c6b688038 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Sat, 6 Aug 2016 11:08:04 +1000 Subject: Manually merged #313 PR --- src/js/plyr.js | 86 ++++++++++++++++++++++++++++++++++++++++++++++------------ 1 file changed, 69 insertions(+), 17 deletions(-) (limited to 'src/js/plyr.js') diff --git a/src/js/plyr.js b/src/js/plyr.js index c176f59b..f01866bd 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -1173,7 +1173,15 @@ _toggleClass(plyr.container, config.classes.captions.enabled, true); - if (config.captions.defaultActive) { + // Try to load the value from storage + var active = plyr.storage.captionsEnabled; + + // Otherwise fall back to the default config + if (!_is.boolean(active)) { + active = config.captions.defaultActive; + } + + if (active) { _toggleClass(plyr.container, config.classes.captions.active, true); _toggleState(plyr.buttons.captions, true); } @@ -1398,6 +1406,53 @@ } } + // Setup localStorage + function _setupStorage() { + var value = null; + plyr.storage = {}; + + // Bail if we don't have localStorage support or it's disabled + if (!_storage().supported || !config.storage.enabled) { + return; + } + + // Clean up old volume + // https://github.com/Selz/plyr/issues/171 + window.localStorage.removeItem('plyr-volume'); + + // load value from the current key + value = window.localStorage.getItem(config.storage.key); + + if (!value) { + // Key wasn't set (or had been cleared), move along + return; + } + else if (/^\d+(\.\d+)?$/.test(value)) { + // If value is a number, it's probably volume from an older + // version of plyr. See: https://github.com/Selz/plyr/pull/313 + // Update the key to be JSON + _updateStorage({volume: parseFloat(value)}); + } + else { + // Assume it's JSON from this or a later version of plyr + plyr.storage = JSON.parse(value); + } + } + + // Save a value back to local storage + function _updateStorage(value) { + // Bail if we don't have localStorage support or it's disabled + if (!_storage().supported || !config.storage.enabled) { + return; + } + + // Update the working copy of the values + _extend(plyr.storage, value); + + window.localStorage.setItem( + config.storage.key, JSON.stringify(plyr.storage)); + } + // Setup media function _setupMedia() { // If there's no media, bail @@ -1707,7 +1762,8 @@ // Vimeo ready function _vimeoReady(mediaId, container) { - // Setup player + // Setup instance + // https://github.com/vimeo/player.js plyr.embed = new window.Vimeo.Player(container.id, { id: mediaId, loop: config.loop, @@ -1758,7 +1814,7 @@ // Fix keyboard focus issues // https://github.com/Selz/plyr/issues/317 plyr.embed.on('loaded', function() { - if(_is.htmlElement(plyr.embed.element)) { + if(_is.htmlElement(plyr.embed.element) && plyr.supported.full) { plyr.embed.element.setAttribute('tabindex', '-1'); } }); @@ -2153,17 +2209,9 @@ var max = config.volumeMax, min = config.volumeMin; - // Use default if no value specified + // Load volume from storage if no value specified if (_is.undefined(volume)) { - volume = config.volume; - - if (config.storage.enabled && _storage().supported) { - volume = window.localStorage.getItem(config.storage.key); - - // Clean up old volume - // https://github.com/Selz/plyr/issues/171 - window.localStorage.removeItem('plyr-volume'); - } + volume = plyr.storage.volume; } // Use config if all else fails @@ -2240,10 +2288,8 @@ } } - // Store the volume in storage - if (config.storage.enabled && _storage().supported && !isNaN(volume)) { - window.localStorage.setItem(config.storage.key, volume); - } + // Update the volume in storage + _updateStorage({volume: volume}); // Toggle class if muted _toggleClass(plyr.container, config.classes.muted, (volume === 0)); @@ -2277,6 +2323,9 @@ // Trigger an event _triggerEvent(plyr.container, plyr.captionsEnabled ? 'captionsenabled' : 'captionsdisabled', true); + + // Save captions state to localStorage + _updateStorage({captionsEnabled: plyr.captionsEnabled}); } // Check if media is loading @@ -3128,6 +3177,9 @@ return; } + // Load saved settings from localStorage + _setupStorage(); + // Get original classname plyr.originalClassName = plyr.container.className; -- cgit v1.2.3 From 58e9b02405ccd3c3502bbf221097aa0604796769 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Sat, 6 Aug 2016 11:09:55 +1000 Subject: Merge --- src/js/plyr.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/js/plyr.js') diff --git a/src/js/plyr.js b/src/js/plyr.js index fc49a123..f01866bd 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -16,7 +16,7 @@ module.exports = factory(root, document); } else if (typeof define === 'function' && define.amd) { // AMD - define([], function () { return factory(root, document); }); + define(null, function() { factory(root, document) }); } else { // Browser globals (root is window) root.plyr = factory(root, document); -- cgit v1.2.3