diff --git a/docs/es-modules/poster.html b/docs/es-modules/poster.html index ac4b6a3c..fc261403 100644 --- a/docs/es-modules/poster.html +++ b/docs/es-modules/poster.html @@ -53,6 +53,12 @@
Full documentationRaw URL - default with no poster image cloudName: 'demo', publicId: 'https://res.cloudinary.com/demo/video/upload/sp_auto/sea_turtle.m3u8' }); + + const playerAppletPoster = videoPlayer('player-applet-poster', { + cloudName: 'demo', + publicId: 'snow_horses', + poster: true + }); diff --git a/docs/poster.html b/docs/poster.html index da11778d..6ed9ded6 100644 --- a/docs/poster.html +++ b/docs/poster.html @@ -56,6 +56,12 @@ publicId: 'https://res.cloudinary.com/demo/video/upload/sp_auto/sea_turtle.m3u8' }); + player5 = cloudinary.videoPlayer('player-applet-poster', { + cloud_name: 'demo', + publicId: 'snow_horses', + poster: true + }); + }, false); @@ -113,6 +119,17 @@
@@ -179,6 +203,12 @@ Example Code:
publicId: 'https://res.cloudinary.com/demo/video/upload/sp_auto/sea_turtle.m3u8'
});
+ player5 = cloudinary.videoPlayer('player-applet-poster', {
+ cloud_name: 'demo',
+ publicId: 'snow_horses',
+ poster: true
+ });
+
diff --git a/src/plugins/cloudinary/index.js b/src/plugins/cloudinary/index.js
index e0c303a2..5ca000b6 100644
--- a/src/plugins/cloudinary/index.js
+++ b/src/plugins/cloudinary/index.js
@@ -122,8 +122,14 @@ class CloudinaryContext {
options.cloudinaryConfig = extendCloudinaryConfig(this.cloudinaryConfig(), options.cloudinaryConfig || {});
options.transformation = mergeTransformations(this.transformation(), options.transformation || {});
options.sourceTransformation = options.sourceTransformation || this.sourceTransformation();
- options.sourceTypes = options.sourceTypes || this.sourceTypes();
- options.poster = options.poster || posterOptionsForCurrent();
+ options.sourceTypes = options.sourceTypes || this.sourceTypes();
+
+
+ const defaultPosterOptions = posterOptionsForCurrent();
+ const userPosterOptions = options.posterOptions || {};
+ options.poster = options.poster || defaultPosterOptions;
+ options.posterOptions = Object.assign({}, defaultPosterOptions, userPosterOptions);
+
options.queryParams = Object.assign(options.queryParams || {}, options.allowUsageReport ? { _s: `vp-${VERSION}` } : {});
if (options.sourceTypes.indexOf('audio') > -1) {
diff --git a/src/plugins/cloudinary/models/video-source/video-source.js b/src/plugins/cloudinary/models/video-source/video-source.js
index 08cbe769..a4fab60a 100644
--- a/src/plugins/cloudinary/models/video-source/video-source.js
+++ b/src/plugins/cloudinary/models/video-source/video-source.js
@@ -14,7 +14,9 @@ import {
hasCodec,
normalizeFormat
} from './video-source.utils';
-import { normalizeOptions, isSrcEqual, isRawUrl, mergeTransformations } from '../../common';
+import { normalizeOptions, isSrcEqual, isRawUrl, mergeTransformations, getCloudinaryUrlPrefix } from '../../common';
+import { utf8ToBase64 } from 'utils/utf8Base64';
+import Transformation from '@cloudinary/url-gen/backwards/transformation';
import BaseSource from '../base-source';
import ImageSource from '../image-source';
@@ -127,9 +129,28 @@ class VideoSource extends BaseSource {
}
options.cloudinaryConfig = options.cloudinaryConfig || this.cloudinaryConfig();
-
+
options.resource_type = this.resourceType() || options.resource_type;
-
+
+ if (publicId === true) {
+ const urlPrefix = getCloudinaryUrlPrefix(options.cloudinaryConfig);
+ const deliveryType = this.getInitOptions().type || 'upload';
+ const base64PublicId = utf8ToBase64(this.publicId());
+ let appletUrl = `${urlPrefix}/_applet_/video_service/elements/${deliveryType}/${base64PublicId}/poster`;
+
+ const transformation = this.getInitOptions().posterOptions?.transformation;
+ if (transformation) {
+ const transformationString = new Transformation(transformation).toString();
+ appletUrl += `?tx=${transformationString}`;
+ }
+
+ this._poster = new ImageSource(appletUrl, {
+ cloudinaryConfig: options.cloudinaryConfig
+ });
+
+ return this;
+ }
+
this._poster = new ImageSource(publicId, options);
return this;
diff --git a/src/utils/get-analytics-player-options.js b/src/utils/get-analytics-player-options.js
index 1b59d01f..6b7e0417 100644
--- a/src/utils/get-analytics-player-options.js
+++ b/src/utils/get-analytics-player-options.js
@@ -12,6 +12,11 @@ const filterDefaultsAndNulls = (obj) => Object.entries(obj).reduce((filtered, [k
}, {});
const getSourceOptions = (sourceOptions = {}) => ({
+ poster: (() => {
+ if (sourceOptions.poster === true) return 'auto';
+ if (typeof sourceOptions.poster === 'string') return 'url';
+ return undefined;
+ })(),
posterOptions: hasConfig(sourceOptions.posterOptions),
posterOptionsPublicId: sourceOptions.posterOptions && hasConfig(sourceOptions.posterOptions.publicId),
autoShowRecommendations: sourceOptions.autoShowRecommendations,