Merge branch 'develop' of https://github.com/ableplayer/ableplayer into develop

joedolson · joedolson · commit 360b5ebf0760 · 2025-12-30T15:44:08.000-06:00
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/misc.js b/scripts/misc.js
@@ -141,6 +141,26 @@
 	});
   }
 
+  AblePlayer.prototype.getScript = function( source, callback ) {
+	var script   = document.createElement('script');
+	var prior    = document.getElementsByTagName('script')[0];
+	script.async = 1;
+
+	script.onload = script.onreadystatechange = function( _, isAbort ) {
+		if ( isAbort || !script.readyState || /loaded|complete/.test(script.readyState) ) {
+			script.onload = script.onreadystatechange = null;
+			script        = undefined;
+
+			if ( !isAbort && callback ) {
+				setTimeout(callback, 0);
+			}
+		}
+	};
+
+	script.src = source;
+	prior.parentNode.insertBefore(script, prior);
+  }
+
   AblePlayer.prototype.hasAttr = function (object, attribute) {
     // surprisingly, there is no hasAttr() function in Jquery as of 3.2.1
     // return true if object has attribute; otherwise false
diff --git a/scripts/sign.js b/scripts/sign.js
@@ -134,9 +134,9 @@
 			});
 		} else {
 			// Has another player already started loading the script? If so, abort...
-			if (!AblePlayer.loadingYouTubeIframeAPI) {
-				$.getScript('https://www.youtube.com/iframe_api').fail(function () {
-					deferred.reject();
+			if ( ! AblePlayer.loadingYouTubeIframeAPI ) {
+				thisObj.getScript('https://www.youtube.com/iframe_api', function () {
+					console.log( 'YouTube API loaded' );
 				});
 			}
 
diff --git a/scripts/vimeo.js b/scripts/vimeo.js
@@ -228,29 +228,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) {
diff --git a/scripts/youtube.js b/scripts/youtube.js
@@ -22,8 +22,8 @@
 		} else {
 			// Has another player already started loading the script? If so, abort...
 			if (!AblePlayer.loadingYouTubeIframeAPI) {
-				$.getScript('https://www.youtube.com/iframe_api').fail(function () {
-					deferred.reject();
+				thisObj.getScript('https://www.youtube.com/iframe_api', function () {
+					console.log( 'YouTube API loaded' );
 				});
 			}
 
