diff options
| author | Albin Larsson <mail@albinlarsson.com> | 2018-05-15 05:16:06 +0200 |
|---|---|---|
| committer | Albin Larsson <mail@albinlarsson.com> | 2018-05-15 16:21:36 +0200 |
| commit | 16c3a7d9e5be8ed2ffbbcee1c786b88d1cecc4cd (patch) | |
| tree | 2620f3e4572e08b69c18a8adab654d39f6582585 /src/js/plugins | |
| parent | 90d5b48845661ce99a204354f93fbbbc7a19f100 (diff) | |
| download | plyr-16c3a7d9e5be8ed2ffbbcee1c786b88d1cecc4cd.tar.lz plyr-16c3a7d9e5be8ed2ffbbcee1c786b88d1cecc4cd.tar.xz plyr-16c3a7d9e5be8ed2ffbbcee1c786b88d1cecc4cd.zip | |
Rewrite ui.setPoster to check that images arent broken or youtube fallback images. Only show poster element when valid
Diffstat (limited to 'src/js/plugins')
| -rw-r--r-- | src/js/plugins/vimeo.js | 7 | ||||
| -rw-r--r-- | src/js/plugins/youtube.js | 8 |
2 files changed, 9 insertions, 6 deletions
diff --git a/src/js/plugins/vimeo.js b/src/js/plugins/vimeo.js index 0ceb89e5..96b36781 100644 --- a/src/js/plugins/vimeo.js +++ b/src/js/plugins/vimeo.js @@ -99,11 +99,8 @@ const vimeo = { // Get original image url.pathname = `${url.pathname.split('_')[0]}.jpg`; - // Set attribute - player.media.setAttribute('poster', url.href); - - // Update - ui.setPoster.call(player); + // Set and show poster + ui.setPoster.call(player, url.href); }); // Setup instance diff --git a/src/js/plugins/youtube.js b/src/js/plugins/youtube.js index 4fde9319..4ba8089b 100644 --- a/src/js/plugins/youtube.js +++ b/src/js/plugins/youtube.js @@ -162,7 +162,13 @@ const youtube = { player.media = utils.replaceElement(container, player.media); // Set poster image - player.media.setAttribute('poster', utils.format(player.config.urls.youtube.poster, videoId)); + const posterSrc = format => `https://img.youtube.com/vi/${videoId}/${format}default.jpg`; + + // Check thumbnail images in order of quality, but reject fallback thumbnails (120px wide) + utils.loadImage(posterSrc('maxres'), 121) // Higest quality and unpadded + .catch(() => utils.loadImage(posterSrc('sd'), 121)) // 480p padded 4:3 + .catch(() => utils.loadImage(posterSrc('hq'))) // 360p padded 4:3. Always exists + .then(image => ui.setPoster.call(player, image.src)); // Setup instance // https://developers.google.com/youtube/iframe_api_reference |