cloudinary · tsi · Apr 6, 2025 · Apr 1, 2025 · Apr 1, 2025 · Apr 2, 2025
@@ -73,6 +73,7 @@ <h3 class="mt-4">Code examples:</h3>
         <li><a href="./subtitles-and-captions.html">Subtitles & Captions</a></li>
         <li><a href="./transformations.html">Video Transformations</a></li>
         <li><a href="./vast-vpaid.html">VAST & VPAID Support</a></li>
+        <li><a href="./visual-search.html">Visual Search</a></li>
         <li><a href="./360.html">VR/360 Videos</a></li>
         <hr>
         <li><a href="./all.html"><code>/all</code> build</a></li>

@@ -0,0 +1,69 @@
+<!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">Visual Search</h3>
+
+      <video
+        id="player"
+        class="cld-video-player cld-fluid"
+        crossorigin="anonymous"
+        controls
+        muted
+        playsinline
+      ></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/visual-search';
+
+      import 'cloudinary-video-player/cld-video-player.min.css';
+
+      const player = videoPlayer('player', {
+        cloudName: 'demo'
+      });
+
+      // Load source with visual search enabled
+      player.source({
+        publicId: 'marketing-video-2025',
+        info: { title: 'Visual search', subtitle: 'Real results from indexed video' },
+        chapters: {
+          0: 'Opening credits',
+          3: 'A dangerous quest',
+          8: 'The attack'
+        },
+        visualSearch: true
+      });
+    </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>
@@ -79,6 +79,7 @@ <h3 class="mt-4">Some code examples:</h3>
       <li><a href="./subtitles-and-captions.html">Subtitles & Captions</a></li>
       <li><a href="./transformations.html">Video Transformations</a></li>
       <li><a href="./vast-vpaid.html">VAST & VPAID Support</a></li>
+      <li><a href="./visual-search.html">Visual Search</a></li>
       <li><a href="./360.html">VR/360 Videos</a></li>
       <hr>
       <li><a href="./embedded-iframe.html">Embedded (iframe) player</a></li>

@@ -0,0 +1,144 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Cloudinary Video Player - Visual Search</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 () {
+          // Initialize player with visual search plugin
+          const player = cloudinary.videoPlayer('player', {
+            cloudName: 'demo'
+          });
+
+          player.source({
+            publicId: 'marketing-video-2025',
+            info: { title: 'Visual search', subtitle: 'Real results from indexed video' },
+            chapters: {
+              0: 'Opening credits',
+              3: 'A dangerous quest',
+              8: 'The attack'
+            },
+            visualSearch: true
+          });
+
+          // Playlist with mixed content
+          var source1 = {
+            publicId: 'marmots',
+            info: { title: 'Visual search mocked', subtitle: 'Random results from mocked data' },
+            visualSearch: {
+              useMockData: true
+            }
+          };
+          var source2 = {
+            publicId: 'marketing-video-2025',
+            info: { title: 'Visual search', subtitle: 'Real results from indexed video' },
+            visualSearch: true
+          };
+          var source3 = { publicId: 'elephants', info: { title: 'Visual search disabled' } };
+          var source4 = { publicId: 'snow_horses', info: { title: 'Visual search disabled' } };
+
+          var playlistSources = [source1, source2, source3, source4];
+          var playlistOptions = {
+            autoAdvance: true,
+            repeat: true,
+            presentUpcoming: 8
+          };
+
+          var playerPlaylist = cloudinary.videoPlayer('player-playlist', {
+            cloudName: 'demo',
+            playlistWidget: {
+              direction: 'horizontal',
+              total: 4
+            }
+          });
+
+          playerPlaylist.playlist(playlistSources, playlistOptions);
+        },
+        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">Visual Search Plugin</h3>
+
+      <video id="player" playsinline controls class="cld-video-player cld-fluid"></video>
+
+      <hr />
+
+      <h3 class="mb-4">Playlist with mixed content</h3>
+
+      <video id="player-playlist" playsinline controls class="cld-video-player cld-fluid"></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
+      class="cld-video-player cld-fluid"
+      width="500"
+    &gt;&lt;/video&gt;
+      </code>
+      <code class="language-javascript">
+    // Initialize player with visual search plugin
+    const player = cloudinary.videoPlayer('player', {
+      cloudName: 'demo',
+      publicId: 'elephants',
+      visualSearch: true
+    });
+
+      </code>
+    </pre>
+    </div>
+  </body>
+</html>
@@ -3,3 +3,7 @@
 ## How to generate an updated icon-font
 
 Use the utility from https://github.com/videojs/font with the custom icons in the `cld` folder and the configuration in the `icons.json` provided here.
+
+MUI3 icons can be found [here](https://github.com/google/material-design-icons/blob/3.0.2/sprites/css-sprite/sprite-action-black.png).
+
+Copy the generated `videojs-icons.scss` file to the `styles` folder.