Skip to content

Commit 55d5001

Browse files
tsitsi
authored
feat: visual search plugin (#841)
* feat: visual search plugin * feat: visual search plugin * feat: visual search plugin * chore: visual-search example * feat: visual search plugin * feat: visual search plugin * feat: visual search plugin * feat: visual search plugin * chore: visual-search e2e * chore: visual search use default spinner * chore: visual search E2E * chore: visual search E2E
1 parent 74c8f72 commit 55d5001

31 files changed

Lines changed: 820 additions & 98 deletions

‎docs/es-modules/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,7 @@ <h3 class="mt-4">Code examples:</h3>
7373
<li><a href="./subtitles-and-captions.html">Subtitles & Captions</a></li>
7474
<li><a href="./transformations.html">Video Transformations</a></li>
7575
<li><a href="./vast-vpaid.html">VAST & VPAID Support</a></li>
76+
<li><a href="./visual-search.html">Visual Search</a></li>
7677
<li><a href="./360.html">VR/360 Videos</a></li>
7778
<hr>
7879
<li><a href="./all.html"><code>/all</code> build</a></li>

‎docs/es-modules/visual-search.html‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Cloudinary Video Player</title>
6+
<link
7+
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"
8+
rel="icon"
9+
type="image/png"
10+
/>
11+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
12+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
13+
</head>
14+
<body>
15+
<div class="container p-4 col-12 col-md-9 col-xl-6">
16+
<nav class="nav mb-2">
17+
<a href="/index.html">&#60;&#60; Back to examples index</a>
18+
</nav>
19+
<h1>Cloudinary Video Player</h1>
20+
<h3 class="mb-4">Visual Search</h3>
21+
22+
<video
23+
id="player"
24+
class="cld-video-player cld-fluid"
25+
crossorigin="anonymous"
26+
controls
27+
muted
28+
playsinline
29+
></video>
30+
31+
<p class="mt-4">
32+
<a href="https://cloudinary.com/documentation/cloudinary_video_player"
33+
>Full documentation</a
34+
>
35+
</p>
36+
</div>
37+
38+
<script type="module">
39+
import { videoPlayer } from 'cloudinary-video-player';
40+
import 'cloudinary-video-player/visual-search';
41+
42+
import 'cloudinary-video-player/cld-video-player.min.css';
43+
44+
const player = videoPlayer('player', {
45+
cloudName: 'demo'
46+
});
47+
48+
// Load source with visual search enabled
49+
player.source({
50+
publicId: 'marketing-video-2025',
51+
info: { title: 'Visual search', subtitle: 'Real results from indexed video' },
52+
chapters: {
53+
0: 'Opening credits',
54+
3: 'A dangerous quest',
55+
8: 'The attack'
56+
},
57+
visualSearch: true
58+
});
59+
</script>
60+
61+
<!-- Bootstrap -->
62+
<link
63+
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
64+
rel="stylesheet"
65+
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
66+
crossorigin="anonymous"
67+
/>
68+
</body>
69+
</html>

‎docs/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,7 @@ <h3 class="mt-4">Some code examples:</h3>
7979
<li><a href="./subtitles-and-captions.html">Subtitles & Captions</a></li>
8080
<li><a href="./transformations.html">Video Transformations</a></li>
8181
<li><a href="./vast-vpaid.html">VAST & VPAID Support</a></li>
82+
<li><a href="./visual-search.html">Visual Search</a></li>
8283
<li><a href="./360.html">VR/360 Videos</a></li>
8384
<hr>
8485
<li><a href="./embedded-iframe.html">Embedded (iframe) player</a></li>

‎docs/visual-search.html‎

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Cloudinary Video Player - Visual Search</title>
6+
<link
7+
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"
8+
rel="icon"
9+
type="image/png"
10+
/>
11+
12+
<!-- Bootstrap -->
13+
<link
14+
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
15+
rel="stylesheet"
16+
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
17+
crossorigin="anonymous"
18+
/>
19+
20+
<!-- highlight.js -->
21+
<link
22+
rel="stylesheet"
23+
href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-light.min.css"
24+
/>
25+
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
26+
<script>
27+
hljs.initHighlightingOnLoad();
28+
</script>
29+
30+
<!--
31+
We're loading scripts & style dynamically for development/testing.
32+
Real-world usage would look like this:
33+
34+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cloudinary-video-player/dist/cld-video-player.min.css">
35+
<script src="https://cdn.jsdelivr.net/npm/cloudinary-video-player/dist/cld-video-player.min.js"></script>
36+
37+
-->
38+
39+
<script type="text/javascript" src="./scripts.js"></script>
40+
41+
<script type="text/javascript">
42+
window.addEventListener(
43+
'load',
44+
function () {
45+
// Initialize player with visual search plugin
46+
const player = cloudinary.videoPlayer('player', {
47+
cloudName: 'demo'
48+
});
49+
50+
player.source({
51+
publicId: 'marketing-video-2025',
52+
info: { title: 'Visual search', subtitle: 'Real results from indexed video' },
53+
visualSearch: true
54+
});
55+
56+
// Playlist with mixed content
57+
var source1 = {
58+
publicId: 'marketing-video-2025',
59+
info: { title: 'Visual search', subtitle: 'Real results from indexed video' },
60+
visualSearch: true,
61+
};
62+
var source2 = {
63+
publicId: 'docs/ping_pong_paddle',
64+
info: { title: 'Visual search with chapters', subtitle: 'Real results from indexed video' },
65+
visualSearch: true,
66+
chapters: {
67+
0: 'Opening credits',
68+
3: 'A dangerous quest',
69+
8: 'The attack'
70+
},
71+
};
72+
var source3 = {
73+
publicId: 'docs/pizza_slice',
74+
info: { title: 'Visual search', subtitle: 'Real results from indexed video' },
75+
visualSearch: true
76+
};
77+
var source4 = { publicId: 'snow_horses', info: { title: 'Visual search disabled' } };
78+
79+
var playlistSources = [source1, source2, source3, source4];
80+
var playlistOptions = {
81+
autoAdvance: true,
82+
repeat: true,
83+
presentUpcoming: 8
84+
};
85+
86+
var playerPlaylist = cloudinary.videoPlayer('player-playlist', {
87+
cloudName: 'demo',
88+
aspectRatio: '16:9',
89+
playlistWidget: {
90+
direction: 'horizontal',
91+
total: 4
92+
}
93+
});
94+
95+
playerPlaylist.playlist(playlistSources, playlistOptions);
96+
},
97+
false
98+
);
99+
</script>
100+
</head>
101+
102+
<body>
103+
<div class="container p-4 col-12 col-md-9 col-xl-6">
104+
<nav class="nav mb-2">
105+
<a href="./index.html">&#60;&#60; Back to examples index</a>
106+
</nav>
107+
<h1>Cloudinary Video Player</h1>
108+
<h3 class="mb-4">Visual Search Plugin</h3>
109+
110+
<video id="player" playsinline controls class="cld-video-player cld-fluid"></video>
111+
112+
<hr />
113+
114+
<h3 class="mb-4">Playlist with mixed content</h3>
115+
116+
<video id="player-playlist" playsinline controls class="cld-video-player cld-fluid"></video>
117+
118+
<p class="mt-4">
119+
<a href="https://cloudinary.com/documentation/cloudinary_video_player"
120+
>Full documentation</a
121+
>
122+
</p>
123+
124+
<h3 class="mt-4">Example Code:</h3>
125+
<pre>
126+
<code class="language-html">
127+
&lt;video
128+
id="player"
129+
playsinline
130+
controls
131+
class="cld-video-player cld-fluid"
132+
width="500"
133+
&gt;&lt;/video&gt;
134+
</code>
135+
<code class="language-javascript">
136+
// Initialize player with visual search plugin
137+
const player = cloudinary.videoPlayer('player', {
138+
cloudName: 'demo',
139+
publicId: 'elephants',
140+
visualSearch: true
141+
});
142+
143+
</code>
144+
</pre>
145+
</div>
146+
</body>
147+
</html>

‎src/assets/icon-font/README.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,7 @@
33
## How to generate an updated icon-font
44

55
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.
6+
7+
MUI3 icons can be found [here](https://github.com/google/material-design-icons/blob/3.0.2/sprites/css-sprite/sprite-action-black.png).
8+
9+
Copy the generated `videojs-icons.scss` file to the `styles` folder.

0 commit comments

Comments
 (0)