diff options
Diffstat (limited to 'dist/plyr.js')
| -rw-r--r-- | dist/plyr.js | 170 |
1 files changed, 97 insertions, 73 deletions
diff --git a/dist/plyr.js b/dist/plyr.js index 7a673573..588f047b 100644 --- a/dist/plyr.js +++ b/dist/plyr.js @@ -3659,7 +3659,7 @@ typeof navigator === "object" && (function (global, factory) { // Sprite (for icons) loadSprite: true, iconPrefix: 'plyr', - iconUrl: 'https://cdn.plyr.io/3.6.2/plyr.svg', + iconUrl: 'https://cdn.plyr.io/3.6.3/plyr.svg', // Blank video (used to prevent errors on source change) blankVideo: 'https://cdn.plyr.io/static/blank.mp4', // Quality default @@ -3777,7 +3777,7 @@ typeof navigator === "object" && (function (global, factory) { vimeo: { sdk: 'https://player.vimeo.com/api/player.js', iframe: 'https://player.vimeo.com/video/{0}?{1}', - api: 'https://vimeo.com/api/v2/video/{0}.json' + api: 'https://vimeo.com/api/oembed.json?url={0}' }, youtube: { sdk: 'https://www.youtube.com/iframe_api', @@ -3947,24 +3947,27 @@ typeof navigator === "object" && (function (global, factory) { title: false, speed: true, transparent: false, + // Custom settings from Plyr + customControls: true, + referrerPolicy: null, + // https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement/referrerPolicy // Whether the owner of the video has a Pro or Business account // (which allows us to properly hide controls without CSS hacks, etc) - premium: false, - // Custom settings from Plyr - referrerPolicy: null // https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement/referrerPolicy - + premium: false }, // YouTube plugin youtube: { - noCookie: true, - // Whether to use an alternative version of YouTube without cookies rel: 0, // No related vids showinfo: 0, // Hide info iv_load_policy: 3, // Hide annotations - modestbranding: 1 // Hide logos as much as possible (they still show one in the corner when paused) + modestbranding: 1, + // Hide logos as much as possible (they still show one in the corner when paused) + // Custom settings from Plyr + customControls: true, + noCookie: false // Whether to use an alternative version of YouTube without cookies } }; @@ -4083,7 +4086,7 @@ typeof navigator === "object" && (function (global, factory) { return; } - _this.toggle(); + _this.player.listeners.proxy(event, _this.toggle, 'fullscreen'); }); // Tap focus when in fullscreen on.call(this, this.player.elements.container, 'keydown', function (event) { @@ -4493,7 +4496,9 @@ typeof navigator === "object" && (function (global, factory) { } // Set property synchronously to respect the call order - this.media.setAttribute('data-poster', poster); // Wait until ui is ready + this.media.setAttribute('data-poster', poster); // Show the poster + + this.elements.poster.removeAttribute('hidden'); // Wait until ui is ready return ready.call(this) // Load image .then(function () { @@ -4925,7 +4930,14 @@ typeof navigator === "object" && (function (global, factory) { ratio = _setPlayerSize.ratio; // Set Vimeo gutter - setGutter(ratio, padding, isEnter); // If not using native browser fullscreen API, we need to check for resizes of viewport + setGutter(ratio, padding, isEnter); // Horrible hack for Safari 14 not repainting properly on entering fullscreen + + if (isEnter) { + setTimeout(function () { + return repaint(elements.container); + }, 100); + } // If not using native browser fullscreen API, we need to check for resizes of viewport + if (!usingNative) { if (isEnter) { @@ -5116,9 +5128,17 @@ typeof navigator === "object" && (function (global, factory) { this.bind(elements.buttons.restart, 'click', player.restart, 'restart'); // Rewind - this.bind(elements.buttons.rewind, 'click', player.rewind, 'rewind'); // Rewind + this.bind(elements.buttons.rewind, 'click', function () { + // Record seek time so we can prevent hiding controls for a few seconds after rewind + player.lastSeekTime = Date.now(); + player.rewind(); + }, 'rewind'); // Rewind - this.bind(elements.buttons.fastForward, 'click', player.forward, 'fastForward'); // Mute toggle + this.bind(elements.buttons.fastForward, 'click', function () { + // Record seek time so we can prevent hiding controls for a few seconds after fast forward + player.lastSeekTime = Date.now(); + player.forward(); + }, 'fastForward'); // Mute toggle this.bind(elements.buttons.mute, 'click', function () { player.muted = !player.muted; @@ -5773,35 +5793,32 @@ typeof navigator === "object" && (function (global, factory) { } // Inject the package - var poster = player.poster; - - if (premium) { - iframe.setAttribute('data-poster', poster); + if (premium || !config.customControls) { + iframe.setAttribute('data-poster', player.poster); player.media = replaceElement(iframe, player.media); } else { var wrapper = createElement('div', { class: player.config.classNames.embedContainer, - 'data-poster': poster + 'data-poster': player.poster }); wrapper.appendChild(iframe); player.media = replaceElement(wrapper, player.media); } // Get poster image - fetch(format(player.config.urls.vimeo.api, id), 'json').then(function (response) { - if (is$1.empty(response)) { - return; - } // Get the URL for thumbnail - - - var url = new URL(response[0].thumbnail_large); // Get original image + if (!config.customControls) { + fetch(format(player.config.urls.vimeo.api, src)).then(function (response) { + if (is$1.empty(response) || !response.thumbnail_url) { + return; + } // Set and show poster - url.pathname = "".concat(url.pathname.split('_')[0], ".jpg"); // Set and show poster - ui.setPoster.call(player, url.href).catch(function () {}); - }); // Setup instance + ui.setPoster.call(player, response.thumbnail_url).catch(function () {}); + }); + } // Setup instance // https://github.com/vimeo/player.js + player.embed = new window.Vimeo.Player(iframe, { autopause: player.config.autopause, muted: player.muted @@ -6041,9 +6058,11 @@ typeof navigator === "object" && (function (global, factory) { triggerEvent.call(player, player.media, 'error'); }); // Rebuild UI - setTimeout(function () { - return ui.build.call(player); - }, 0); + if (config.customControls) { + setTimeout(function () { + return ui.build.call(player); + }, 0); + } } }; @@ -6136,7 +6155,8 @@ typeof navigator === "object" && (function (global, factory) { }, // API ready ready: function ready() { - var player = this; // Ignore already setup (race condition) + var player = this; + var config = player.config.youtube; // Ignore already setup (race condition) var currentId = player.media && player.media.getAttribute('id'); @@ -6153,53 +6173,53 @@ typeof navigator === "object" && (function (global, factory) { var videoId = parseId$1(source); - var id = generateId(player.provider); // Get poster, if already set - - var poster = player.poster; // Replace media element + var id = generateId(player.provider); // Replace media element var container = createElement('div', { id: id, - 'data-poster': poster + 'data-poster': config.customControls ? player.poster : undefined }); - player.media = replaceElement(container, player.media); // Id to poster wrapper - - var posterSrc = function posterSrc(s) { - return "https://i.ytimg.com/vi/".concat(videoId, "/").concat(s, "default.jpg"); - }; // Check thumbnail images in order of quality, but reject fallback thumbnails (120px wide) - - - loadImage(posterSrc('maxres'), 121) // Higest quality and unpadded - .catch(function () { - return loadImage(posterSrc('sd'), 121); - }) // 480p padded 4:3 - .catch(function () { - return loadImage(posterSrc('hq')); - }) // 360p padded 4:3. Always exists - .then(function (image) { - return ui.setPoster.call(player, image.src); - }).then(function (src) { - // If the image is padded, use background-size "cover" instead (like youtube does too with their posters) - if (!src.includes('maxres')) { - player.elements.poster.style.backgroundSize = 'cover'; - } - }).catch(function () {}); - var config = player.config.youtube; // Setup instance + player.media = replaceElement(container, player.media); // Only load the poster when using custom controls + + if (config.customControls) { + var posterSrc = function posterSrc(s) { + return "https://i.ytimg.com/vi/".concat(videoId, "/").concat(s, "default.jpg"); + }; // Check thumbnail images in order of quality, but reject fallback thumbnails (120px wide) + + + loadImage(posterSrc('maxres'), 121) // Higest quality and unpadded + .catch(function () { + return loadImage(posterSrc('sd'), 121); + }) // 480p padded 4:3 + .catch(function () { + return loadImage(posterSrc('hq')); + }) // 360p padded 4:3. Always exists + .then(function (image) { + return ui.setPoster.call(player, image.src); + }).then(function (src) { + // If the image is padded, use background-size "cover" instead (like youtube does too with their posters) + if (!src.includes('maxres')) { + player.elements.poster.style.backgroundSize = 'cover'; + } + }).catch(function () {}); + } // Setup instance // https://developers.google.com/youtube/iframe_api_reference - player.embed = new window.YT.Player(id, { + + player.embed = new window.YT.Player(player.media, { videoId: videoId, host: getHost(config), playerVars: extend({}, { - autoplay: player.config.autoplay ? 1 : 0, // Autoplay - hl: player.config.hl, + autoplay: player.config.autoplay ? 1 : 0, // iframe interface language - controls: player.supported.ui ? 0 : 1, - // Only show controls if not fully supported - disablekb: 1, + hl: player.config.hl, + // Only show controls if not fully supported or opted out + controls: player.supported.ui && config.customControls ? 0 : 1, // Disable keyboard as we handle it - playsinline: !player.config.fullscreen.iosNative ? 1 : 0, + disablekb: 1, // Allow iOS inline playback + playsinline: !player.config.fullscreen.iosNative ? 1 : 0, // Captions are flaky on YouTube cc_load_policy: player.captions.active ? 1 : 0, cc_lang_pref: player.config.captions.language, @@ -6310,6 +6330,7 @@ typeof navigator === "object" && (function (global, factory) { var toggle = is$1.boolean(input) ? input : muted; muted = toggle; instance[toggle ? 'mute' : 'unMute'](); + instance.setVolume(volume * 100); triggerEvent.call(player, player.media, 'volumechange'); } }); // Source @@ -6332,7 +6353,7 @@ typeof navigator === "object" && (function (global, factory) { return player.config.speed.options.includes(s); }); // Set the tabindex to avoid focus entering iframe - if (player.supported.ui) { + if (player.supported.ui && config.customControls) { player.media.setAttribute('tabindex', -1); } @@ -6359,9 +6380,11 @@ typeof navigator === "object" && (function (global, factory) { } }, 200); // Rebuild UI - setTimeout(function () { - return ui.build.call(player); - }, 50); + if (config.customControls) { + setTimeout(function () { + return ui.build.call(player); + }, 50); + } }, onStateChange: function onStateChange(event) { // Get the instance @@ -6407,7 +6430,7 @@ typeof navigator === "object" && (function (global, factory) { case 1: // Restore paused state (YouTube starts playing on seek if the video hasn't been played yet) - if (!player.config.autoplay && player.media.paused && !player.embed.hasPlayed) { + if (config.customControls && !player.config.autoplay && player.media.paused && !player.embed.hasPlayed) { player.media.pause(); } else { assurePlaybackState$1.call(player, true); @@ -6481,7 +6504,8 @@ typeof navigator === "object" && (function (global, factory) { wrap(this.media, this.elements.wrapper); // Poster image container this.elements.poster = createElement('div', { - class: this.config.classNames.poster + class: this.config.classNames.poster, + hidden: '' }); this.elements.wrapper.appendChild(this.elements.poster); } |