feat(VIDEO-20042): image to video (resourceType: 'image')

tsi · tsi · commit 7db2cca4475d · 2025-10-16T17:20:20.000+03:00
diff --git a/docs/es-modules/image-to-video.html b/docs/es-modules/image-to-video.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Cloudinary Video Player</title>
+    <link
+      href="https://res.cloudinary.com/cloudinary-marketing/image/upload/f_auto,q_auto/c_scale,w_32,e_hue:290/creative_staging/cloudinary_internal/Website/Brand%20Updates/Favicon/cloudinary_web_favicon_192x192.png"
+      rel="icon"
+      type="image/png"
+    />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+  <body>
+    <div class="container p-4 col-12 col-md-9 col-xl-6">
+      <nav class="nav mb-2">
+        <a href="/index.html">&#60;&#60; Back to examples index</a>
+      </nav>
+      <h1>Cloudinary Video Player</h1>
+
+      <h3 class="mb-4">Image to Video</h3>
+
+      <video id="player" playsinline controls muted autoplay class="cld-video-player" width="500"></video>
+
+      <p class="mt-4">
+        <a href="https://cloudinary.com/documentation/cloudinary_video_player"
+          >Full documentation</a
+        >
+      </p>
+    </div>
+
+    <script type="module">
+      import { videoPlayer } from 'cloudinary-video-player';
+      import 'cloudinary-video-player/cld-video-player.min.css';
+
+      const player = videoPlayer('player', {
+        cloudName: 'dz6ajwh6k',
+        publicId: 'sample',
+        resourceType: 'image',
+        transformation: [
+          {effect: 'ai:model_veo-animate;details_(prompt_!flying bee!)'},
+          {format: 'auto:video'}
+        ]
+      });
+    </script>
+
+    <!-- Bootstrap -->
+    <link
+      href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
+      rel="stylesheet"
+      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
+      crossorigin="anonymous"
+    />
+  </body>
+</html>
+
diff --git a/docs/es-modules/index.html b/docs/es-modules/index.html
@@ -60,6 +60,7 @@ <h3 class="mt-4">Code examples:</h3>
         <li><a href="./floating-player.html">Floating Player</a></li>
         <li><a href="./fluid.html">Fluid Layouts</a></li>
         <li><a href="./force-hls-subtitles.html">Force HLS Subtitles</a></li>
+        <li><a href="./image-to-video.html">Image to Video</a></li>
         <li><a href="./interaction-area.html">Interaction Area</a></li>
         <li><a href="./multiple-players.html">Multiple Players</a></li>
         <li><a href="./playlist.html">Playlist</a></li>
diff --git a/docs/image-to-video.html b/docs/image-to-video.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Cloudinary Video Player</title>
+  <link href="https://res.cloudinary.com/cloudinary-marketing/image/upload/f_auto,q_auto/c_scale,w_32/v1597183771/creative_staging/cloudinary_internal/Website/Brand%20Updates/Favicon/cloudinary_web_favicon_192x192.png" rel="icon" type="image/png">
+
+  <!-- Bootstrap -->
+  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
+
+  <!-- highlight.js -->
+  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-light.min.css">
+  <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
+  <script>hljs.initHighlightingOnLoad();</script>
+
+  <!--
+    We're loading scripts & style dynamically for development/testing.
+    Real-world usage would look like this:
+
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cloudinary-video-player/dist/cld-video-player.min.css">
+    <script src="https://cdn.jsdelivr.net/npm/cloudinary-video-player/dist/cld-video-player.min.js"></script>
+  -->
+
+  <script type="text/javascript" src="./scripts.js"></script>
+
+  <script type="text/javascript">
+    window.addEventListener('load', function(){
+
+      var player = cloudinary.videoPlayer('player', {
+        cloudName: 'dz6ajwh6k',
+        publicId: 'sample',
+        resourceType: 'image',
+        transformation: [
+          {effect: 'ai:model_veo-animate;details_(prompt_!flying bee!)'},
+          {format: 'auto:video'}
+        ]
+      });
+
+    }, false);
+  </script>
+
+</head>
+<body>
+  <div class="container p-4 col-12 col-md-9 col-xl-6">
+    <nav class="nav mb-2">
+      <a href="./index.html">&#60;&#60; Back to examples index</a>
+    </nav>
+    <h1>Cloudinary Video Player</h1>
+    <h3 class="mb-4">Image to Video</h3>
+
+    <video
+      id="player"
+      playsinline
+      controls
+      muted
+      autoplay
+      class="cld-video-player"
+      width="500"
+    ></video>
+
+    <p class="mt-4">
+      <a href="https://cloudinary.com/documentation/cloudinary_video_player">Full documentation</a>
+    </p>
+
+    <h3 class="mt-4">Example Code:</h3>
+    <pre>
+      <code class="language-html">
+        &lt;video
+          id="player"
+          playsinline
+          controls
+          muted
+          autoplay
+          class="cld-video-player"
+          width="500"
+        &gt;&lt;/video&gt;
+      </code>
+      <code class="language-javascript">
+
+        // Initialize player with image resource type
+        var player = cloudinary.videoPlayer('player', {
+          cloudName: 'dz6ajwh6k',
+          publicId: 'sample',
+          resourceType: 'image',
+          transformation: [
+            {effect: 'ai:model_veo-animate;details_(prompt_!flying bee!)'},
+            {format: 'auto:video'}
+          ]
+        });
+      </code>
+    </pre>
+  </div>
+
+</body>
+</html>
+
diff --git a/docs/index.html b/docs/index.html
@@ -64,6 +64,7 @@ <h3 class="mt-4">Some code examples:</h3>
       <li><a href="./floating-player.html">Floating Player</a></li>
       <li><a href="./fluid.html">Fluid Layouts</a></li>
       <li><a href="./force-hls-subtitles-ios.html">Force HLS Subtitles</a></li>
+      <li><a href="./image-to-video.html">Image to Video</a></li>
       <li><a href="./interaction-area.html">Interaction Area</a></li>
       <li><a href="./live-streaming.html">Live Streaming</a></li>
       <li><a href="./multiple-players.html">Multiple Players</a></li>
diff --git a/src/plugins/cloudinary/models/video-source/video-source.const.js b/src/plugins/cloudinary/models/video-source/video-source.const.js
@@ -1,7 +1,6 @@
 export const DEFAULT_POSTER_PARAMS = { format: 'jpg', resource_type: 'video' };
 
 export const DEFAULT_VIDEO_PARAMS = {
-  resource_type: 'video',
   type: 'upload',
   transformation: [],
   sourceTransformation: {},
diff --git a/src/plugins/cloudinary/models/video-source/video-source.js b/src/plugins/cloudinary/models/video-source/video-source.js
@@ -34,7 +34,9 @@ class VideoSource extends BaseSource {
     options = Object.assign({}, DEFAULT_VIDEO_PARAMS, options);
 
     if (!options.poster) {
-      options.poster = Object.assign({ publicId }, DEFAULT_POSTER_PARAMS);
+      options.poster = Object.assign({ publicId }, DEFAULT_POSTER_PARAMS, {
+        resource_type: options.resourceType || 'video'
+      });
     }
 
     super(publicId, options);
@@ -67,18 +69,18 @@ class VideoSource extends BaseSource {
         this[prop](options[prop]);
       }
     });
-    
+
     // Initialize poster
     this.poster(options.poster);
-    
+
     this.objectId = generateId();
   }
 
   // Helper method to create simple getter/setter methods
   _createGetterSetters(properties) {
     properties.forEach(prop => {
       const privateKey = `_${prop}`;
-      this[prop] = function(value) {
+      this[prop] = function (value) {
         if (value === undefined) {
           // Provide sensible defaults for specific properties
           if (prop === 'sourceTypes' && this[privateKey] === undefined) {
@@ -119,7 +121,9 @@ class VideoSource extends BaseSource {
 
     if (!publicId) {
       publicId = this.publicId();
-      options = Object.assign({}, options, DEFAULT_POSTER_PARAMS);
+      options = Object.assign({}, options, DEFAULT_POSTER_PARAMS, {
+        resource_type: this.resourceType() || 'video'
+      });
     }
 
     options.cloudinaryConfig = options.cloudinaryConfig || this.cloudinaryConfig();
@@ -149,7 +153,10 @@ class VideoSource extends BaseSource {
         opts.transformation = castArray(srcTransformation);
       }
 
-      Object.assign(opts, { resource_type: 'video', format });
+      Object.assign(opts, {
+        resource_type: this.resourceType() || 'video',
+        format
+      });
 
       const [type, codecTrans] = formatToMimeTypeAndTransformation(sourceType);
 
@@ -214,7 +221,7 @@ class VideoSource extends BaseSource {
     }
 
     const info = this._info || this.getInitOptions().info;
-    
+
     return {
       title: this.title() || info?.title || '',
       subtitle: this.description() || info?.subtitle || '',
diff --git a/src/video-player.const.js b/src/video-player.const.js
@@ -13,6 +13,7 @@ export const SOURCE_PARAMS = [
   'publicId',
   'rawTransformation',
   'recommendations',
+  'resourceType',
   'shoppable',
   'source',
   'sourceTransformation',
diff --git a/src/video-player.js b/src/video-player.js
@@ -268,7 +268,10 @@ class VideoPlayer extends Utils.mixin(Eventable) {
         transformation.flags.push('sprite');
 
         const vttSrc = source.config()
-          .url(`${publicId}.vtt`, { transformation })
+          .url(`${publicId}.vtt`, {
+            transformation,
+            resource_type: source.resourceType ? source.resourceType() : undefined
+          })
           .replace(/\.json$/, ''); // Handle playlist by tag
 
         // vttThumbnails must be called differently on init and on source update.
diff --git a/test/unit/videoSource.test.js b/test/unit/videoSource.test.js
@@ -474,4 +474,70 @@ describe('test hasCodec method', () => {
     });
 
   });
+
+  describe('resourceType parameter tests', () => {
+    it('should use image resourceType when specified', () => {
+      const source = new VideoSource('sample', {
+        cloudinaryConfig: cld,
+        resourceType: 'image',
+        transformation: [
+          { effect: 'ai:model_veo-animate;details_(prompt_!flying bee!)' },
+          { format: 'auto:video' }
+        ]
+      });
+
+      const srcs = source.generateSources();
+      expect(srcs[0].src).toContain('/image/upload/');
+      expect(srcs[0].src).toContain('e_ai:model_veo-animate');
+    });
+
+    it('should default to video resourceType when not specified', () => {
+      const source = new VideoSource('sea_turtle', {
+        cloudinaryConfig: cld
+      });
+
+      const srcs = source.generateSources();
+      expect(srcs[0].src).toContain('/video/upload/');
+    });
+    
+    it('should use image resourceType for poster', () => {
+      const source = new VideoSource('sample', {
+        cloudinaryConfig: cld,
+        resourceType: 'image',
+        transformation: [
+          { effect: 'ai:model_veo-animate' }
+        ]
+      });
+
+      const posterUrl = source.poster().url();
+      expect(posterUrl).toContain('/image/upload/');
+      expect(posterUrl).toContain('sample.jpg');
+    });
+
+    it('should use video resourceType for poster by default', () => {
+      const source = new VideoSource('sea_turtle', {
+        cloudinaryConfig: cld
+      });
+
+      const posterUrl = source.poster().url();
+      expect(posterUrl).toContain('/video/upload/');
+    });
+
+    it('should use image resourceType for seek thumbnails', () => {
+      const source = new VideoSource('sample', {
+        cloudinaryConfig: cld,
+        resourceType: 'image',
+        transformation: [
+          { effect: 'ai:model_veo-animate' }
+        ]
+      });
+
+      const vttUrl = source.config().url('sample.vtt', {
+        transformation: { flags: ['sprite'] },
+        resource_type: source.resourceType()
+      });
+      expect(vttUrl).toContain('/image/upload/');
+      expect(vttUrl).toContain('fl_sprite');
+    });
+  });
 });
