From 1cc2930dc0b81183bc47442f5ad9b5d8df94cc5f Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Sat, 4 Nov 2017 14:25:28 +1100 Subject: ES6-ified --- src/js/support.js | 174 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 174 insertions(+) create mode 100644 src/js/support.js (limited to 'src/js/support.js') diff --git a/src/js/support.js b/src/js/support.js new file mode 100644 index 00000000..78650c9f --- /dev/null +++ b/src/js/support.js @@ -0,0 +1,174 @@ +// ========================================================================== +// Plyr support checks +// ========================================================================== + +import utils from './utils'; + +// Check for feature support +const support = { + // Basic support + audio: 'canPlayType' in document.createElement('audio'), + video: 'canPlayType' in document.createElement('video'), + + // Check for support + // Basic functionality vs full UI + check(type, inline) { + let api = false; + let ui = false; + const browser = utils.getBrowser(); + const playsInline = browser.isIPhone && inline && support.inline; + + switch (type) { + case 'video': + api = support.video; + ui = api && support.rangeInput && (!browser.isIPhone || playsInline); + break; + + case 'audio': + api = support.audio; + ui = api && support.rangeInput; + break; + + case 'youtube': + api = true; + ui = support.rangeInput && (!browser.isIPhone || playsInline); + break; + + case 'vimeo': + api = true; + ui = support.rangeInput && !browser.isIPhone; + break; + + default: + api = support.audio && support.video; + ui = api && support.rangeInput; + } + + return { + api, + ui, + }; + }, + + // Local storage + // We can't assume if local storage is present that we can use it + storage: (() => { + if (!('localStorage' in window)) { + return false; + } + + // Try to use it (it might be disabled, e.g. user is in private/porn mode) + // see: https://github.com/sampotts/plyr/issues/131 + const test = '___test'; + try { + window.localStorage.setItem(test, test); + window.localStorage.removeItem(test); + return true; + } catch (e) { + return false; + } + })(), + + // Picture-in-picture support + // Safari only currently + pip: (() => { + const browser = utils.getBrowser(); + return !browser.isIPhone && utils.is.function(utils.createElement('video').webkitSetPresentationMode); + })(), + + // Airplay support + // Safari only currently + airplay: utils.is.function(window.WebKitPlaybackTargetAvailabilityEvent), + + // Inline playback support + // https://webkit.org/blog/6784/new-video-policies-for-ios/ + inline: 'playsInline' in document.createElement('video'), + + // Check for mime type support against a player instance + // Credits: http://diveintohtml5.info/everything.html + // Related: http://www.leanbackplayer.com/test/h5mt.html + mime(player, type) { + const media = { player }; + + try { + // Bail if no checking function + if (!utils.is.function(media.canPlayType)) { + return false; + } + + // Type specific checks + if (player.type === 'video') { + switch (type) { + case 'video/webm': + return media.canPlayType('video/webm; codecs="vp8, vorbis"').replace(/no/, ''); + case 'video/mp4': + return media.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"').replace(/no/, ''); + case 'video/ogg': + return media.canPlayType('video/ogg; codecs="theora"').replace(/no/, ''); + default: + return false; + } + } else if (player.type === 'audio') { + switch (type) { + case 'audio/mpeg': + return media.canPlayType('audio/mpeg;').replace(/no/, ''); + case 'audio/ogg': + return media.canPlayType('audio/ogg; codecs="vorbis"').replace(/no/, ''); + case 'audio/wav': + return media.canPlayType('audio/wav; codecs="1"').replace(/no/, ''); + default: + return false; + } + } + } catch (e) { + return false; + } + + // If we got this far, we're stuffed + return false; + }, + + // Check for textTracks support + textTracks: 'textTracks' in document.createElement('video'), + + // Check for passive event listener support + // https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md + // https://www.youtube.com/watch?v=NPM6172J22g + passiveListeners: (() => { + // Test via a getter in the options object to see if the passive property is accessed + let supported = false; + try { + const options = Object.defineProperty({}, 'passive', { + get() { + supported = true; + return null; + }, + }); + window.addEventListener('test', null, options); + } catch (e) { + // Do nothing + } + + return supported; + })(), + + // Sliders + rangeInput: (() => { + const range = document.createElement('input'); + range.type = 'range'; + return range.type === 'range'; + })(), + + // Touch + // Remember a device can be moust + touch enabled + touch: 'ontouchstart' in document.documentElement, + + // Detect transitions support + transitions: utils.transitionEnd !== false, + + // Reduced motion iOS & MacOS setting + // https://webkit.org/blog/7551/responsive-design-for-motion/ + reducedMotion: 'matchMedia' in window && window.matchMedia('(prefers-reduced-motion)').matches, +}; + +export default support; -- cgit v1.2.3 From 8aaa9320505baec3575bc1e92f37225729ee88f6 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Sun, 5 Nov 2017 01:13:00 +1100 Subject: Cleanup --- src/js/support.js | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) (limited to 'src/js/support.js') diff --git a/src/js/support.js b/src/js/support.js index 78650c9f..a8e0cc3e 100644 --- a/src/js/support.js +++ b/src/js/support.js @@ -87,8 +87,8 @@ const support = { // Check for mime type support against a player instance // Credits: http://diveintohtml5.info/everything.html // Related: http://www.leanbackplayer.com/test/h5mt.html - mime(player, type) { - const media = { player }; + mime(type) { + const { media } = this; try { // Bail if no checking function @@ -97,25 +97,31 @@ const support = { } // Type specific checks - if (player.type === 'video') { + if (this.type === 'video') { switch (type) { case 'video/webm': return media.canPlayType('video/webm; codecs="vp8, vorbis"').replace(/no/, ''); + case 'video/mp4': return media.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"').replace(/no/, ''); + case 'video/ogg': return media.canPlayType('video/ogg; codecs="theora"').replace(/no/, ''); + default: return false; } - } else if (player.type === 'audio') { + } else if (this.type === 'audio') { switch (type) { case 'audio/mpeg': return media.canPlayType('audio/mpeg;').replace(/no/, ''); + case 'audio/ogg': return media.canPlayType('audio/ogg; codecs="vorbis"').replace(/no/, ''); + case 'audio/wav': return media.canPlayType('audio/wav; codecs="1"').replace(/no/, ''); + default: return false; } -- cgit v1.2.3 From 921cefd212f65290349aa1d9d533c95cb1f6fcce Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Thu, 23 Nov 2017 17:35:35 +1100 Subject: Moved to provider + type to make it cleaner in future, fix for multiple players --- src/js/support.js | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) (limited to 'src/js/support.js') diff --git a/src/js/support.js b/src/js/support.js index a8e0cc3e..fc61bbf6 100644 --- a/src/js/support.js +++ b/src/js/support.js @@ -12,29 +12,29 @@ const support = { // Check for support // Basic functionality vs full UI - check(type, inline) { + check(type, provider, inline) { let api = false; let ui = false; const browser = utils.getBrowser(); const playsInline = browser.isIPhone && inline && support.inline; - switch (type) { - case 'video': + switch (`${provider}:${type}`) { + case 'html5:video': api = support.video; ui = api && support.rangeInput && (!browser.isIPhone || playsInline); break; - case 'audio': + case 'html5:audio': api = support.audio; ui = api && support.rangeInput; break; - case 'youtube': + case 'youtube:video': api = true; ui = support.rangeInput && (!browser.isIPhone || playsInline); break; - case 'vimeo': + case 'vimeo:video': api = true; ui = support.rangeInput && !browser.isIPhone; break; @@ -92,12 +92,12 @@ const support = { try { // Bail if no checking function - if (!utils.is.function(media.canPlayType)) { + if (!this.isHTML5 || !utils.is.function(media.canPlayType)) { return false; } // Type specific checks - if (this.type === 'video') { + if (this.isVideo) { switch (type) { case 'video/webm': return media.canPlayType('video/webm; codecs="vp8, vorbis"').replace(/no/, ''); @@ -111,7 +111,7 @@ const support = { default: return false; } - } else if (this.type === 'audio') { + } else if (this.isAudio) { switch (type) { case 'audio/mpeg': return media.canPlayType('audio/mpeg;').replace(/no/, ''); -- cgit v1.2.3 From c8990bd379d97f4eb14cc35aaa90caebfb7db220 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Fri, 8 Dec 2017 10:05:38 +0000 Subject: IE & Edge fixes, Storage & Console classes --- src/js/support.js | 19 ------------------- 1 file changed, 19 deletions(-) (limited to 'src/js/support.js') diff --git a/src/js/support.js b/src/js/support.js index fc61bbf6..f75517d6 100644 --- a/src/js/support.js +++ b/src/js/support.js @@ -50,25 +50,6 @@ const support = { }; }, - // Local storage - // We can't assume if local storage is present that we can use it - storage: (() => { - if (!('localStorage' in window)) { - return false; - } - - // Try to use it (it might be disabled, e.g. user is in private/porn mode) - // see: https://github.com/sampotts/plyr/issues/131 - const test = '___test'; - try { - window.localStorage.setItem(test, test); - window.localStorage.removeItem(test); - return true; - } catch (e) { - return false; - } - })(), - // Picture-in-picture support // Safari only currently pip: (() => { -- cgit v1.2.3 From 6831c3053470d092c11536a837ebf8c1a8b5c530 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Fri, 19 Jan 2018 14:22:26 +1100 Subject: Transition event fix --- src/js/support.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/js/support.js') diff --git a/src/js/support.js b/src/js/support.js index f75517d6..23a8ebef 100644 --- a/src/js/support.js +++ b/src/js/support.js @@ -151,7 +151,7 @@ const support = { touch: 'ontouchstart' in document.documentElement, // Detect transitions support - transitions: utils.transitionEnd !== false, + transitions: utils.transitionEndEvent !== false, // Reduced motion iOS & MacOS setting // https://webkit.org/blog/7551/responsive-design-for-motion/ -- cgit v1.2.3 From 5cb1628cd8f9d58b97bf1bf774ff89f61ceb31d5 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Thu, 15 Mar 2018 10:29:05 +1100 Subject: Vimeo fix --- src/js/support.js | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) (limited to 'src/js/support.js') diff --git a/src/js/support.js b/src/js/support.js index 23a8ebef..7f9a88b1 100644 --- a/src/js/support.js +++ b/src/js/support.js @@ -30,13 +30,9 @@ const support = { break; case 'youtube:video': - api = true; - ui = support.rangeInput && (!browser.isIPhone || playsInline); - break; - case 'vimeo:video': api = true; - ui = support.rangeInput && !browser.isIPhone; + ui = support.rangeInput && (!browser.isIPhone || playsInline); break; default: -- cgit v1.2.3