On Safari, YouTube automatic posters don't show. This is a known Safari issue

joedolson · joedolson · commit 4d3fd8484a4e · 2025-12-30T15:14:57.000-06:00
Fetch poster image from YouTube/Vimeo API and set as poster attribute. Fixes #704 and #660
diff --git a/scripts/ableplayer-base.js b/scripts/ableplayer-base.js
@@ -248,6 +248,11 @@ var AblePlayerInstances = [];
 		var youTubeId = $(media).data('youtube-id');
 		if ( youTubeId !== undefined && youTubeId !== "") {
 			this.youTubeId = this.getYouTubeId(youTubeId);
+			if ( ! this.hasPoster ) {
+				let poster = this.getYouTubePosterUrl(this.youTubeId,'1200');
+				$(media).attr( 'poster', poster );
+				this.hasPoster = true;
+			}
 		}
 
 		var youTubeDescId = $(media).data('youtube-desc-id');
@@ -267,6 +272,11 @@ var AblePlayerInstances = [];
 		var vimeoId = $(media).data('vimeo-id');
 		if ( vimeoId !== undefined && vimeoId !== "") {
 			this.vimeoId = this.getVimeoId(vimeoId);
+			if ( ! this.hasPoster ) {
+				let poster = thisObj.getVimeoPosterUrl(this.vimeoId,'1200');
+				$(media).attr( 'poster', poster );
+				this.hasPoster = true;
+			}
 		}
 		var vimeoDescId = $(media).data('vimeo-desc-id');
 		if ( vimeoDescId !== undefined && vimeoDescId !== "") {
diff --git a/scripts/buildplayer.js b/scripts/buildplayer.js
@@ -3,17 +3,13 @@
 	AblePlayer.prototype.injectPlayerCode = function() {
 
 		// create and inject surrounding HTML structure
-		// If iOS:
-		//  If video:
-		//   iOS does not support any of the player's functionality
-		//   - everything plays in its own player
-		//   Therefore, AblePlayer is not loaded & all functionality is disabled
-		//   (this all determined. If this is iOS && video, this function is never called)
+		// If iOS & video:
+		// iOS does not support any of the player's functionality - everything plays in its own player
+		// Therefore, AblePlayer is not loaded & all functionality is disabled
+		// (this all determined. If this is iOS && video, this function is never called)
 
 		var captionsContainer;
-
-		// create three wrappers and wrap them around the media element.
-		// From inner to outer:
+		// Wrappers, from inner to outer:
 		// $mediaContainer - contains the original media element
 		// $ableDiv - contains the media player and all its objects (e.g., captions, controls, descriptions)
 		// $ableWrapper - contains additional widgets (e.g., transcript window, sign window)
diff --git a/scripts/vimeo.js b/scripts/vimeo.js
@@ -230,29 +230,23 @@
 
 	AblePlayer.prototype.getVimeoPosterUrl = function (vimeoId, width) {
 
-		// this is a placeholder, copied from getYouTubePosterUrl()
-		// Vimeo doesn't seem to have anything similar,
-		// Vimeo API for images: https://vimeo.com/api/v2/video/328769500.json
-		// will require an unauthenticated API query.
-
-		// return a URL for retrieving a YouTube poster image
-		// supported values of width: 120, 320, 480, 640
-
-		var url = 'https://img.youtube.com/vi/' + youTubeId;
-		if (width == '120') {
-			// default (small) thumbnail, 120 x 90
-			return url + '/default.jpg';
-		} else if (width == '320') {
-			// medium quality thumbnail, 320 x 180
-			return url + '/hqdefault.jpg';
-		} else if (width == '480') {
-			// high quality thumbnail, 480 x 360
-			return url + '/hqdefault.jpg';
-		} else if (width == '640') {
-			// standard definition poster image, 640 x 480
-			return url + '/sddefault.jpg';
-		}
-		return false;
+		// Vimeo Oembed only returns a 640px width image. Hope at some point there's an alternative.
+		var url = 'http://vimeo.com/api/oembed.json?url=https://vimeo.com/' + vimeoId, imageUrl = '';
+		console.log( url );
+		fetch( url ).then( response => {
+
+			return response.json();
+  		})
+		.then( json => {
+			imageUrl = json.thumbnail_url;
+		})
+		.catch( error => {
+			if (thisObj.debug) {
+				console.log( 'Vimeo API query: ' + error );
+			}
+		});
+
+		return imageUrl;
 	};
 
 	AblePlayer.prototype.getVimeoId = function (url) {
